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

<!-- DESCRIPTION -->
<div class="title">{{ "conditions.label" | translate }}</div>

<div class="content">
  {{ "conditions.description" | translate }}
</div>

<div class="condition-handling">
  <!-- CURRENTLY ACTIVE CONDITIONS -->
  <div>
    <div class="heading left t-0 b-075">
      {{ "conditions.currentConditions" | translate }}
    </div>
    <mat-accordion>
      @for (condition of conditions; let index = $index; track condition) {
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>{{
              "conditions." + condition | translate
            }}</mat-panel-title>
          </mat-expansion-panel-header>
          <ul>
            @for (
              description of "conditions.conditionDescriptions." + condition
                | translate;
              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">
          {{ "conditions.noConditions" | translate }}
        </div>
      }
    </mat-accordion>
  </div>

  <!-- ADD CONDITIONS -->
  <div class="heading left">{{ "conditions.addCondition" | translate }}</div>

  <div>
    <mat-form-field appearance="outline" class="t-075">
      <mat-label>{{ "conditions.label" | translate }}</mat-label>
      <mat-select [(ngModel)]="currentCondition">
        @for (condition of notUsedConditions(); track condition) {
          <mat-option [value]="condition">{{
            "conditions." + condition | translate
          }}</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 "conditions.conditionDescriptions." +
              currentCondition | translate;
            track description
          ) {
            <li>{{ description }}</li>
          }
        </ul>
      </div>
    }
  </div>
</div>

<!-- NAVIGATION BUTTONS -->
<div class="vertical-buttons bottom">
  <ui-button
    [color]="'green'"
    [type]="'edit'"
    [width]="'w20'"
    (click)="close('update')"
  >
  </ui-button>
  <ui-button
    [color]="'red'"
    [type]="'delete'"
    [width]="'w20'"
    (click)="close('cancel')"
  >
  </ui-button>
</div>