<script lang="ts">
    import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
    import { Building, Globe, Users, ShieldCheck, List, LayoutDashboard, MapPin, Phone, History } from 'lucide-svelte';

    interface Props {
        data: any;
        children?: import('svelte').Snippet;
    }
    let { data, children }: Props = $props();
</script>

<svelte:head>
    <title>Core - {$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
    {#if $ae_loc.manager_access}
        <nav class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
            <a href="/core" class="btn btn-sm variant-soft-surface">
                <LayoutDashboard size={14} class="mr-1" /> Dashboard
            </a>
            <a href="/core/accounts" class="btn btn-sm variant-soft-primary">
                <Building size={14} class="mr-1" /> Accounts
            </a>
            <a href="/core/sites" class="btn btn-sm variant-soft-secondary">
                <Globe size={14} class="mr-1" /> Sites
            </a>
            <a href="/core/users" class="btn btn-sm variant-soft-error">
                <ShieldCheck size={14} class="mr-1" /> Users
            </a>
            <a href="/core/people" class="btn btn-sm variant-soft-warning">
                <Users size={14} class="mr-1" /> People
            </a>
            <a href="/core/activity_logs" class="btn btn-sm variant-soft-success">
                <History size={14} class="mr-1" /> Logs
            </a>
            <a href="/core/addresses" class="btn btn-sm variant-soft-surface">
                <MapPin size={14} class="mr-1" /> Addresses
            </a>
            <a href="/core/contacts" class="btn btn-sm variant-soft-surface">
                <Phone size={14} class="mr-1" /> Contacts
            </a>
            <a href="/core/lookups" class="btn btn-sm variant-soft-surface">
                <List size={14} class="mr-1" /> Lookups
            </a>
        </nav>
    {/if}

    <section class="main_content grow px-1 md:px-2 pb-28">
        {@render children?.()}
    </section>
</div>