<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#011b36">
    <meta name="robots" content="noindex, nofollow">

    <title>@yield('title', 'Administration') - NH TRANS</title>
    <meta name="description" content="@yield('description', 'Tableau de bord d\'administration NH TRANS.')">

    <link rel="icon" href="{{ asset('assets/images/branding/logo-nh-trans.jpg') }}" type="image/png">

    @vite(['resources/css/admin.css', 'resources/js/admin.js'])
</head>
<body class="flex min-h-screen bg-brand-surface text-brand-ink antialiased">
    <a href="#admin-main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-brand-primary focus:px-4 focus:py-2 focus:text-brand-white">
        Aller au contenu principal
    </a>

    <x-admin.sidebar />

    <div class="flex min-h-screen flex-1 flex-col overflow-x-hidden">
        <x-admin.topbar :breadcrumbs="$breadcrumbs ?? []" />

        <main id="admin-main-content" class="flex-1 px-4 py-6 sm:px-6 lg:py-8">
            <div class="mx-auto max-w-7xl">
                @if (session('status'))
                    <div class="mb-5 rounded-lg border border-admin-success/30 bg-admin-success-bg px-4 py-3 text-sm font-medium text-admin-success">
                        {{ session('status') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-5 rounded-lg border border-admin-danger/30 bg-admin-danger-bg px-4 py-3 text-sm text-admin-danger">
                        <p class="font-semibold">Action impossible.</p>
                        <ul class="mt-1 list-disc pl-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @yield('content')
            </div>
        </main>

        <footer class="border-t border-brand-border px-4 py-4 text-center text-xs text-brand-muted sm:px-6">
            <p>NH TRANS - Interface d'administration connectee.</p>
        </footer>
    </div>

    <div id="admin-confirm-modal" data-modal data-open="false" class="admin-modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-brand-ink/50 p-4">
        <div data-modal-panel tabindex="-1" role="alertdialog" aria-modal="true" aria-labelledby="admin-confirm-title" class="admin-modal-panel admin-card w-full max-w-sm p-5">
            <h2 id="admin-confirm-title" data-confirm-title class="text-base font-semibold text-brand-ink">Confirmer cette action ?</h2>
            <p data-confirm-body class="mt-2 text-sm text-brand-muted">Cette action sera appliquee apres confirmation.</p>
            <div class="mt-5 flex justify-end gap-2">
                <button type="button" data-modal-close class="btn btn-secondary btn-sm">Annuler</button>
                <button type="button" data-confirm-submit data-modal-close class="btn btn-danger btn-sm">Confirmer</button>
            </div>
        </div>
    </div>

    @stack('modals')
</body>
</html>
