<template>
    <div class="min-h-screen bg-slate-50 text-slate-900">
        <div class="flex min-h-screen">
            <Sidenav
                :collapsed="collapsed"
                :mobile-open="mobileOpen"
                @toggle-collapse="toggleCollapse"
                @toggle-mobile="toggleMobile"
            />
            <div class="flex-1">
                <AppBar
                    :title="title"
                    :user="user"
                    :csrf="csrf"
                    :notifications="notifications"
                    :languages="languages"
                    @toggle-sidebar="toggleMobile"
                />
                <main class="p-6">
                    <slot />
                </main>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { languages, notifications } from '../data/aurora';
import AppBar from '../Components/AppBar.vue';
import Sidenav from '../Components/Sidenav.vue';

const props = defineProps({
    title: {
        type: String,
        default: 'Dashboard',
    },
});

const page = usePage();
const user = computed(() => page.props.auth?.user);
const csrf = computed(() => page.props.csrf_token);

const mobileOpen = ref(false);
const collapsed = ref(false);

const toggleMobile = () => {
    mobileOpen.value = !mobileOpen.value;
};

const toggleCollapse = () => {
    collapsed.value = !collapsed.value;
};
</script>
