DNDTools/src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.html

<!-- DESCRIPTION -->
<div class="title">Zustände</div>

<div class="content">
  Zustände ändern die Fähigkeiten einer Kreatur auf verschiedene Arten und
  können die Folgen von Zaubern, Klassenmerkmalen, Monsterangriffen oder anderen
  Fähigkeiten sein. Der Zustand hält solange an, bis er aufgehoben wird, oder
  wie seine Wirkungsdauer ist.
</div>

<div class="condition-handling">
  <!-- CURRENTLY ACTIVE CONDITIONS -->
  <div>
    <div class="heading left t-0 b-075">Momentane Zustäne</div>
    <mat-accordion>
      @for (condition of conditions; let index = $index; track condition ) {
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>{{ condition }}</mat-panel-title>
        </mat-expansion-panel-header>
        <ul>
          @for(description of conditionDescriptions[condition]; track
          description){
          <li>{{ description }}</li>
          }
        </ul>
        <icon-button
          [icon]="'delete'"
          style="margin: auto"
          (click)="removeCondition(index)"
        ></icon-button>
      </mat-expansion-panel>
      } @empty {
      <div class="empty-list">keine Zustände</div>
      }
    </mat-accordion>
  </div>

  <!-- ADD CONDITIONS -->
  <div class="heading left">Zustand hinzufügen</div>

  <div>
    <mat-form-field appearance="outline" class="t-075">
      <mat-label>Zustand</mat-label>
      <mat-select [(ngModel)]="currentCondition">
        @for (condition of notUsedConditions(); track condition) {
        <mat-option [value]="condition">{{ condition }}</mat-option
        >}
      </mat-select>
    </mat-form-field>
    @if(currentCondition !== '') {
    <icon-button
      style="display: inline; margin-left: 0.25rem"
      [icon]="'add'"
      (click)="addCondition()"
    ></icon-button>

    <div>
      <ul>
        @for(description of conditionDescriptions[currentCondition]; track
        description){
        <li>{{ description }}</li>
        }
      </ul>
    </div>
    }
  </div>
</div>

<!-- NAVIGATION BUTTONS -->
<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('cancel')">
    Löschen
  </ui-button>
</div>