<template>
    <UHeader>
        <template #left>
            <h1 class="text-2xl text-center">Food Not Bombs Slovensko</h1>
        </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>
        <slot />
    </UApp>
</template>

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

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

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