<script lang="ts">
    import { page } from '$app/stores';
    let { children } = $props();

    const tabs = [
        { href: '/admin', label: 'Overview' },
        { href: '/admin/users', label: 'Users' },
        { href: '/admin/mangas', label: 'Mangas' },
        { href: '/admin/system', label: 'System' }
    ];
</script>

<div class="admin-frame">
    <aside aria-label="admin">
        <h2>Admin</h2>
        <nav>
            {#each tabs as t (t.href)}
                <a
                    href={t.href}
                    class:active={$page.url.pathname === t.href}
                    data-testid={`admin-nav-${t.label.toLowerCase()}`}
                >
                    {t.label}
                </a>
            {/each}
        </nav>
    </aside>
    <section>
        {@render children()}
    </section>
</div>

<style>
    .admin-frame {
        display: grid;
        grid-template-columns: 12rem 1fr;
        gap: var(--space-4);
        align-items: start;
    }
    @media (max-width: 600px) {
        .admin-frame {
            grid-template-columns: 1fr;
        }
    }
    aside {
        position: sticky;
        top: calc(var(--app-header-h) + var(--space-4));
    }
    aside h2 {
        margin: 0 0 var(--space-3) 0;
        font-size: var(--font-base);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }
    nav a {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        color: var(--text);
        font-size: var(--font-sm);
    }
    nav a:hover {
        background: var(--surface-elevated);
        text-decoration: none;
    }
    nav a.active {
        background: var(--surface-elevated);
        font-weight: var(--weight-semibold);
    }
</style>
