<script setup>
defineProps({
    projects: {
        type: Array,
        required: true,
    }
});
</script>

<template>
    <section class="bg-gray-100 rounded-md p-4">
        <header class="flex justify-between items-center pb-4">
            <h2 class="text-2xl font-roboto font-light">Projekty</h2>
            <InertiaLink as="button" href="/dashboard/project/create" class="bg-blue-400 hover:bg-blue-500 text-white px-2 py-1">Dodaj nowy</InertiaLink>
        </header>
        <ul v-if="projects.length" class="flex flex-col gap-2">
            <li
                v-for="(project, key) in projects"
                :key="key"
            >
                <div class="flex items-center justify-between px-3 py-2 bg-white hover:bg-zinc-300 cursor-pointer">
                    <InertiaLink :href="`/dashboard/project/${project.id}`">{{ project.title }}</InertiaLink>
                    <div>
                        <InertiaLink
                            as="button"
                            class="px-2 py-1 bg-green-200"
                            :href="`/dashboard/project/${project.id}`">Edit</InertiaLink>
                    </div>
                </div>
            </li>
        </ul>
        <div v-else>
            Empty
        </div>
    </section>
</template>
