<script setup lang="ts">
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/crm-button';
import { Separator } from '@/components/ui/separator';
import { cn, toUrl, urlIsActive } from '@/lib/utils';
import { edit as editAppearance } from '@/routes/appearance';
import { edit as editPassword } from '@/routes/password';
import { edit as editProfile } from '@/routes/profile';
import { show } from '@/routes/two-factor';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/vue3';
import AppLayout from '@/layouts/AppLayout.vue'
import AppHeader from '@/components/AppHeader.vue'

const sidebarNavItems: NavItem[] = [
    {
        title: 'Profile',
        href: editProfile(),
    },
    {
        title: 'Password',
        href: editPassword(),
    },
    {
        title: 'Two-Factor Auth',
        href: show(),
    },
    {
        title: 'Appearance',
        href: editAppearance(),
    },
];

const currentPath = typeof window !== undefined ? window.location.pathname : '';
</script>

<template>

    <Head title="Einstellungen" />

    <AppLayout title="Einstellungen">

        <div class="mb-12 gap-4">
            <Heading title="Einstellungen" description="Manage your profile and account settings" />
        </div>

        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6 max-w-4xl">

            <div class="flex flex-col grow lg:flex-row lg:space-x-12">
                <aside class="w-full max-w-xl lg:w-64">
                    <nav class="flex flex-col space-y-1 space-x-0">
                        <Button v-for="item in sidebarNavItems" :key="toUrl(item.href)" variant="ghost"
                            :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
                            as-child>
                            <Link :href="item.href" prefetch>
                                {{ item.title }}
                            </Link>
                        </Button>
                    </nav>
                </aside>

                <Separator class="my-6 lg:hidden" />

                <div class="flex-1">
                    <section class="space-y-12">
                        <slot />
                    </section>
                </div>
            </div>
        </div>

    </AppLayout>
</template>
