@let shownMenu = interactionMenuState();
<div class="flex flex-col h-[100vh]">
  <div class="min-h-56 h-2/3 max-h-2/3">
    @if (chibi()) {
      <ff-header [link]="ERouteKey.Home" [page]="chibi().name"></ff-header>
      <div
        class="flex flex-row justify-center px-2 py-4 h-full overflow-y-scroll"
      >
        <ff-interaction-canvas
          class="w-full flex flex-row justify-center"
          [chibi]="chibi()"
        ></ff-interaction-canvas>
      </div>
    }
  </div>
  <div class="h-1/3 min-h-20 bg-primary-300 relative">
    @if (shownMenu == EInteractionMenuState.Pantry) {
      <ff-food-pantry
        (onClose)="closeMenu()"
        (onFoodChosen)="interact(EChibiInteraction.Feed, $event)"
      ></ff-food-pantry>
    }
    @if (shownMenu == EInteractionMenuState.Inventory) {
      <ff-inventory (onClose)="closeMenu()"></ff-inventory>
    }
    <div class="flex flex-row gap-5 py-4 container mx-auto">
      <ff-button (click)="openInventory()">{{
        lang.game.actions.giveItem
      }}</ff-button>
      <ff-button (click)="openFoodPantry()">{{
        lang.game.actions.feed
      }}</ff-button>
      <ff-button (click)="interact(EChibiInteraction.WakeUp)">{{
        lang.game.actions.wakeUp
      }}</ff-button>
    </div>
  </div>
</div>