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

<div class="header">
  <h1>DND-TOOLS</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>
  }@else {
  <div class="card-placeholder" (click)="addCharacter()">
    <!-- <icon [size]="'l'" [type]="'UI'" [icon]="'add'"></icon> -->
    <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">Charakter löschen</h4>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="modal.dismiss('dismiss')"
    ></button>
  </div>
  <div class="modal-body">
    Möchest du <b>{{ currentCharacter }}</b> unwiderruflich löschen?
  </div>
  <div class="modal-footer">
    <div class="button-row">
      <button class="delete-button" (click)="modal.dismiss('delete')">
        Löschen
      </button>
    </div>
  </div>
</ng-template>