<!--
  ~ Copyright (c) 2023 D2ArmorPicker by Mijago.
  ~
  ~ This program is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU Affero General Public License as published
  ~ by the Free Software Foundation, either version 3 of the License, or
  ~ (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div>
  <mat-toolbar *ngIf="mayAnyItemBeBugged" class="invalid-item-box mat-elevation-z4" color="warn">
    Warning: The stats of one or more items used for this build may be invalid.<br />
    Please remove all negative/positive stat modifiers from the marked items.
  </mat-toolbar>

  This table shows you the expected stats of any item:
  <table class="specificStatTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Mobility</th>
        <th>Resilience</th>
        <th>Recovery</th>
        <th>Discipline</th>
        <th>Intellect</th>
        <th>Strength</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <!-- Items -->
    <ng-container *ngFor="let items of element?.items">
      <tr *ngFor="let i of items" [class.highlight-row]="items[0].slot % 2 === 0">
        <td>
          <u
            #tooltip="matTooltip"
            *ngIf="i.masterworked"
            class="item-name-mw"
            matTooltip="This item is already masterworked."
            >{{ i.name }}</u
          >
          <span *ngIf="!i.masterworked">{{ i.name }}</span>
        </td>
        <ng-container
          *ngVar="
            i.masterworked ||
            (!i.exotic && config_assumeLegendariesMasterworked) ||
            (i.exotic && config_assumeExoticsMasterworked)
              ? 2
              : 0 as bonus
          ">
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Mobility] + bonus
            }}</span>
          </td>
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Resilience] + bonus
            }}</span>
          </td>
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Recovery] + bonus
            }}</span>
          </td>
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Discipline] + bonus
            }}</span>
          </td>
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Intellect] + bonus
            }}</span>
          </td>
          <td class="item-stat-container">
            <span [class.text-mw]="i.masterworked" class="item-stat-value">{{
              i.stats[ArmorStat.Strength] + bonus
            }}</span>
          </td>
        </ng-container>
        <td class="icon-column">
          <!-- Item Icon -->
          <div [itemTooltip]="i" class="item-icon-container">
            <app-item-icon
              [itemHash]="i.hash"
              [masterworked]="i.masterworked"
              [source]="i.source"
              class="item-icon">
            </app-item-icon>
          </div>
        </td>
        <td class="icon-column">
          <div style="position: relative; width: 25px">
            <app-armor-perk-icon [perk]="i.perk || 0"></app-armor-perk-icon>
          </div>
        </td>
        <!-- Disable -->
        <td class="icon-column">
          <button
            (click)="disableItem(i.itemInstanceId)"
            class="item-info-menu-btn"
            mat-icon-button
            matTooltip="Disable this item from the results. It will not be used to generate results anymore, but you can always undo this.">
            <mat-icon>block</mat-icon>
          </button>
        </td>
        <!-- Moving to inventory -->
        <td *ngIf="i.transferState === 1 || i.transferState === 2" class="icon-column">
          <mat-progress-spinner
            class="item-loading-spinner"
            color="primary"
            diameter="22"
            mode="indeterminate">
          </mat-progress-spinner>
        </td>
        <td *ngIf="i.transferState === 3">
          <mat-icon
            #tooltip="matTooltip"
            aria-hidden="false"
            aria-label="Success"
            class="item-moved-icon"
            inline
            matTooltip="Item successfully moved to inventory.">
            check_circle_outline
          </mat-icon>
        </td>
        <td *ngIf="i.transferState === 4">
          <mat-icon
            #tooltip="matTooltip"
            aria-hidden="false"
            aria-label="Error"
            class="report-problem-icon"
            inline
            matTooltip="This item could not be moved. Make sure that there is enough space on your character. This tool will not move items out of your inventory.">
            error_outline
          </mat-icon>
        </td>
        <!-- // Moving to inventory -->
        <td *ngIf="i.mayBeBugged">
          <mat-icon
            #tooltip="matTooltip"
            aria-hidden="false"
            aria-label="Error"
            class="report-problem-icon"
            inline
            matTooltip="The stats of this item may be incorrect. Make sure that you remove every positive or negative stat modifier from this item.">
            report_problem
          </mat-icon>
        </td>
      </tr>
    </ng-container>
    <!-- Class Item -->
    <tr *ngIf="showGenericClassItemRow && config_assumeClassItemMasterworked">
      <td #tooltip="matTooltip" class="item-name-mw" matTooltip="Class item should be masterworked."
        >Any Class Item</td
      >
      <td class="text-mw">{{ 2 }}</td>
      <td class="text-mw">{{ 2 }}</td>
      <td class="text-mw">{{ 2 }}</td>
      <td class="text-mw">{{ 2 }}</td>
      <td class="text-mw">{{ 2 }}</td>
      <td class="text-mw">{{ 2 }}</td>
      <td></td>
      <td>
        <div style="position: relative; width: 25px">
          <app-armor-perk-icon [perk]="element?.classItem?.perk || 0"></app-armor-perk-icon>
        </div>
      </td>
      <td>
        <button
          (click)="disableAllItems()"
          class="item-info-menu-btn report-problem-icon"
          mat-icon-button
          matTooltip="Disable all four items above from the results. They will not be used to generate results anymore, but you can always undo this.">
          <mat-icon>block</mat-icon>
        </button>
      </td>
    </tr>
    <tr *ngIf="showGenericClassItemRow && !config_assumeClassItemMasterworked">
      <td>Any Class Item</td>
      <td class="text-centered" colspan="6">You chose to use non-masterworked class items.</td>
      <td></td>
      <td></td>
      <td>
        <button
          (click)="disableAllItems()"
          class="item-info-menu-btn report-problem-icon"
          mat-icon-button
          matTooltip="Disable all four items above from the results. They will not be used to generate results anymore, but you can always undo this.">
          <mat-icon>block</mat-icon>
        </button>
      </td>
    </tr>
    <!--Sum line without mods-->
    <tr *ngVar="element?.statsNoMods as stats" class="result-total-gear result-total highlight-row">
      <td>Total (armor)</td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Mobility] }}
        <img
          alt="Mobility"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/e26e0e93a9daf4fdd21bf64eb9246340.png" />
      </td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Resilience] }}
        <img
          alt="Resilience"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/202ecc1c6febeb6b97dafc856e863140.png" />
      </td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Recovery] }}
        <img
          alt="Recovery"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/128eee4ee7fc127851ab32eac6ca91cf.png" />
      </td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Discipline] }}
        <img
          alt="Discipline"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/79be2d4adef6a19203f7385e5c63b45b.png" />
      </td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Intellect] }}
        <img
          alt="Intellect"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/d1c154469670e9a592c9d4cbdcae5764.png" />
      </td>
      <td *ngIf="!!stats">
        {{ stats[ArmorStat.Strength] }}
        <img
          alt="Strength"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/ea5af04ccd6a3470a44fd7bb0f66e2f7.png" />
      </td>
    </tr>
    <!-- Config Mods -->
    <tr class="result-config">
      <td>Configuration</td>
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Mobility] !== 0"
          [class]="this.configValues[ArmorStat.Mobility] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Mobility] > 0">+</span
          >{{ this.configValues[ArmorStat.Mobility] }}
        </span></td
      >
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Resilience] !== 0"
          [class]="this.configValues[ArmorStat.Resilience] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Resilience] > 0">+</span
          >{{ this.configValues[ArmorStat.Resilience] }}
        </span></td
      >
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Recovery] !== 0"
          [class]="this.configValues[ArmorStat.Recovery] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Recovery] > 0">+</span
          >{{ this.configValues[ArmorStat.Recovery] }}
        </span></td
      >
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Discipline] !== 0"
          [class]="this.configValues[ArmorStat.Discipline] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Discipline] > 0">+</span
          >{{ this.configValues[ArmorStat.Discipline] }}
        </span></td
      >
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Intellect] !== 0"
          [class]="this.configValues[ArmorStat.Intellect] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Intellect] > 0">+</span
          >{{ this.configValues[ArmorStat.Intellect] }}
        </span></td
      >
      <td
        ><span
          *ngIf="this.configValues[ArmorStat.Strength] !== 0"
          [class]="this.configValues[ArmorStat.Strength] > 0 ? 'positive' : 'negative'">
          <span *ngIf="this.configValues[ArmorStat.Strength] > 0">+</span
          >{{ this.configValues[ArmorStat.Strength] }}
        </span></td
      >
    </tr>
    <!-- +5 Mods -->
    <tr *ngVar="element?.mods as mods" class="highlight-row">
      <td>Minor Mods</td>
      <td *ngVar="mods | count : StatModifier.MINOR_MOBILITY as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MINOR_RESILIENCE as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MINOR_RECOVERY as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MINOR_DISCIPLINE as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MINOR_INTELLECT as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MINOR_STRENGTH as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×5</span>
      </td>
    </tr>
    <!-- +10 Mods -->
    <tr *ngVar="element?.mods as mods">
      <td>Major Mods</td>
      <td *ngVar="mods | count : StatModifier.MAJOR_MOBILITY as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MAJOR_RESILIENCE as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MAJOR_RECOVERY as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MAJOR_DISCIPLINE as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MAJOR_INTELLECT as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
      <td *ngVar="mods | count : StatModifier.MAJOR_STRENGTH as count">
        <span *ngIf="count > 0" class="positive">{{ count }}×10</span>
      </td>
    </tr>
    <ng-container *ngVar="element?.artifice as mods">
      <tr>
        <td>Artifice Mods</td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_MOBILITY as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_RESILIENCE as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_RECOVERY as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_DISCIPLINE as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_INTELLECT as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
        <td *ngVar="mods | count : StatModifier.ARTIFICE_STRENGTH as count">
          <span *ngIf="count > 0" class="positive">{{ count }}×3</span>
        </td>
      </tr>
    </ng-container>

    <!-- Final sum line -->
    <tr *ngVar="element?.stats as stats" class="result-total-all result-total highlight-row">
      <td>Total</td>
      <td>
        {{ stats[ArmorStat.Mobility] }}
        <img
          alt="Mobility"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/e26e0e93a9daf4fdd21bf64eb9246340.png" />
      </td>
      <td>
        {{ stats[ArmorStat.Resilience] }}
        <img
          alt="Resilience"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/202ecc1c6febeb6b97dafc856e863140.png" />
      </td>
      <td>
        {{ stats[ArmorStat.Recovery] }}
        <img
          alt="Recovery"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/128eee4ee7fc127851ab32eac6ca91cf.png" />
      </td>
      <td>
        {{ stats[ArmorStat.Discipline] }}
        <img
          alt="Discipline"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/79be2d4adef6a19203f7385e5c63b45b.png" />
      </td>
      <td>
        {{ stats[ArmorStat.Intellect] }}
        <img
          alt="Intellect"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/d1c154469670e9a592c9d4cbdcae5764.png" />
      </td>
      <td>
        {{ stats[ArmorStat.Strength] }}
        <img
          alt="Strength"
          class="statIcon"
          src="https://www.bungie.net/common/destiny2_content/icons/ea5af04ccd6a3470a44fd7bb0f66e2f7.png" />
      </td>
    </tr>
  </table>
