<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — Groupes</h1>
            </div>
        </div>

        <div>
            <ProjectGroupTab :project-id="projectId" />
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Project } from '~/services/dto/project'
import { useProjectService } from '~/services/projects'

const route = useRoute()
const projectId = computed(() => Number(route.params.id))

useHead({ title: 'Groupes du projet' })

const projectService = useProjectService()
const project = ref<Project | null>(null)

async function loadProject() {
    project.value = await projectService.getById(projectId.value)
}

onMounted(() => {
    loadProject()
})
</script>
