<script setup>
import { NFlex, NSpace, NDivider, NButton } from 'naive-ui'
import ReportSelectDate from "../../Components/ReportSelectDate.vue";
import AppUserButton from "./AppUserButton.vue";
import {Link} from "@inertiajs/vue3";
import AppHeaderRole from "./AppHeaderRole.vue";
import {computed, useSlots} from "vue";

const slots = useSlots()
const hasHeaderExtra = computed(() => {
    if (!slots.headerExtra) return false

    const slotContent = slots.headerExtra()
    return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
})

const hasHeaderSuffix = computed(() => {
    if (!slots.headerExtra) return false

    const slotContent = slots.headerExtra()
    return slotContent && slotContent.length > 0 && slotContent[0].children.length > 0
})
</script>

<template>
    <div class="grid grid-cols-[auto_1fr_auto] px-4 w-full h-full">
        <NSpace align="center">
            <NButton :tag="Link" text href="/">
                Метрика
            </NButton>
            <NDivider v-if="hasHeaderExtra" vertical />
            <slot name="headerExtra" />
        </NSpace>
        <div></div>
        <NFlex align="center" justify="end">
            <slot name="headerSuffix" />
            <NDivider v-if="hasHeaderSuffix" vertical />
            <AppUserButton />
        </NFlex>
    </div>
</template>

<style scoped>

</style>