</div>
<ng-container *ngVar="calculateRequiredMasterworkCost() as cost">
  <div *ngIf="cost['total'] > 0" style="margin-top: 10px">
    Total material cost:
    <span *ngIf="cost['glimmer'] > 0" class="currency-icon-container" matTooltip="Glimmer">
      <img
        alt="Glimmer"
        class="currency-icon"
        src="https://www.bungie.net/common/destiny2_content/icons/88993eaeedad32f42072df6f77f47311.png" />
      {{ cost["glimmer"] | number }}
    </span>

    <span *ngIf="cost['core'] > 0" class="currency-icon-container" matTooltip="Enhancement Cores">
      <img
        alt="Enhancement Cores"
        class="currency-icon"
        src="https://www.bungie.net/common/destiny2_content/icons/0a4eb695ed55b4e720ddc401460cc0f9.jpg" />
      {{ cost["core"] }}
    </span>

    <span *ngIf="cost['prism'] > 0" class="currency-icon-container" matTooltip="Enhancement Prism">
      <img
        alt="Enhancement Prism"
        class="currency-icon"
        src="https://www.bungie.net/common/destiny2_content/icons/dea2a35badf7466d4c2c2697ce6e8d87.jpg" />
      {{ cost["prism"] }}
    </span>

    <span *ngIf="cost['ascshard'] > 0" class="currency-icon-container" matTooltip="Ascendant Shard">
      <img
        alt="Ascendant Shard"
        class="currency-icon"
        src="https://www.bungie.net/common/destiny2_content/icons/0271d214fc3ec91b3def799a4b286b46.jpg" />
      {{ cost["ascshard"] }}
    </span>
  </div>
