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

{% block css_variables %}
    <link rel="stylesheet" href="{{ asset('css/variables-client.css') }}">
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/profile.css') }}">
{% endblock %}

{% block body %}

<div class="profile-layout">

    {# ── Sidebar ── #}
    <aside class="profile-sidebar" id="profile-sidebar">

        <div class="profile-sidebar-header">
            <div class="profile-sidebar-avatar" data-user-initials>
                {{ app.user.firstName|first|upper }}{{ app.user.lastName|first|upper }}
            </div>
            <div class="profile-sidebar-identity">
                <span class="profile-sidebar-name" data-user-fullname>{{ app.user.firstName }} {{ app.user.lastName }}</span>
                <span class="profile-sidebar-email">{{ app.user.email }}</span>
            </div>
        </div>

        <button type="button" class="profile-sidebar-toggle" id="profile-sidebar-toggle" title="Ouvrir / Fermer le menu">
            <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
        </button>

        <nav class="profile-sidebar-nav">
            <a href="{{ path('app_profile') }}"
               class="profile-sidebar-link {% if app.request.attributes.get('_route') starts with 'app_profile' %}active{% endif %}">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                <span>Profil</span>
            </a>
            <a href="{{ path('app_settings') }}"
               class="profile-sidebar-link {% if app.request.attributes.get('_route') starts with 'app_settings' %}active{% endif %}">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                <span>Paramètres</span>
            </a>
        </nav>

        <div class="profile-sidebar-footer">
            {% if is_granted('ROLE_INTERN') %}
                <a href="{{ path('app_admin') }}" class="profile-sidebar-link profile-sidebar-link--admin">
                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                    <span>Back Office</span>
                </a>
            {% endif %}
            <a href="{{ path('app_logout') }}" class="profile-sidebar-logout">
                <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                <span>Déconnexion</span>
            </a>
        </div>

    </aside>

    {# ── Mobile overlay ── #}
    <div class="profile-sidebar-overlay" id="profile-sidebar-overlay"></div>

    {# ── Content ── #}
    <div class="profile-content">

        <div class="profile-content-header">
            <button class="profile-mobile-burger" id="profile-mobile-burger" aria-label="Menu" aria-expanded="false">
                <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </button>
            <h1 class="profile-content-title">{% block page_title %}{% endblock %}</h1>
        </div>

        {% block profile_body %}{% endblock %}

    </div>

</div>

{% endblock %}

{% block javascripts %}
<script>
(function () {
    const burger  = document.getElementById('profile-mobile-burger');
    const toggle  = document.getElementById('profile-sidebar-toggle');
    const sidebar = document.getElementById('profile-sidebar');
    const overlay = document.getElementById('profile-sidebar-overlay');
    const isMobile = () => window.innerWidth <= 768;

    function openSidebar() {
        sidebar.classList.add('open');
        if (isMobile()) {
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        if (burger) burger.setAttribute('aria-expanded', 'true');
    }

    function closeSidebar() {
        sidebar.classList.remove('open');
        overlay.classList.remove('active');
        document.body.style.overflow = '';
        if (burger) burger.setAttribute('aria-expanded', 'false');
    }

    // Mobile burger
    if (burger && sidebar) {
        burger.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar());
    }

    // Tablet toggle button
    if (toggle && sidebar) {
        toggle.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar());
    }

    if (overlay) overlay.addEventListener('click', closeSidebar);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSidebar(); });
})();
</script>
{% endblock %}