<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(() => !!slots.headerExtra)
</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>
        <AppUserButton />
    </div>
</template>

<style scoped>

</style>
