{% extends 'base.html.twig' %}

{#
    Mise en page des pages authentifiées : barre latérale + en-tête + messages flash.
    Les pages enfants définissent {% block page_title %}, {% block page_actions %} et {% block content %}.
#}
{% set current_route = app.request.attributes.get('_route') %}
{% set main_role = app.user.mainRole %}

{% block body %}
<div class="flex min-h-full">
    {# Barre latérale #}
    <aside id="sidebar" class="fixed inset-y-0 left-0 z-40 hidden w-64 flex-col bg-brand-900 lg:flex">
        <div class="flex h-20 items-center gap-3 border-b border-white/10 px-5">
            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white p-1">
                <img src="{{ asset('logo-sans-fond.png') }}" alt="AMANSA VOYAGE" class="h-full w-full object-contain">
            </span>
            <div class="leading-tight">
                <p class="text-base font-bold tracking-wide text-white">AMANSA</p>
                <p class="text-xs font-semibold tracking-[0.3em] text-accent-400">VOYAGE</p>
            </div>
        </div>

        <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-5">
            <a href="{{ path('app_dashboard') }}" class="nav-link {{ current_route == 'app_dashboard' ? 'nav-link-active' }}">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
                Tableau de bord
            </a>

            <p class="px-3 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-brand-300">Dossiers de visa</p>
            <a href="{{ path('app_dossier_index') }}" class="nav-link {{ current_route starts with 'app_dossier' and current_route != 'app_dossier_new' ? 'nav-link-active' }}">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"/></svg>
                {{ is_granted('BATCH_MANAGE') ? 'Dossiers' : 'Mes dossiers' }}
            </a>
            <a href="{{ path('app_dossier_new') }}" class="nav-link {{ current_route == 'app_dossier_new' ? 'nav-link-active' }}">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"/></svg>
                Nouveau dossier
            </a>
            {% if is_granted('BATCH_MANAGE') %}
                <a href="{{ path('app_batch_index') }}" class="nav-link {{ current_route starts with 'app_batch' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/></svg>
                    Lots de dépôt
                </a>
                <a href="{{ path('app_client_index') }}" class="nav-link {{ current_route starts with 'app_client' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg>
                    Clients
                </a>
            {% endif %}
            {% if is_granted('FINANCE') %}
                <a href="{{ path('app_payment_index') }}" class="nav-link {{ current_route starts with 'app_payment' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z"/></svg>
                    Paiements
                </a>
            {% endif %}

            {% if is_granted('USER_LIST') %}
                <p class="px-3 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-brand-300">Administration</p>
                <a href="{{ path('app_user_index') }}" class="nav-link {{ current_route starts with 'app_user' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>
                    Utilisateurs
                </a>
                <a href="{{ path('app_activity_index') }}" class="nav-link {{ current_route starts with 'app_activity' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605"/></svg>
                    Suivi d'activité
                </a>
            {% endif %}
            {% if is_granted('EMBASSY_MANAGE') %}
                <a href="{{ path('app_embassy_index') }}" class="nav-link {{ current_route starts with 'app_embassy' ? 'nav-link-active' }}">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"/></svg>
                    Ambassades
                </a>
            {% endif %}
        </nav>

        <div class="border-t border-white/10 p-3">
            <a href="{{ path('app_profile') }}" class="nav-link {{ current_route == 'app_profile' ? 'nav-link-active' }}">
                <span class="flex h-8 w-8 items-center justify-center rounded-full bg-accent-500 text-xs font-bold text-white">{{ app.user.initials }}</span>
                <span class="min-w-0 leading-tight">
                    <span class="block truncate text-sm text-white">{{ app.user.fullName }}</span>
                    <span class="block text-xs text-brand-300">{{ main_role ? main_role.label }}</span>
                </span>
            </a>
        </div>
    </aside>

    <div class="flex min-w-0 flex-1 flex-col lg:pl-64">
        {# En-tête #}
        <header class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-slate-200 bg-white/90 px-4 backdrop-blur sm:px-6">
            <button type="button" class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 lg:hidden"
                    onclick="document.getElementById('sidebar').classList.toggle('hidden'); document.getElementById('sidebar').classList.toggle('flex')"
                    aria-label="Ouvrir le menu">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
            </button>
            <h1 class="truncate text-lg font-semibold text-slate-900">{% block page_title %}{% endblock %}</h1>
            <div class="ml-auto flex items-center gap-3">
                {% set unread = unread_notifications_count() %}
                <a href="{{ path('app_notification_index') }}" class="relative rounded-lg p-2 text-slate-600 hover:bg-slate-100" title="Notifications">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
                    {% if unread > 0 %}
                        <span class="absolute -top-0.5 -right-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-500 px-1 text-[10px] font-bold text-white">{{ unread > 99 ? '99+' : unread }}</span>
                    {% endif %}
                </a>
                <a href="{{ path('app_logout') }}" class="btn btn-secondary">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/></svg>
                    <span class="hidden sm:inline">Déconnexion</span>
                </a>
            </div>
        </header>

        <main class="flex-1 px-4 py-6 sm:px-6 lg:px-8">
            {{ include('components/_flashes.html.twig') }}

            {% set page_actions %}{% block page_actions %}{% endblock %}{% endset %}
            {% if page_actions|trim %}
                <div class="mb-6 flex flex-wrap items-center justify-end gap-2">{{ page_actions }}</div>
            {% endif %}

            {% block content %}{% endblock %}
        </main>
    </div>
</div>
{% endblock %}