<div class="title">{{ weapon?.name }}</div>

<div class="subheading left">{{ "weapons.attack" | translate }}</div>

<div class="flex-row">
  <div class="label">{{ "general.modifier" | translate }}:</div>
  <span>{{ weapon?.attackBonus }}</span>
</div>

<!-- Singel Damage -->
@if (!weapon?.isVersatile) {
  <div class="flex-row">
    <div class="label">{{ "weapons.header.damage" | translate }}:</div>
    @for (damage of weapon?.damage; let index = $index; track damage) {
      {{ damage.diceNumber }} {{ "general.dice" | translate
      }}{{ damage.diceType }} &nbsp;
      @if (index === 0 && damageModifier !== "0") {
        <span> {{ damageModifier }} &nbsp; </span>
      }
      {{ ("damageTypes." | translate) + damage.damageType | translate }}
    }
  </div>
}

<!-- Versatility Damage -->
@if (weapon?.isVersatile) {
  <div class="label">
    {{ "weapons.single" | translate }}:
    @for (damage of weapon?.damage; track damage) {
      <div>
        {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
      </div>
    }

    {{ "weapons.dual" | translate }}:
    @for (damage of weapon?.damage; track damage; let index = $index) {
      <div>
        {{ damage.diceNumber }}
        @if (index === 0) {
          <span>{{ weapon?.versatileDamage }}</span>
        }
        @if (index !== 0) {
          <span>{{ damage.diceType }}</span>
        }
        {{ damage.damageType }}
      </div>
    }
  </div>
}

<!-- Magical -->

<div class="subheading left">{{ "general.property" | translate }}</div>
<div class="weapon-properties">
  @if (weapon?.proficient) {
    <span>{{ "weapons.proficient" | translate }} </span>
  }
  @if (weapon?.isRanged) {
    <span>{{ "weapons.ranged" | translate }} </span>
  }
  @if (weapon?.isVersatile) {
    <span>{{ "weapons.versatile" | translate }} </span>
  }
  @if (weapon?.isTwoHanded) {
    <span>{{ "weapons.twoHanded" | translate }} </span>
  }
  @if (weapon?.isFinesse) {
    <span>{{ "weapons.finesse" | translate }} </span>
  }
  @if (weapon?.canBeThrown) {
    <span>{{ "weapons.throwable" | translate }} </span>
  }
  @if (weapon?.isMagical) {
    <span>{{ "weapons.magical" | translate }} </span>
  }
</div>

@if (weapon?.isRanged || weapon?.canBeThrown) {
  <div class="subheading left">{{ "weapons.range" | translate }}</div>

  <!-- Ranged -->
  @if (weapon?.isRanged) {
    <div>
      {{ "weapons.range" | translate }}:
      {{ weapon?.range }}
    </div>
  }

  <!-- Thrown -->
  @if (weapon?.canBeThrown) {
    <div>
      {{ "weapons.throwRange" | translate }}:
      {{ weapon?.throwRange }}
    </div>
  }
}

<!-- Description -->
@if (weapon?.description != "") {
  <div class="subheading left">{{ "general.description" | translate }}</div>
  <p class="content" [innerHTML]="weapon?.description"></p>
}
<div class="vertical-buttons bottom">
  <ui-button
    [color]="'green'"
    [type]="'edit'"
    [width]="'w20'"
    (click)="close('update')"
  >
    Anpassen
  </ui-button>
  <ui-button
    [color]="'red'"
    [type]="'delete'"
    [width]="'w20'"
    (click)="close('delete')"
  >
    Löschen
  </ui-button>
</div>
