<template>
    <UHeader>
        <template #left>
            <UTooltip text="Domov">
                <UButton color="neutral" variant="ghost" to="/" class="text-xl">
                    Food Not Bombs Slovensko
                </UButton>
            </UTooltip>
        </template>

        <UNavigationMenu :items="items" />

        <template #right>
            <UTooltip text="Otvor na Gitea">
                <UButton
                    color="neutral"
                    variant="ghost"
                    to="https://gitea.svitan.dev/Streamer272/fnb"
                    target="_blank"
                    icon="i-simple-icons-github"
                    aria-label="Gitea"
                />
            </UTooltip>
        </template>
    </UHeader>

    <UApp>
        <div class="m-4 w-full h-full flex flex-col">
            <slot />
        </div>
    </UApp>
</template>

<script lang="ts" setup>
const route = useRoute();

const items = computed<NavigationMenuItem[]>(() => [
    {
        label: "Kto sme",
        to: "/kto-sme",
        active: route.path.startsWith("/about"),
        class: "text-lg",
    },
    {
        label: "Akcie",
        to: "/akcie",
        active: route.path.startsWith("/akcie"),
        class: "text-lg",
    },
    {
        label: "Pridaj sa",
        to: "/pridaj-sa",
        active: route.path.startsWith("/pridaj-sa"),
        class: "text-lg",
    },
    {
        label: "Kontakt",
        to: "/kontakt",
        active: route.path.startsWith("/kontakt"),
        class: "text-lg",
    },
    {
        label: "Food Not Bombs vo svete",
        to: "https://foodnotbombs.net/new_site/",
        target: "_blank",
        class: "text-lg",
    },
]);

useHead({
    title: "Food Not Bombs",
    link: [{ rel: "icon", type: "image/png", href: "/logo.png" }],
});
</script>
