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

<div class="property-title">Angriff</div>

<div>Angriffsmodifikator:</div>
{{ weapon?.attackBonus }}

<!-- Singel Damage -->
<div *ngIf="!weapon?.isVersatile">
  Schaden:
  <div *ngFor="let damage of weapon?.damage; let index = index">
    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
    <span *ngIf="index === 0 && damageModifier !== '0'">
      {{ damageModifier }}
    </span>
  </div>
</div>

<!-- Versatility Damage -->
<div *ngIf="weapon?.isVersatile">
  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>

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

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

<!-- Magical -->

<div *ngIf="weapon?.isMagical">
  Magischer Modifikator:
  {{ weapon?.magicBonus }}
</div>

<!-- Weight -->
<div>
  Gewicht:
  {{ weapon?.weight }}
</div>

<div class="property-title">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>

<!-- Description -->
<div class="property-title">Beschreibung</div>
<div class="weapon-description">
  <!-- TODO: realize -->
  bla
</div>

<div class="vertical-button-wrapper-3">
  <ui-button
    [type]="'edit'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('update')"
  ></ui-button>
  <ui-button
    [type]="'delete'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('delete')"
  ></ui-button>
  <ui-button
    [type]="'cancel'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('cancel')"
  ></ui-button>
</div>
