DNDTools/src/app/journal/journal-npcs/journal-npcs.component.html

<div class="npcs-container">
  <!-- ALLIES -->
  <!-- <div class="npc-list-title">Verbündete</div>
  <button class="toggle-button" (click)="collapse.toggle()">
    @if (isAlliesCollapsed) {
      Verbündete anzeigen
    } @else {
      Verbündete verbergen
    }
  </button>

  <div
    #collapse="ngbCollapse"
    class="npc-list"
    [(ngbCollapse)]="isAlliesCollapsed"
  >
    @if (isNewEntry) {

    } @else {
      <div class="npc-wrapper" (click)="addNpc('Ally')">
        <div class="npc add-button">
          <img src="assets/icons/UIIcons/add.svg" />
        </div>
      </div>
    }
    @for (npc of npcs.allies; track npc) {
      <div class="npc-wrapper">
        <div class="npc">
          <div class="npc-title">{{ npc.name }}</div>
        </div>
      </div>
    }
  </div> -->

  <!-- ss -->
  <mat-accordion class="example-headers-align" multi>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <div class="npc-list-title">Verbündete</div>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <divider [appearance]="'gold-2'" class="b-1"></divider>
      <div class="npc-wrapper" (click)="addNpc('Ally')">
        <div class="npc add-button">
          <img src="assets/icons/UIIcons/add.svg" />
        </div>
      </div>
      @for (npc of npcs.allies; let index = $index; track npc) {
        <div class="npc-wrapper">
          <div class="npc" (click)="selectNpc(index, 'allies')">
            <div class="npc-title">{{ npc.name }}</div>
          </div>
        </div>
      }
    </mat-expansion-panel>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title
          ><div class="npc-list-title">Feinde</div></mat-panel-title
        >
      </mat-expansion-panel-header>
      <!-- Enemies here -->
    </mat-expansion-panel>

    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <div class="npc-list-title">Andere</div>
      </mat-expansion-panel-header>
      <!-- Others here -->
    </mat-expansion-panel>
  </mat-accordion>
</div>

<!-- <div style="margin: 5rem 0 0 30rem">{{ currentNpc | json }}</div> -->

<div class="read-container">
  <div class="name">{{ currentNpc.name }}</div>
  <divider [appearance]="'gold-2'" class="b-1"></divider>
  <div class="short">{{ currentNpc.shortDescription }}</div>
  <div class="long">{{ currentNpc.longDescription }}</div>
</div>