<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 Instagram Bratislavskej bunky">
                <UButton
                    color="neutral"
                    variant="ghost"
                    to="https://www.instagram.com/foodnotbombsbratislava/"
                    target="_blank"
                    icon="i-simple-icons-instagram"
                    aria-label="Instagram"/>
            </UTooltip>

            <UTooltip text="Otvor Instagram Košickej bunky">
                <UButton
                    color="neutral"
                    variant="ghost"
                    to="https://www.instagram.com/foodnotbombs_kosice/"
                    target="_blank"
                    icon="i-simple-icons-instagram"
                    aria-label="Instagram"/>
            </UTooltip>

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

    <UContainer>
        <div class="w-[40vw] my-[2vh] h-full flex flex-col">
            <slot/>
        </div>
    </UContainer>

    <UFooter>
        <template #left>
            <p class="text-muted text-sm">Copyleft 🄯 {{ new Date().getFullYear() }}</p>
        </template>

        <template #top>
            <USeparator class="bg-red-500"/>
        </template>

        <template #right>
            <p class="text-muted text-sm">
                Vytvoril
                <NuxtLink to="https://svitan.dev/sk/" target="_blank" class="underline">Daniel Svitan</NuxtLink>
            </p>
        </template>
    </UFooter>
</template>

<script lang="ts" setup>
import type {NavigationMenuItem} from "#ui/components/NavigationMenu.vue";

const route = useRoute();

const items = computed<NavigationMenuItem[]>(() => [
    {
        label: "Kto sme",
        to: "/kto-sme",
        active: route.path.startsWith("/kto-sme"),
        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>
