DNDTools/src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

<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;
      <span *ngIf="index === 0 && damageModifier !== '0'">
        {{ damageModifier }} &nbsp;
      </span>
      {{ ("damageTypes." | translate) + damage.damageType | translate }}
    }
  </div>
}

<!-- Versatility Damage -->
<div *ngIf="weapon?.isVersatile" class="label">
  {{ "weapons.single" | translate }}:
  <div *ngFor="let damage of weapon?.damage">
    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
  </div>

  {{ "weapons.dual" | translate }}:
  <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">{{ "general.property" | translate }}</div>
<div class="weapon-properties">
  <span *ngIf="weapon?.proficient"
    >{{ "weapons.proficient" | translate }}
  </span>
  <span *ngIf="weapon?.isRanged">{{ "weapons.ranged" | translate }} </span>
  <span *ngIf="weapon?.isVersatile"
    >{{ "weapons.versatile" | translate }}
  </span>
  <span *ngIf="weapon?.isTwoHanded"
    >{{ "weapons.twoHanded" | translate }}
  </span>
  <span *ngIf="weapon?.isFinesse">{{ "weapons.finesse" | translate }} </span>
  <span *ngIf="weapon?.canBeThrown"
    >{{ "weapons.throwable" | translate }}
  </span>
  <span *ngIf="weapon?.isMagical">{{ "weapons.magical" | translate }} </span>
</div>

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

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

  <!-- Thrown -->
  <div *ngIf="weapon?.canBeThrown">
    {{ "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>