<div class="inventory-container">
  <!-- ITEMS -->
  <div class="item-container">
    <div class="tab-row">
      <button
        class="tab-button"
        (click)="active = 1"
        [class]="active === 1 ? 'active' : ''"
      >
        {{ "inventory.weapArm" | translate }}
      </button>
      <button
        class="tab-button"
        (click)="active = 2"
        [class]="active === 2 ? 'active' : ''"
      >
        {{ "inventory.misc" | translate }}
      </button>
    </div>

    <div class="heading-row">
      <div class="table-heading">{{ "inventory.name" | translate }}</div>
      <div class="table-heading">{{ "inventory.value" | translate }}</div>
      <div class="table-heading">{{ "inventory.weight" | translate }}</div>
      <div class="table-heading">{{ "inventory.quantity" | translate }}</div>
    </div>

    @switch (active) {
      @case (1) {
        <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
      }
      @case (2) {
        <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
      }
    }

    <div class="footer">
      <ui-button
        [color]="'green'"
        [width]="'w22'"
        [type]="'addEntry'"
        (click)="addItem('items')"
      >
      </ui-button>
    </div>
  </div>
  <div class="right-column">
    <!-- FOOD -->

    <div class="food-container">
      <div class="tab-row">
        <button
          class="tab-button"
          (click)="foodActive = 1"
          [class]="foodActive === 1 ? 'active' : ''"
        >
          {{ "inventory.food" | translate }}
        </button>
        <button
          class="tab-button"
          (click)="foodActive = 2"
          [class]="foodActive === 2 ? 'active' : ''"
        >
          {{ "inventory.usable" | translate }}
        </button>
      </div>
      <div class="heading-row">
        <div class="table-heading">{{ "inventory.name" | translate }}</div>
        <div class="table-heading">
          {{
            foodActive === 1
              ? ("inventory.ready" | translate)
              : ("inventory.value" | translate)
          }}
        </div>
        <div class="table-heading">{{ "inventory.weight" | translate }}</div>
        <div class="table-heading">{{ "inventory.quantity" | translate }}</div>
      </div>
      @switch (foodActive) {
        @case (1) {
          <ng-container [ngTemplateOutlet]="foodTemplate"></ng-container>
        }
        @case (2) {
          <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
        }
      }

      <div class="footer">
        <ui-button
          [color]="'green'"
          [width]="'w22'"
          [type]="'addEntry'"
          (click)="addItem('consumables')"
        >
        </ui-button>
      </div>
    </div>

    <!-- MONEY -->
    <div class="money-container" (change)="updateMoney()">
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/platinum.svg" class="money-icon" />
          <input
            class="money-input"
            type="number"
            [(ngModel)]="money.platinum"
          />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/gold.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.gold" />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/silver.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.silver" />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/copper.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.copper" />
        </div>
      </div>
    </div>

    <!-- WEIGHT -->
    <div class="weight-container">
      <div style="font-size: 1.5rem; font-weight: bold">Gesamtlast:</div>
      <div class="weight-box">{{ totalWeight }} / {{ maximumWeight }} lb.</div>
    </div>
  </div>

  <!-- TEMPLATES -->

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

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

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

  <!-- FOOD -->
  <ng-template #foodTemplate>
    <div
      cdkDropList
      class="item-list table-content"
      (cdkDropListDropped)="drop($event, food, 'food')"
    >
      @for (item of food; let index = $index; track item) {
        <!-- <div class="item" cdkDrag (click)="openFoodDetails(index)"> -->
        <div
          class="item"
          cdkDrag
          (click)="openItemsDetails(food, index, 'food')"
        >
          <div class="item-property">{{ item.name }}</div>
          <div class="item-property">
            @if (item.isReady) {
              Ja
            } @else {
              Nein
            }
          </div>
          <div class="item-property">{{ item.weight }} lb.</div>
          <div class="item-property">{{ item.quantity }}</div>
        </div>
      } @empty {
        <div class="empty-list">Kein Eintrag</div>
      }
    </div>
  </ng-template>
</div>
