1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <div class="add-card">
- @if (isIdle) {
- <div class="clickable-card" (click)="isIdle = false; closeOthers()">
- <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
- </div>
- } @else {
- <div class="spell-selection">
- <div class="controll-row">
- <div class="toggle-row">
- <span
- class="toggle-label"
- [class]="showAll ? 'inactive' : 'active'"
- >{{ "spellcards.add.class" | translate }}</span
- >
- <mat-slide-toggle
- [hideIcon]="true"
- (change)="toggleShowAll()"
- ></mat-slide-toggle>
- <span
- class="toggle-label"
- [class]="showAll ? 'active' : 'inactive'"
- >{{ "spellcards.add.all" | translate }}</span
- >
- </div>
- <icon-button [icon]="'cross'" (click)="resetThis()"></icon-button>
- </div>
- <input
- type="text"
- class="spell-name"
- [(ngModel)]="newSpellName"
- [placeholder]="'spellcards.add.search' | translate"
- (keyup)="filterSpellArray()"
- />
- <div class="available-spells">
- <ul>
- @for (spell of availableSpells; track spell) {
- <li>
- <button (click)="spellSelected(spell)">
- @if (translate.getDefaultLang() == "de") {
- {{ spell.german }}
- } @else {
- {{ spell.english }}
- }
- </button>
- </li>
- } @empty {
- {{ "spellcards.add.empty" | translate }}
- }
- </ul>
- </div>
- </div>
- }
- </div>
|