<div class="inventory-container">
  <div class="item-container">
    <div class="tab-row">
      <button
        class="tab-button"
        (click)="active = 1"
        [class]="active === 1 ? 'active' : ''"
      >
        Waffen und Rüstungen
      </button>
      <button
        class="tab-button"
        (click)="active = 2"
        [class]="active === 2 ? 'active' : ''"
      >
        Verbrauchsgegenstände
      </button>
      <button
        class="tab-button"
        (click)="active = 3"
        [class]="active === 3 ? 'active' : ''"
      >
        Sonstiges
      </button>
    </div>

    <div class="heading-row">
      <div class="heading">Name</div>
      <div class="heading">Wert</div>
      <div class="heading">Gewicht</div>
      <div class="heading">Anzahl</div>
    </div>

    @switch(active) { @case(1){
    <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
    } @case(2){
    <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
    } @case(3){
    <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
    }}
    <ui-button
      [type]="'add'"
      [size]="'xlarge'"
      [color]="'primary'"
      class="button-margin"
      (click)="addItem()"
    ></ui-button>
  </div>

  <div class="money-container" (change)="updateMoney()">
    <div class="money-title">Münzen</div>
    <div class="money-row">
      <div class="money-label">Platin</div>
      <div class="money-box">
        <input class="money-input" type="number" [(ngModel)]="money.platinum" />
      </div>
    </div>

    <div class="money-row">
      <div class="money-label">Gold</div>
      <div class="money-box">
        <input class="money-input" type="number" [(ngModel)]="money.gold" />
      </div>
    </div>

    <div class="money-row">
      <div class="money-label">Elektrum</div>
      <div class="money-box">
        <input class="money-input" type="number" [(ngModel)]="money.electrum" />
      </div>
    </div>

    <div class="money-row">
      <div class="money-label">Silber</div>
      <div class="money-box">
        <input class="money-input" type="number" [(ngModel)]="money.silver" />
      </div>
    </div>

    <div class="money-row">
      <div class="money-label">Kupfer</div>
      <div class="money-box">
        <input class="money-input" type="number" [(ngModel)]="money.copper" />
      </div>
    </div>
  </div>

  <!-- FOOD -->
  <div class="food-container">
    <div class="heading-row">
      <div class="heading">Name</div>
      <div class="heading">Fertig</div>
      <div class="heading">Gewicht</div>
      <div class="heading">Anzahl</div>
    </div>
    <div
      cdkDropList
      class="example-list table-content"
      (cdkDropListDropped)="drop($event, food, 'food')"
    >
      @for (item of food; let index = $index; track item) {
      <div class="example-box" cdkDrag (click)="openFoodDetails(index)">
        <div class="item">{{ item.name }}</div>
        <div class="item">@if(item.isReady){Ja} @else {Nein}</div>
        <div class="item">{{ item.weight }} Kg.</div>
        <div class="item">{{ item.quantity }}</div>
      </div>
      }
    </div>
    <ui-button
      style="margin: 1rem"
      [type]="'add'"
      [size]="'xlarge'"
      [color]="'primary'"
      (click)="openFoodModal(false)"
    ></ui-button>
  </div>

  <!-- WEAPONS -->
  <ng-template #weaponTemplate>
    <div
      cdkDropList
      class="example-list table-content"
      (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
    >
      @for (item of weaponsAndArmor; let index = $index; track item) {
      <div
        class="example-box"
        cdkDrag
        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
      >
        <div class="item">{{ item.name }}</div>
        <div class="item">{{ item.value }} Gold</div>
        <div class="item">{{ item.weight }} Kg.</div>
        <div class="item">{{ item.quantity }}</div>
      </div>
      }
    </div>
  </ng-template>

  <!-- CONSUMABLES -->
  <ng-template #consumablesTemplate>
    <div
      cdkDropList
      class="example-list table-content"
      (cdkDropListDropped)="drop($event, consumables, 'consumables')"
    >
      @for (item of consumables; let index = $index; track item) {
      <div
        class="example-box"
        cdkDrag
        (click)="openItemsDetails(consumables, index, 'consumables')"
      >
        <div class="item">{{ item.name }}</div>
        <div class="item">{{ item.value }} Gold</div>
        <div class="item">{{ item.weight }} Kg.</div>
        <div class="item">{{ item.quantity }}</div>
      </div>
      }
    </div>
  </ng-template>

  <!-- MISCELLANEOUS -->
  <ng-template #miscTemplate>
    <div
      cdkDropList
      class="example-list table-content"
      (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
    >
      @for (item of miscellaneous; let index = $index; track item) {
      <div
        class="example-box"
        cdkDrag
        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
      >
        <div class="item">{{ item.name }}</div>
        <div class="item">{{ item.value }} Gold</div>
        <div class="item">{{ item.weight }} Kg.</div>
        <div class="item">{{ item.quantity }}</div>
      </div>
      }
    </div>
  </ng-template>
</div>
