<script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, useForm } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Input } from '@/components/ui/input';
    import { Label } from '@/components/ui/label';
    import { Plus } from 'lucide-vue-next';

    const form = useForm({
        name: '',
    });

    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord',   href: '/dashboard' },
        { title: 'Avdelinger', href: '/smartdok/departments' },
        { title: 'Opprett',    href: '/smartdok/departments/create' },
    ];

    function submit() {
        form.post(route('smartdok.departments.store'));
    }
</script>

<template>
    <Head title="Opprett avdeling" />   
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="mb-6 flex items-center justify-between p-6">
        <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
          Opprett avdeling
        </h3>
      </div>    
      <div class="flex justify-center">
        <form
          @submit.prevent="submit"
          class="space-y-6 min-w-full sm:min-w-[400px] md:min-w-[600px] lg:min-w-[800px] p-6"
        >
          <!-- Navn -->
          <div>
            <Label for="name">Navn</Label>
            <Input
              id="name"
              v-model="form.name"
              type="text"
              placeholder="Skriv inn avdelingsnavn"
              class="mt-2"
            />
            <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">
              {{ form.errors.name }}
            </p>
          </div>    
          <!-- Actions -->
          <div class="flex items-center justify-end space-x-4">
            <Link :href="route('smartdok.departments.index')">
              <Button variant="outline">
                Avbryt
              </Button>
            </Link>
            <Button type="submit" :disabled="form.processing">
              Opprett
            </Button>
          </div>
        </form>
      </div>
    </AppLayout>
</template>
