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

<div class="subheading left">Angriff</div>

<div class="flex-row">
  <div class="label">Modifikator:</div>
  <span>{{ weapon?.attackBonus }}</span>
</div>

<!-- Singel Damage -->
@if(!weapon?.isVersatile){
<div class="flex-row">
  <div class="label">Schaden:</div>
  @for(damage of weapon?.damage; let index = $index; track damage){
  {{ damage.diceNumber }} {{ damage.diceType }}
  <span *ngIf="index === 0 && damageModifier !== '0'">
    {{ damageModifier }}
  </span>
  {{ damageTranslator[damage.damageType] }}

  }
</div>
}

<!-- Versatility Damage -->
<div *ngIf="weapon?.isVersatile" class="label">
  Einhändiger Schaden:
  <div *ngFor="let damage of weapon?.damage">
    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
  </div>

  Zweihändiger Schaden:
  <div *ngFor="let damage of weapon?.damage; let index = index">
    {{ damage.diceNumber }}
    <span *ngIf="index === 0">{{ weapon?.versatileDamage }}</span>
    <span *ngIf="index !== 0">{{ damage.diceType }}</span>
    {{ damage.damageType }}
  </div>
</div>

<!-- Magical -->

<div class="subheading left">Eigenschaften</div>
<div class="weapon-properties">
  <span *ngIf="weapon?.proficient">Geübt </span>
  <span *ngIf="weapon?.isRanged">Fernkampf </span>
  <span *ngIf="weapon?.isVersatile">Vielseitig </span>
  <span *ngIf="weapon?.isTwoHanded">Zweihändig </span>
  <span *ngIf="weapon?.isFinesse">Finesse </span>
  <span *ngIf="weapon?.canBeThrown">Wurfwaffe </span>
  <span *ngIf="weapon?.isMagical">Magisch </span>
</div>

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

<!-- Ranged -->
<div *ngIf="weapon?.isRanged">
  Reichweite:
  {{ weapon?.range }}
</div>

<!-- Thrown -->
<div *ngIf="weapon?.canBeThrown">
  Wurfweite:
  {{ weapon?.throwRange }}
</div>
}

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