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

{# Layout des pages connectées : menu à gauche + barre supérieure + contenu, repris du Radar
   (radar/templates/layout/app.html.twig). Le login (public) reste sur base.html.twig.
   Le menu dépend du rôle : l'admin voit l'administration, le sourceur ne voit que ses demandes. #}

{% macro nav_link(route, label, active, count = null) %}
    <a href="{{ path(route) }}"
       class="flex items-center justify-between rounded-md px-3 py-2 font-structure text-sm font-medium {% if active %}bg-pepite-gold text-pepite-ink{% else %}text-white/70 hover:bg-white/5 hover:text-white{% endif %}">
        <span>{{ label }}</span>
        {% if count is not null %}<span class="rounded-full bg-black/15 px-2 py-0.5 text-xs">{{ count }}</span>{% endif %}
    </a>
{% endmacro %}
{% import _self as ui %}

{% block body %}
    <div class="flex min-h-screen">
        <div id="nav-overlay" class="fixed inset-0 z-30 hidden bg-black/40 lg:hidden" data-nav-close></div>
        <aside id="app-nav" class="pepite-sidebar fixed inset-y-0 left-0 z-40 flex w-64 -translate-x-full flex-shrink-0 flex-col overflow-hidden bg-pepite-navy text-white transition-transform lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:translate-x-0">
            <div class="flex min-h-[80px] flex-shrink-0 items-center border-b border-pepite-navy-border px-5 py-4">
                <div>
                    <p class="font-display text-lg tracking-wide text-white">{{ 'app.name'|trans }}</p>
                    <div class="mt-1 flex items-center gap-2">
                        <span class="h-0.5 w-4 bg-pepite-gold"></span>
                        <p class="font-structure text-xs uppercase tracking-wide text-white/50">{{ 'app.portal'|trans }}</p>
                    </div>
                </div>
            </div>

            <nav class="min-h-0 flex-1 space-y-1 overflow-y-auto px-2.5 py-3">
                {% if is_granted('ROLE_ADMIN') %}
                    {{ ui.nav_link('app_admin_home', 'Accueil', app.current_route == 'app_admin_home') }}
                    {{ ui.nav_link('app_admin_requests', 'Demandes', app.current_route starts with 'app_admin_request' or app.current_route starts with 'app_admin_proposal') }}
                    {% if app.environment in ['dev', 'test'] %}{{ ui.nav_link('app_contacts', 'Consultations fournisseurs', app.current_route starts with 'app_contacts') }}{{ ui.nav_link('app_radar_sync', 'Synchronisation Radar', app.current_route == 'app_radar_sync') }}{% endif %}
                    {% block admin_nav %}{% endblock %}
                    <p class="mt-4 border-t border-pepite-navy-border px-3 pb-1 pt-4 font-structure text-[11px] font-semibold uppercase tracking-widest text-white/40">Administration</p>
                    {% block admin_tools_nav %}{% endblock %}
                    {{ ui.nav_link('app_admin_sourcers', 'Sourceurs', app.current_route starts with 'app_admin_sourcer') }}
                    {{ ui.nav_link('app_parameters', 'Paramètres PÉPITE', app.current_route starts with 'app_parameter') }}
                {% else %}
                    {{ ui.nav_link('app_home', 'nav.my_requests'|trans, app.current_route in ['app_home', 'app_request_show', 'app_proposal_submit', 'app_proposal_show']) }}
                {% endif %}
            </nav>

            {% if app.user %}
                <div class="flex flex-shrink-0 items-center gap-3 border-t border-pepite-navy-border px-5 py-4">
                    <span class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-pepite-gold font-structure text-xs font-semibold text-pepite-ink">
                        {{ app.user.firstName|slice(0, 1) }}{{ app.user.lastName|slice(0, 1) }}
                    </span>
                    <div class="min-w-0 text-sm">
                        <p class="truncate text-white/90">{{ app.user.firstName }} {{ app.user.lastName }}</p>
                        <a href="{{ path('app_logout') }}" class="text-xs text-white/50 hover:text-white hover:underline">{{ 'nav.logout'|trans }}</a>
                    </div>
                </div>
            {% endif %}
        </aside>

        <div class="flex min-w-0 flex-1 flex-col">
            <header class="flex items-center justify-between gap-3 border-b border-gray-200 bg-white px-4 py-3 sm:px-8">
                <button type="button" data-nav-toggle aria-label="{{ 'nav.open_menu'|trans }}" aria-controls="app-nav" aria-expanded="false"
                        class="-ml-1 rounded-md p-1.5 text-pepite-ink hover:bg-gray-100 lg:hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
                </button>
                <p class="min-w-0 flex-1 truncate font-structure text-sm text-pepite-ink/60">
                    <span class="font-semibold text-pepite-ink">{{ 'app.name'|trans }}</span>
                    <span class="mx-1">/</span>
                    {% block breadcrumb %}{{ 'app.portal'|trans }}{% endblock %}
                </p>
            </header>

            <main class="w-full min-w-0 flex-1 bg-pepite-soft px-4 py-6 sm:px-8 sm:py-8">
                {% for message in app.flashes('error') %}
                    <p class="mb-4 rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">{{ message }}</p>
                {% endfor %}
                {% for message in app.flashes('info') %}
                    <p class="mb-4 rounded-md border border-gray-300 bg-white px-4 py-3 text-sm text-pepite-ink/70">{{ message }}</p>
                {% endfor %}
                {% for message in app.flashes('success') %}
                    <p class="mb-4 rounded-md border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ message }}</p>
                {% endfor %}

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