<div class="spellbook-container">
  <div class="content">
    <div class="header-row">
      <h1>Zauberbuch</h1>
      <div class="button-container">
        <button class="top-button" (click)="openManageCustomSpellsModal()">
          <img src="assets/icons/UIIcons/settings.svg" />
          {{ "spellbook.manage" | translate }}
        </button>

        <button class="top-button" (click)="openSpellCreationModal(false)">
          <img src="assets/icons/UIIcons/add.svg" />
          {{ "spellbook.add" | translate }}
        </button>
      </div>
    </div>

    <divider></divider>
    <div class="class-picker t-075">
      @for (className of list.magicClasses; track className) {
        <div class="class">
          <div
            [id]="className"
            [class]="className + '-icon'"
            (click)="toggleClassSelection(className)"
          ></div>
          <label for="">{{ "classes." + className | translate }}</label>
        </div>
      }
    </div>

    <ul ngbNav #nav="ngbNav" [(activeId)]="currentLevel" class="nav-tabs">
      @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
        <li [ngbNavItem]="level">
          <button
            ngbNavLink
            (click)="currentLevel = level; refreshFilteredSpells(true)"
          >
            {{ "spellbook.levels." + level | translate }}
          </button>
          <ng-template ngbNavContent>
            <div class="card-container">
              @for (spell of filteredSpells; track spell) {
                <spellcard
                  [spell]="spell"
                  (click)="showFullSpellcard(spell)"
                ></spellcard>
              } @empty {
                <div class="empty">{{ "spellbook.noSpells" | translate }}</div>
              }
            </div>
          </ng-template>
        </li>
      }
    </ul>

    <div [ngbNavOutlet]="nav"></div>
  </div>
</div>
