<div class="condition-container">
  <div class="condition" (click)="openConditionDetails()">
    <div class="condition-list">
      @for (condition of conditions; track condition) {
        <div class="condition-item">
          {{ "conditions." + condition | translate }}
        </div>
      } @empty {
        <div class="empty">-</div>
      }
    </div>
    <div class="condition-label">{{ "conditions.label" | translate }}</div>
  </div>

  <div class="vertical-line"></div>

  <div class="exhaustion" (click)="openExhaustionDetails()">
    <input
      type="number"
      class="info-input"
      style="width: 6rem"
      [(ngModel)]="exhaustion"
      (change)="updateExhaustion()"
      (click)="$event.stopPropagation()"
    />
    <div class="info-label">{{ "exhaustion.label" | translate }}</div>
  </div>
</div>
