1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <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>
|