DNDTools/src/app/character/character-picker/character-picker.component.html

<div class="header">
  <h1>{{ "picker.label" | translate }}</h1>
</div>
<div class="character-card-container">
  @for (card of [0, 1, 2, 3, 4, 5]; track card) {
    @if (characters[card]) {
      <character-card
        [character]="characters[card].name"
        (select)="selectCharacter(characters[card])"
        (delete)="open(content, card)"
      ></character-card>
      <!-- TODO: Check if there is a more elegant way -->
    } @else if (
      card < 4 ||
      (card === 4 && characters.length === 4) ||
      (card === 5 && (characters.length === 5 || characters.length === 4))
    ) {
      <div class="card-placeholder" (click)="addCharacter()">
        <img
          src="assets/icons/UIIcons/add.svg"
          style="width: 6%"
          alt="Add Button"
        />
      </div>
    }
  }
</div>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">
      {{ "picker.delete" | translate }}
    </h4>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="modal.dismiss('dismiss')"
    ></button>
  </div>
  <div class="modal-body">
    <div
      [innerHTML]="'picker.confirm' | translate: { name: currentCharacter }"
    ></div>
  </div>
  <div class="modal-footer">
    <div class="button-row">
      <button class="delete-button" (click)="modal.dismiss('delete')">
        {{ "buttons.delete" | translate }}
      </button>
    </div>
  </div>
</ng-template>

<ng-template #warning let-warning>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">0.9.2</h4>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="warning.dismiss('dismiss'); acknowledgeWarning()"
    ></button>
  </div>
  <div class="modal-body">
    <h5>
      {{ "picker.hint" | translate }}
    </h5>

    <br />
    <h5 [innerHTML]="'picker.issues' | translate"></h5>
    <button
      style="display: block; margin: auto; margin-top: 32px"
      class="okay-button"
      (click)="warning.dismiss('dismiss'); acknowledgeWarning()"
    >
      {{ "picker.okay" | translate }}!
    </button>
  </div>
</ng-template>