<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import { ref } from 'vue';
import { useDisplay } from 'vuetify';
import Masthead from '@/components/Masthead.vue';
import { usePage } from '@/composables/usePage';
import CategoryNavBar from '@/components/CategoryNavBar.vue';
import { route } from 'ziggy-js';

defineProps<{
    title?: string;
}>();

const page = usePage().props;

const { mobile } = useDisplay();
const drawer = ref(false);

const logout = () => router.post(route('logout'));
</script>

<template>
    <Head :title="title" />

    <VApp>
        <!-- Header -->
        <VAppBar flat height="56" color="surface" border="b">
            <VAppBarTitle>
                <Masthead dark />
            </VAppBarTitle>

            <!-- Desktop nav -->
            <template v-if="!mobile">
                <div class="d-flex align-center ga-2 mr-4">
                    <VBtn
                        v-if="!page.auth.user"
                        variant="text"
                        :href="route('login')"
                        class="nav-btn"
                    >
                        Login
                    </VBtn>
                    <VBtn
                        v-if="!page.auth.user"
                        variant="outlined"
                        :href="route('register')"
                        class="nav-btn"
                    >
                        Register
                    </VBtn>
                    <div style="display: flex; align-items: center">
                        <span v-if="page.auth.user"
                            >Hello {{ page.auth.user.name }}!</span
                        >
                    </div>
                    <VBtn
                        v-if="page.auth.user"
                        icon="mdi-cog"
                        variant="text"
                        :href="route('settings.index')"
                        aria-label="Settings"
                    />
                    <VBtn
                        v-if="page.auth.user"
                        variant="outlined"
                        class="nav-btn"
                        @click="logout"
                    >
                        Log Out
                    </VBtn>
                </div>
            </template>

            <!-- Mobile hamburger -->
            <VAppBarNavIcon v-else @click="drawer = !drawer" />
        </VAppBar>

        <CategoryNavBar />

        <VNavigationDrawer v-model="drawer" temporary>
            <VList>
                <VListItem
                    v-if="!page.auth.user"
                    :href="route('login')"
                    title="Login"
                />
                <VListItem
                    v-if="!page.auth.user"
                    :href="route('register')"
                    title="Register"
                />
                <VListItem
                    v-if="page.auth.user"
                    :href="route('settings.index')"
                    title="Settings"
                />
                <VListItem
                    v-if="page.auth.user"
                    title="Log Out"
                    @click="logout"
                />
            </VList>
        </VNavigationDrawer>

        <!-- Main content -->
        <VMain class="bg-background">
            <VContainer class="content-well pa-6">
                <slot />
            </VContainer>
        </VMain>

        <!-- Footer -->
        <VFooter app color="#111111" class="footer">
            <Masthead small light />
            <VSpacer />
            <nav class="d-flex ga-4"></nav>
            <v-spacer />
            <span class="footer-copy"
                >© {{ new Date().getFullYear() }} DredgeNews</span
            >
        </VFooter>
    </VApp>
</template>

<style scoped lang="sass">

.nav-btn
    font-family: 'Inter', sans-serif
    font-size: 13px
    font-weight: 500
    letter-spacing: 0
    text-transform: none


.nav-link
    font-family: 'Inter', sans-serif
    font-size: 13px
    font-weight: 500
    color: #444
    text-decoration: none
    padding: 0 14px
    height: 56px
    display: flex
    align-items: center
    border-bottom: 3px solid transparent
    transition: color 0.15s

    &:hover
        color: #111

    &.active
        color: #111
        border-bottom-color: #C0392B

.content-well
    max-width: 1080px

.footer
    padding: 1.25rem 1.5rem
    display: flex
    align-items: center

.footer-link
    font-size: 12px
    color: #aaa
    text-decoration: none

    &:hover
        color: #fff

.footer-copy
    font-size: 11px
    color: #666
</style>
