<div class="weapons-box">
  <div class="heading-list">
    <div>{{ "weapons.header.type" | translate }}</div>
    <div>{{ "weapons.header.name" | translate }}</div>
    <div>{{ "weapons.header.bonus" | translate }}</div>
    <div>{{ "weapons.header.damage" | translate }}</div>
    <div>{{ "weapons.header.range" | translate }}</div>
  </div>
  <div
    id="weapons-table"
    cdkDropList
    class="item-list table-content"
    (cdkDropListDropped)="dropWeapons($event)"
  >
    @for (weapon of weapons; let index = $index; track weapon) {
      <div class="item" cdkDrag (click)="openDetailsPanel(index)">
        <!--  Range Icon -->
        <ng-container
          [ngTemplateOutlet]="distanceIconTemplate"
          [ngTemplateOutletContext]="{ weapon: weapon }"
        ></ng-container>
        <div class="vertical-line"></div>
        <ng-container
          [ngTemplateOutlet]="weaponNameTemplate"
          [ngTemplateOutletContext]="{ weapon: weapon }"
        ></ng-container>
        <div class="vertical-line"></div>
        <ng-container
          [ngTemplateOutlet]="weaponAttackTemplate"
          [ngTemplateOutletContext]="{ weapon: weapon }"
        ></ng-container>
        <div class="vertical-line"></div>
        <ng-container
          [ngTemplateOutlet]="weaponDamageTemplate"
          [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
        ></ng-container>
        <div class="vertical-line"></div>
        <ng-container
          [ngTemplateOutlet]="weaponRangeTemplate"
          [ngTemplateOutletContext]="{ weapon: weapon }"
        ></ng-container>
      </div>
    } @empty {
      <div
        style="
          text-align: center;
          margin-top: 3rem;
          font-size: 1.25rem;
          font-weight: 500;
        "
      >
        {{ "weapons.noWeapons" | translate }}
      </div>
    }
  </div>
  <div class="footer">
    <ui-button
      [color]="'green'"
      [type]="'add'"
      style="width: 80%"
      (click)="openModal(false)"
    >
      Hinzufügen
    </ui-button>
  </div>
</div>

<!-- Templates -->

<!-- Distance Icons -->
<ng-template #distanceIconTemplate let-weapon="weapon">
  <icon
    [size]="'s'"
    [type]="'weapon'"
    [icon]="weapon.isRanged ? 'ranged' : 'meele'"
  ></icon>
</ng-template>

<!-- Name -->
<ng-template #weaponNameTemplate let-weapon="weapon">
  <div class="bold">{{ weapon.name }}</div>
</ng-template>

<!-- Attack Bonus -->
<ng-template #weaponAttackTemplate let-weapon="weapon">
  <div class="weapon-attack-bonus">{{ weapon.attackBonus }}</div>
</ng-template>

<!-- Damage -->
<ng-template #weaponDamageTemplate let-weapon="weapon" let-index="index">
  <div class="damage-list">
    @for (damage of weapon.damage; track damage; let damageIndex = $index) {
      <div class="damage-row">
        <span
          >{{ damage.diceNumber }} {{ "general.dice" | translate
          }}{{ damage.diceType }}</span
        >
        @if (weapon.isVersatile && damageIndex === 0) {
          <span
            >({{ "general.dice" | translate
            }}{{ weapon.versatileDamage }})</span
          >
        }
        @if (damageIndex === 0 && damageModifiers[index] !== "0") {
          <span>
            {{ damageModifiers[index] }}
          </span>
        }
        <span style="margin-left: 0.125rem">
          <icon
            [size]="'xs'"
            [type]="'damage'"
            [icon]="damage.damageType"
          ></icon>
        </span>
      </div>
    }
  </div>
</ng-template>

<!-- Range -->
<ng-template #weaponRangeTemplate let-weapon="weapon">
  @if (weapon.isRanged) {
    <div class="weapon-range">
      {{ weapon.range[0] }}/{{ weapon.range[1] }} ft.
    </div>
  } @else {
    {{ "weapons.meele" | translate }}
  }
</ng-template>
