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

<div class="modal-dimensions">
  <h2 style="text-align: center">
    @if(isUpdate){Waffe bearbeiten} @else{Waffe hinzufügen}
  </h2>

  <div class="add-form-group">
    <div class="input-element">
      <label for="weaponName">Name</label>
      <input type="text" class="add-input" id="weaponName" [(ngModel)]="name" />
    </div>
    <div class="form-element-row">
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="proficient" />
        <label for="weaponProficient">Geübt</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="isFinesse" />
        <label for="weaponFinesse">Finesse</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="isVersatile" />
        <label for="Vielseitig">Vielseitig</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="isTwoHanded" />
        <label for="weaponTwoHanded">Zweihändig</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="isRanged" />
        <label for="weaponRanged">Fernkampf</label>
      </div>
      <div class="checkbox-element">
        <select [(ngModel)]="weight">
          <option *ngFor="let weight of weights" [value]="weight">
            {{ weight }}
          </option>
        </select>
        <label>Gewicht</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="canBeThrown" />
        <label for="weaponRanged">Wurfwaffe</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="isMagical" />
        <label>Magisch</label>
      </div>
    </div>

    <div class="input-element">
      <label for="weaponAttackBonus">Angriffsbonus</label>
      <select [(ngModel)]="attackBonus">
        <option *ngFor="let attackBonus of attackBonuses" [value]="attackBonus">
          {{ attackBonus }}
        </option>
      </select>
    </div>

    <div class="input-element" *ngIf="isMagical">
      <label>Magischer Modifikator</label>
      <select [(ngModel)]="magicBonus">
        <option
          *ngFor="let magicBonus of magicBonuses"
          [value]="magicBonus.value"
        >
          {{ magicBonus.display }}
        </option>
      </select>
    </div>

    <div class="input-element" *ngIf="isRanged">
      <label for="weaponRange">Reichweite</label>
      <input
        type="text"
        class="add-input"
        id="weaponRange"
        [(ngModel)]="range"
      />
    </div>

    <div class="input-element" *ngIf="canBeThrown">
      <label for="weaponRange">Wurfreichweite</label>
      <input
        type="text"
        class="add-input"
        id="weaponRange"
        [(ngModel)]="throwRange"
      />
    </div>

    <h3 style="text-align: center">Schaden</h3>

    <div class="damage-container">
      <div class="damage-box" *ngFor="let damage of damage; let index = index">
        <div class="dice-row">
          <div class="flex-column">
            <label>Anzahl</label>
            <select [(ngModel)]="damage.diceNumber">
              <option *ngFor="let number of numbers" [value]="number">
                {{ number }}
              </option>
            </select>
          </div>

          <div class="flex-column">
            <label>Würfel</label>
            <select [(ngModel)]="damage.diceType">
              <option *ngFor="let die of dice" [value]="die">
                {{ die }}
              </option>
            </select>
          </div>
        </div>

        <div *ngIf="isVersatile && index === 0">
          Zweihändiger Schaden
          <div class="flex-row gap-10">
            <div class="flex-column">
              <label>Würfel</label>
              <select [(ngModel)]="versatileDamage">
                <option *ngFor="let die of dice" [value]="die">
                  {{ die }}
                </option>
              </select>
            </div>
          </div>
        </div>

        <label for="damageType">Schadensart</label>
        <select [(ngModel)]="damage.damageType">
          <option *ngFor="let type of damageTypes" [value]="type.value">
            {{ type.display }}
          </option>
        </select>

        <icon
          *ngIf="index > 0"
          (click)="removeDamage(index)"
          [size]="'m'"
          [type]="'UI'"
          [icon]="'remove'"
          [class]="'pointer'"
        ></icon>
      </div>
      <icon
        *ngIf="damage.length < 3"
        (click)="addDamage()"
        [size]="'m'"
        [type]="'UI'"
        [icon]="'add'"
        [class]="'pointer'"
      ></icon>
    </div>

    <div class="button-wrapper-2-block">
      @if(isUpdate){
      <ui-button
        [type]="'update'"
        [size]="'xlarge'"
        [color]="'primary'"
        (click)="update()"
      ></ui-button>
      }@else{
      <ui-button
        *ngIf="!isUpdate"
        [type]="'add'"
        [size]="'xlarge'"
        [color]="'primary'"
        (click)="add()"
      ></ui-button>
      }
      <ui-button
        [type]="'dismiss'"
        [size]="'xlarge'"
        [color]="'primary'"
        (click)="cancel()"
      ></ui-button>
    </div>
  </div>
</div>