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

{# Layout dell'area riservata: menu laterale + contenuto. Le pagine del backend estendono questo. #}
{% block stylesheets %}{{ parent() }}<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">{% endblock %}

{% set rotta = app.request.attributes.get('_route') %}

{% block body %}
<div class="app">
    <aside class="sidebar" id="sidebar">
        <a href="{{ path('dashboard') }}" class="sidebar__brand">
            <img src="{{ asset('img/logo.png') }}" alt="" class="sidebar__logo"> <span>Mostry</span>
            {# Chiude la tendina su mobile #}
            <button type="button" class="sidebar__close" id="sidebarClose" aria-label="Chiudi il menu"><i class="fa-solid fa-xmark"></i></button>
        </a>

        <nav class="sidebar__nav">
            <div class="sidebar__group">
                <span class="sidebar__label">Il mio spazio</span>
                <a href="{{ path('dashboard') }}" class="sidebar__link {{ rotta starts with 'bot_' or rotta == 'dashboard' ? 'is-active' : '' }}"><i class="fa-solid fa-robot fa-fw"></i> I miei assistenti</a>
                <a href="{{ path('documents') }}" class="sidebar__link {{ rotta starts with 'knowledge' or rotta == 'documents' ? 'is-active' : '' }}"><i class="fa-solid fa-folder-open fa-fw"></i> I miei documenti</a>
                <a href="{{ path('profile') }}" class="sidebar__link {{ rotta == 'profile' ? 'is-active' : '' }}"><i class="fa-solid fa-id-card fa-fw"></i> I miei dati</a>
                <a href="{{ path('invoices') }}" class="sidebar__link {{ rotta == 'invoices' ? 'is-active' : '' }}"><i class="fa-solid fa-file-invoice fa-fw"></i> Le mie fatture</a>
                {% if not is_granted('ROLE_VITALIZIO') %}
                    <a href="{{ path('subscription') }}" class="sidebar__link {{ rotta starts with 'subscription' ? 'is-active' : '' }}"><i class="fa-solid fa-credit-card fa-fw"></i> Abbonamento</a>
                {% endif %}
            </div>

            {% if is_granted('ROLE_ADMIN') %}
                <div class="sidebar__group">
                    <span class="sidebar__label">Amministrazione</span>
                    <a href="{{ path('admin') }}" class="sidebar__link {{ rotta == 'admin' ? 'is-active' : '' }}"><i class="fa-solid fa-users-gear fa-fw"></i> Utenti e bot</a>
                    <a href="{{ path('admin_plans') }}" class="sidebar__link {{ rotta == 'admin_plans' ? 'is-active' : '' }}"><i class="fa-solid fa-layer-group fa-fw"></i> Piani</a>
                    <a href="{{ path('admin_invoices') }}" class="sidebar__link {{ rotta == 'admin_invoices' ? 'is-active' : '' }}"><i class="fa-solid fa-receipt fa-fw"></i> Tutte le fatture</a>
                    <a href="{{ path('admin_documents') }}" class="sidebar__link {{ rotta == 'admin_documents' ? 'is-active' : '' }}"><i class="fa-solid fa-folder-tree fa-fw"></i> Tutti i documenti</a>
                    <a href="{{ path('admin_leads') }}" class="sidebar__link {{ rotta == 'admin_leads' ? 'is-active' : '' }}"><i class="fa-solid fa-comment-dots fa-fw"></i> Prove gratuite</a>
                </div>
            {% endif %}
        </nav>

        <div class="sidebar__footer">
            {% if app.user %}
                <div class="sidebar__user">
                    <span class="sidebar__username">{{ app.user.fullName }}</span>
                    <span class="sidebar__role">{{ app.user.tipologia ? app.user.tipologia.nome : 'Utente' }}</span>
                </div>
            {% endif %}
            <a href="{{ path('logout') }}" class="sidebar__logout"><i class="fa-solid fa-arrow-right-from-bracket"></i> Esci</a>
        </div>
    </aside>

    {# Sfondo scuro dietro la sidebar aperta su mobile: toccandolo si chiude #}
    <div class="sidebar-backdrop" id="sidebarBackdrop" hidden></div>

    <main class="app__main">
        {# Admin che sta guardando con gli occhi di un cliente: sempre ben visibile #}
        {% if is_granted('IS_IMPERSONATOR') %}
            <div class="impersona">
                <span>
                    <i class="fa-solid fa-user-secret"></i>
                    Stai vedendo Mostry come <b>{{ app.user.fullName }}</b> ({{ app.user.email }}).
                    Le modifiche che fai valgono per davvero.
                </span>
                <a href="{{ path('dashboard', {'_switch_user': '_exit'}) }}">
                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Torna al mio account
                </a>
            </div>
        {% endif %}

        <button class="sidebar__toggle" type="button" id="sidebarToggle" aria-label="Apri menu" aria-expanded="false"><i class="fa-solid fa-bars"></i> Menu</button>
        <div class="app__content">
            {{ include('_flashes.html.twig') }}
            {% block backend %}{% endblock %}
        </div>
    </main>
</div>

<script>
    (function () {
        var sidebar = document.getElementById('sidebar');
        var toggle = document.getElementById('sidebarToggle');
        var backdrop = document.getElementById('sidebarBackdrop');
        if (!sidebar || !toggle) return;

        function apri() {
            sidebar.classList.add('is-open');
            backdrop.hidden = false;
            toggle.setAttribute('aria-expanded', 'true');
        }
        function chiudi() {
            sidebar.classList.remove('is-open');
            backdrop.hidden = true;
            toggle.setAttribute('aria-expanded', 'false');
        }

        toggle.addEventListener('click', function () {
            sidebar.classList.contains('is-open') ? chiudi() : apri();
        });
        backdrop.addEventListener('click', chiudi);
        // Il pulsante X è dentro il link del logo: blocco la navigazione e chiudo
        var close = document.getElementById('sidebarClose');
        if (close) close.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); chiudi(); });
        // Toccando una voce del menu si chiude e si naviga
        sidebar.addEventListener('click', function (e) {
            if (e.target.closest('a')) chiudi();
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && sidebar.classList.contains('is-open')) chiudi();
        });
    })();
</script>
{% endblock %}