<template>
  <div>
    <PageHead with-actions>
      <template #actions>
        <RouterLink
          class="px-2 py-2"
          :to="{ name: 'planner', query: { buildingId: building?.id } }"
          >Edit floor plans</RouterLink
        >
      </template>

      <template #default>
        <div class="flex flex-col">
          <h1 class="text-2xl font-bold">{{ building?.displayName }}</h1>
          <span class="text-sm font-light text-gray-800 line-clamp-1">{{
            building?.address
          }}</span>
        </div>
      </template>
    </PageHead>

    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-xl font-bold">Floors</h2>
    </div>

    <div
      class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
      v-if="building"
    >
      <FloorListItem
        :building="building!.id"
        v-for="floor of building?.floors || []"
        :floor="floor"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import PageHead from '../../components/PageHead.vue';
import { useBuildingStore } from '../../store/building.store';
import FloorListItem from './floors/FloorListItem.vue';

const buildingStore = useBuildingStore();
const { building } = storeToRefs(buildingStore);
</script>
