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

<div class="details-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="current-status-container">
  @for (condition of conditions; let index = $index; track condition ) {
  <div class="condition-row">
    <div class="condition">
      <button class="accordion" (click)="toggleAcordion($event)">
        {{ condition }}
      </button>
      <div class="panel">
        @for(description of conditionDescriptions[condition]; track
        description){
        <div class="status-item-description">{{ description }}</div>
        }
      </div>
    </div>

    <button class="status-item-remove" (click)="removeCondition(index)">
      X
    </button>
  </div>
  } @empty {
  <div class="empty-list">keine Zustände</div>
  }
</div>

<div class="details-subheading centered">Zustand hinzufügen</div>
<div class="condition-selection">
  <select [(ngModel)]="currentCondition">
    <option *ngFor="let status of notUsedConditions()" [value]="status">
      {{ status }}
    </option>
  </select>
  <button (click)="addCondition()">hinzufügen</button>
</div>

@if (currentCondition !== ''){
<div class="description-container">
  @for(description of conditionDescriptions[currentCondition]; track
  description){
  <div class="status-item-description">{{ description }}</div>
  }
</div>
}

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