<!--
  ~ 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>
  <div class="tooltip-container">
    <table>
      <tr>
        <td colspan="3">{{ itemTooltip?.name }}</td>
      </tr>
      <tr>
        <td>Source</td>
        <td colspan="2">{{ getSourceText() }}</td>
      </tr>
      <tr *ngIf="isVendorItem && itemTooltip">
        <td>Vendor</td>
        <td colspan="2">{{
          itemTooltip.itemInstanceId | getVendorIdFromItemId | getVendorName | async
        }}</td>
      </tr>
      <tr>
        <td>Current stats:</td>
      </tr>
      <tr *ngFor="let stat of itemTooltip?.stats; let i = index">
        <td>{{ getArmorStatName(i) }}</td>
        <td>
          <span *ngIf="!itemTooltip?.masterworked">{{ stat }}</span>
          <span *ngIf="itemTooltip?.masterworked">{{ stat + 2 }}</span>
        </td>
        <td>
          <div class="stat-display">
            <div class="stat-display-bar" [style.width]="getWidth(stat)">&nbsp;</div>
            <div
              class="stat-display-bar masterwork"
              [style.width]="getWidth(2)"
              *ngIf="itemTooltip?.masterworked"
              >&nbsp;</div
            >
          </div>
        </td>
      </tr>
      <tr>
        <td>Total base stats:</td>
        <td>
          {{ getTotalStats() }}
        </td>
      </tr>
    </table>
  </div>
</div>