</ng-container>

<div class="buttonContainer">
  <ng-container *ngVar="buildItemIdString(element) as text">
    <button
      (click)="openSnackBar('Copied the DIM search query to your clipboard.')"
      [cdkCopyToClipboard]="text"
      color="primary"
      mat-raised-button
      matTooltip="Use this button to copy a DIM search query to your clip board. It allows you to search the given items in DIM.">
      Copy DIM query to clipboard
    </button>
  </ng-container>
  <button
    (click)="goToDIM()"
    color="primary"
    mat-raised-button
    matTooltip="Use this button to open this build as a DIM Loadout.">
    Open Loadout in DIM
  </button>
  <br />
  <small>The following two buttons may not work for some at the moment:</small><br />
  <button
    (click)="moveItems()"
    mat-stroked-button
    matTooltip="Click this button to move Items to your inventory. Make sure that you have enough space in your inventory. This tool will not move any items out of your inventory.">
    Move items to inventory (beta)
  </button>
  <button
    (click)="moveItems(true)"
    mat-stroked-button
    matTooltip="Click this button to equip the Items. Make sure that you have enough space in your inventory. This tool will not move any items out of your inventory.">
    Equip Items (beta)
  </button>
</div>

<mat-accordion>
  <mat-expansion-panel class="mat-elevation-z6">
    <mat-expansion-panel-header>
      <mat-panel-title> What to do now? </mat-panel-title>
      <mat-panel-description>
        Detailed Instructions of to get your loadout ready.
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div>
      <ol>
        <li>
          Move all related items into your inventory
          <span *ngIf="config_assumeClassItemMasterworked"> and use a masterworked class item</span
          >.
        </li>
        <!-- Masterwork and elements -->
        <ng-container *ngVar="getItemsThatMustBeMasterworked() as mwItems">
          <li *ngIf="mwItems.length > 0">
            Masterwork these items:
            <ul>
              <li *ngFor="let item1 of mwItems">
                {{ item1.name }}
              </li>
            </ul>
          </li>
        </ng-container>

        <!-- Mods -->
        <li
          *ngIf="
            $any(element?.mods).length > 0 && ($any(element?.mods) | count : StatModifier.NONE) < 5
          "
          >Equip the following stat mods:
          <ul *ngVar="element?.mods as mods">
            <!-- MOBILITY -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_MOBILITY as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_MOBILITY as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Mobility Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /MOBILITY -->
            <!-- RESILIENCE -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_RESILIENCE as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_RESILIENCE as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Resilience Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /RESILIENCE -->
            <!-- RECOVERY -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_RECOVERY as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_RECOVERY as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Recovery Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /RECOVERY -->
            <!-- DISCIPLINE -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_DISCIPLINE as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_DISCIPLINE as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Discipline Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /DISCIPLINE -->
            <!-- INTELLECT -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_INTELLECT as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_INTELLECT as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Intellect Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /INTELLECT -->
            <!-- STRENGTH -->
            <ng-container *ngVar="mods | count : StatModifier.MINOR_STRENGTH as minorCount">
              <ng-container *ngVar="mods | count : StatModifier.MAJOR_STRENGTH as majorCount">
                <li *ngIf="minorCount + majorCount > 0" class="positive">
                  <span *ngIf="minorCount > 0">{{ minorCount }} minor</span>
                  <ng-container *ngIf="minorCount > 0 && majorCount > 0"> and</ng-container>
                  <span *ngIf="majorCount > 0"> {{ majorCount }} major </span>
                  Strength Mod<ng-container *ngIf="minorCount + majorCount > 1">s</ng-container>
                </li>
              </ng-container>
            </ng-container>
            <!-- /STRENGTH -->
          </ul>
        </li>
        <li *ngIf="config_enabledMods.length > 0">
          Equip any mods and fragments that you enabled in the configuration:
          <ul>
            <ng-container *ngFor="let mod of config_enabledMods">
              <ng-container *ngVar="ModInformation[mod] as info">
                <li *ngIf="info.type === ModifierType.CombatStyleMod">
                  Equip the mod {{ info.name }}
                </li>
              </ng-container>
            </ng-container>
            <ng-container *ngFor="let mod of config_enabledMods">
              <ng-container *ngVar="ModInformation[mod] as info">
                <li *ngIf="info.type === ModifierType.Stasis">
                  Equip the stasis fragment {{ info.name }}
                </li>
              </ng-container>
            </ng-container>
          </ul>
        </li>
      </ol>
    </div>
  </mat-expansion-panel>
  <mat-expansion-panel class="mat-elevation-z6">
    <mat-expansion-panel-header>
      <mat-panel-title> Stat overview </mat-panel-title>
      <mat-panel-description>
        Shows a summary of all the stats and where they come from.
      </mat-panel-description>
    </mat-expansion-panel-header>
    <table class="stat-preview">
      <tr>
        <td colspan="2">Stat</td>
        <td class="tier-column">1</td>
        <td class="tier-column">2</td>
        <td class="tier-column">3</td>
        <td class="tier-column">4</td>
        <td class="tier-column">5</td>
        <td class="tier-column">6</td>
        <td class="tier-column">7</td>
        <td class="tier-column">8</td>
        <td class="tier-column">9</td>
        <td class="tier-column">10</td>
        <td>Tiers</td>
      </tr>
      <tr *ngFor="let statId of armorStatIds">
        <td>{{ ArmorStatNames[statId] }}</td>
        <td>
          <img
            alt="{{ ArmorStatNames[statId] }}"
            src="{{ ArmorStatIconUrls[statId] }}"
            style="height: 18px" />
        </td>
        <td *ngFor="let d of getColumnForStat(statId)">
          <div *ngIf="!!d" [class]="d" class="energy-bar"></div>
        </td>
        <td class="sum-tiers">{{ getTiersForStat(statId) }}</td>
      </tr>
      <tr class="legend">
        <td colspan="2">Armor</td>
        <td>
          <div class="energy-bar normal"></div>
        </td>
        <td colspan="3">Stat Mod</td>
        <td>
          <div class="energy-bar mod"></div>
        </td>
        <td colspan="4">Fragments & Mods</td>
        <td>
          <div class="energy-bar config"></div>
        </td>
      </tr>
      <ng-container *ngVar="element?.exotic as exotic">
        <tr *ngIf="exotic[0]">
          <td>Exotic:</td>
          <td colspan="10">{{ exotic[0].name }}</td>
          <td colspan="1">
            <div class="item-icon-container">
              <img class="item-icon" src="https://bungie.net/{{ exotic[0].icon }}" />
              <img class="item-icon-overlay" src="https://bungie.net/{{ exotic[0].watermark }}" />
            </div>
          </td>
        </tr>
      </ng-container>
    </table>
  </mat-expansion-panel>
</mat-accordion>
<br />
<br />
