<script setup lang="ts">
    import { computed } from 'vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, usePage } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Label } from '@/components/ui/label';

    interface Department {
        id: number
        name: string
    };

    // Hent Inertia-props
    const page = usePage<{ department: Department }>();

    // Reaktiv avdeling
    const department = computed(() => page.props.department);

    // Breadcrumbs: Dashbord > Avdelinger > [navn]
    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord',   href: '/dashboard' },
        { title: 'Avdelinger', href: '/smartdok/departments' },
        {
            title: department.value.name,
            href: route('smartdok.departments.show', department.value.id),
        },
    ];
</script>

<template>
    <Head title="Vis avdeling" />   
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="p-6 space-y-8">
        <!-- Overskrift + handlinger -->
        <div class="flex items-center justify-between">
          <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
            Vis avdeling
          </h3>
          <div class="flex space-x-2">
            <Link :href="route('smartdok.departments.index')">
              <Button variant="outline">Tilbake</Button>
            </Link>
            <Link :href="route('smartdok.departments.edit', department.id)">
              <Button>Rediger</Button>
            </Link>
          </div>
        </div>  
        <!-- Avdelingsdetaljer -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <Label for="id">ID</Label>
            <p id="id" class="mt-1 text-base">
              {{ department.id }}
            </p>
          </div>
          <div>
            <Label for="name">Navn</Label>
            <p id="name" class="mt-1 text-base">
              {{ department.name }}
            </p>
          </div>
        </div>
      </div>
    </AppLayout>
</template>
