<!--
  ~ 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 class="perk-icon-col" rowspan="2">
          <img
            *ngIf="exoticPerk"
            alt="{{ exoticPerk.name }}"
            class="perk-icon"
            src="https://bungie.net/{{ exoticPerk.icon }}" />
        </td>
        <td class="exotic-name">{{ armor?.name }}</td>
      </tr>
      <tr *ngIf="!exoticPerk && !exoticPerkNotThere">
        <td>Loading exotic perk..</td>
      </tr>
      <tr *ngIf="!exoticPerk && exoticPerkNotThere">
        <td>No (fixed) exotic perk available.</td>
      </tr>
      <tr *ngIf="exoticPerk">
        <td>
          <span>{{ exoticPerk.name }}</span>
        </td>
      </tr>
      <tr *ngIf="exoticPerk">
        <td colspan="2">
          {{ exoticPerk.description }}
        </td>
      </tr>

      <tr *ngIf="collection || vendor" class="collection-roll-info">
        <td colspan="2">
          This exotic is not in your inventory but it is
          <ng-container *ngIf="collection">
            in your collection
            <ng-container *ngIf="vendor"> and </ng-container>
          </ng-container>
          <ng-container *ngIf="vendor">available at a vendor</ng-container>. You can still generate
          a loadout with this exotic, but you will have to grab it by yourself.
        </td>
      </tr>
    </table>
  </div>
</div>
