---
import Layout from './Layout.astro';

interface Props {
    title: string;
}

const { title } = Astro.props;
---

<Layout title={title}>
    <div class="glass p-6 md:p-12 mb-12" id="admin-content" style="display: none;">
        <header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <a href="/admin" class="text-blue hover:text-sky transition-colors mb-4 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
                    Dashboard
                </a>
                <h1 class="text-3xl md:text-4xl font-extrabold text-mauve">
                    {title}
                </h1>
                <slot name="header-subtitle" />
            </div>
            
            <div class="flex gap-4 w-full md:w-auto">
                <slot name="header-actions" />
            </div>
        </header>

        <slot />
    </div>

    <script>
        const token = localStorage.getItem('admin_token');
        if (!token) {
            window.location.href = '/admin/login';
        } else {
            const content = document.getElementById('admin-content');
            if (content) content.style.display = 'block';
            
            // Dispatch custom event for child components to know token is ready
            document.dispatchEvent(new CustomEvent('admin-auth-ready', { detail: { token } }));
        }
    </script>
</Layout>