@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 (chibi()) {
      <ff-food-pantry
        [isVisible]="shownMenu == EInteractionMenuState.Pantry"
        (onClose)="closeMenu()"
        (onFoodChosen)="interact(EChibiInteraction.Feed, $event)"
      ></ff-food-pantry>

      <ff-inventory
        [isVisible]="shownMenu == EInteractionMenuState.Inventory"
        (onClose)="closeMenu()"
      ></ff-inventory>

      <ff-visitor-list
        [isVisible]="shownMenu == EInteractionMenuState.VisitorList"
        (onClose)="closeMenu()"
        [host]="chibi()"
        [visitors]="[]"
      ></ff-visitor-list>

      <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)="openVisitorList()">{{
          lang.game.actions.inviteVisitor
        }}</ff-button>
        @if (isAwake()) {
          <ff-button (click)="interact(EChibiInteraction.PutToSleep)">{{
            lang.game.actions.putToSleep
          }}</ff-button>
        } @else {
          <ff-button (click)="interact(EChibiInteraction.WakeUp)">{{
            lang.game.actions.wakeUp
          }}</ff-button>
        }
      </div>
    }
  </div>
</div>