DNDTools/src/app/journal/spell-modal/spell-modal.component.html

<div class="modal-dimensions">
  <h2 style="text-align: center">
    @if(isUpdate){Zauber anpassen}@else{Zauber 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">
      <!-- general -->
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="needsVerbal" />
        <label>Verbal</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="needsSomatic" />
        <label>Geste</label>
      </div>
      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="needsMaterial" />
        <label>Material</label>
      </div>

      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="needsConcentration" />
        <label>Konzentration</label>
      </div>

      <div class="checkbox-element">
        <select [(ngModel)]="cost">
          <option *ngFor="let cost of costs" [value]="cost.value">
            {{ cost.display }}
          </option>
        </select>
        <label>Kosten</label>
      </div>

      <div class="checkbox-element">
        <input type="checkbox" [(ngModel)]="canRitual" />
        <label>Ritual möglich?</label>
      </div>

      <div class="checkbox-element">
        <select [(ngModel)]="level">
          <option
            *ngFor="let level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            [value]="level"
          >
            @if(level == 0){Zaubertrick}@else{ {{ level }}}
          </option>
        </select>
        <label>Stufe</label>
      </div>

      <div class="checkbox-element">
        <select [(ngModel)]="school">
          <option *ngFor="let school of schools" [value]="school.value">
            {{ school.display }}
          </option>
        </select>
        <label>Schule</label>
      </div>
    </div>

    <!-- ranged and area -->
    <h3 style="text-align: center">Reichweite und Fläche</h3>

    <div class="range-area-container">
      <div class="range-box">
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="isRanged" />
          <label>Fernkampf</label>
        </div>
        <div class="checkbox-element" *ngIf="isRanged">
          <input type="text" [(ngModel)]="range" />
          <label>Reichweite</label>
        </div>
      </div>

      <div class="area-box">
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="hasAreaOfEffect" />
          <label>Flächeneffekt</label>
        </div>
        <div class="input-element" *ngIf="hasAreaOfEffect">
          <input type="text" class="add-input" [(ngModel)]="radius" />
          <label>Radius</label>
        </div>
        <div class="checkbox-element" *ngIf="hasAreaOfEffect">
          <select [(ngModel)]="areaOfEffectType">
            <option *ngFor="let areaType of areaTypes" [value]="areaType.value">
              {{ areaType.display }}
            </option>
          </select>
          <label>Flächenart</label>
        </div>
      </div>
    </div>

    <div style="display: flex">
      <div>
        <input type="checkbox" [(ngModel)]="doesDamage" />
        <label>Schaden?</label>
      </div>

      <div>
        <input type="checkbox" [(ngModel)]="doesHeal" />
        <label>Heilung?</label>
      </div>

      <div>
        <input type="checkbox" [(ngModel)]="needsSavingThrow" />
        <label>Rettungswurf?</label>
      </div>

      <div>
        <input type="checkbox" [(ngModel)]="needsAttackRoll" />
        <label>Angriff?</label>
      </div>
    </div>

    <ng-container
      *ngIf="needsSavingThrow"
      [ngTemplateOutlet]="attackTabContent"
    ></ng-container>

    <ng-container
      *ngIf="doesDamage"
      [ngTemplateOutlet]="damageTabContent"
    ></ng-container>

    <ng-container
      *ngIf="doesHeal"
      [ngTemplateOutlet]="healTabContent"
    ></ng-container>

    <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container>

    <!-- Button section -->
    <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>
<!-- </ngx-smart-modal> -->

<!-- templates -->

<ng-template #attackTabContent>
  <div>
    <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
      <option
        *ngFor="let attribute of savingThrowAttributes"
        [value]="attribute.value"
      >
        {{ attribute.display }}
      </option>
    </select>
    <label *ngIf="needsSavingThrow">Attribut</label>
  </div>
</ng-template>

<ng-template #damageTabContent>
  <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>

      <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>
</ng-template>

<ng-template #healTabContent>
  <div class="heal-container">
    <div class="dice-row">
      <div class="flex-column">
        <label>Anzahl</label>
        <select [(ngModel)]="heal.diceNumber">
          <option *ngFor="let number of numbers" [value]="number">
            {{ number }}
          </option>
        </select>
      </div>

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

<ng-template #descriptionTabContent>
  <textarea style="height: 10rem" [(ngModel)]="description"></textarea>
</ng-template>