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

{% block header_user %}
    <div class="site-header__user">
        <span>{{ app.user.email }}</span>
        <a href="{{ path('_logout_main') }}">{{ 'nav.logout'|trans }}</a>
    </div>
{% endblock %}

{# Flash messages are rendered inside .adm__main below instead of base.html.twig's
   site-wide .public-shell wrapper, so they sit alongside the sidebar layout. #}
{% block flash_messages %}{% endblock %}

{% block body %}
    <div class="adm">
        <div class="adm__wrap">
            <aside class="adm__sidebar">
                <nav class="adm__nav">
                    <span class="adm__nav-title">{{ 'nav.admin'|trans }}</span>
                    <a href="{{ path('admin_articles_index') }}" class="adm__nav-link {{ active_nav == 'articles' ? 'adm__nav-link--active' }}">{{ 'nav.articles'|trans }}</a>
                    <a href="{{ path('admin_terms_index') }}" class="adm__nav-link {{ active_nav == 'terms' ? 'adm__nav-link--active' }}">{{ 'nav.taxonomy'|trans }}</a>
                    {% if plugin_enabled('pages') %}
                        <a href="{{ path('admin_pages_index') }}" class="adm__nav-link {{ active_nav == 'pages' ? 'adm__nav-link--active' }}">Páginas</a>
                    {% endif %}
                    <a href="{{ path('admin_users_index') }}" class="adm__nav-link {{ active_nav == 'users' ? 'adm__nav-link--active' }}">{{ 'nav.users'|trans }}</a>
                    {% if is_granted('ROLE_ADMIN') %}
                        <a href="{{ path('admin_plugins_index') }}" class="adm__nav-link {{ active_nav == 'plugins' ? 'adm__nav-link--active' }}">{{ 'nav.plugins'|trans }}</a>
                        <a href="{{ path('admin_settings_edit') }}" class="adm__nav-link {{ active_nav == 'settings' ? 'adm__nav-link--active' }}">{{ 'nav.settings'|trans }}</a>
                        {% if plugin_enabled('logging') %}
                            <a href="{{ path('admin_logs_index') }}" class="adm__nav-link {{ active_nav == 'logs' ? 'adm__nav-link--active' }}">Logs</a>
                        {% endif %}
                        {% if plugin_enabled('cron') %}
                            <a href="{{ path('admin_cron_index') }}" class="adm__nav-link {{ active_nav == 'cron' ? 'adm__nav-link--active' }}">Cron</a>
                        {% endif %}
                        {% if plugin_enabled('statistics') %}
                            <a href="{{ path('admin_statistics_index') }}" class="adm__nav-link {{ active_nav == 'statistics' ? 'adm__nav-link--active' }}">Estadísticas</a>
                        {% endif %}
                        {% if plugin_enabled('blocks') %}
                            <a href="{{ path('admin_blocks_index') }}" class="adm__nav-link {{ active_nav == 'blocks' ? 'adm__nav-link--active' }}">Bloques</a>
                        {% endif %}
                    {% endif %}
                </nav>
            </aside>

            <main class="adm__main">
                {% for message in app.flashes('success') %}
                    <div class="adm__toast adm__toast--ok">{{ message }}</div>
                {% endfor %}
                {% for message in app.flashes('error') %}
                    <div class="adm__toast adm__toast--err">{{ message }}</div>
                {% endfor %}

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

    <div id="ops-panel" class="ops-panel" hidden>
        <div class="ops-panel__header">
            <span>{{ 'admin.operations.title'|trans }}</span>
            <button type="button" id="ops-panel-toggle" class="ops-panel__toggle" aria-label="{{ 'admin.operations.collapse'|trans }}">&minus;</button>
        </div>
        <ul class="ops-panel__list" id="ops-panel-list"></ul>
    </div>

    <script>
    (function () {
        var panel = document.getElementById('ops-panel');
        var list = document.getElementById('ops-panel-list');
        var toggle = document.getElementById('ops-panel-toggle');
        var collapsed = false;

        toggle.addEventListener('click', function () {
            collapsed = !collapsed;
            panel.classList.toggle('ops-panel--collapsed', collapsed);
            toggle.textContent = collapsed ? '+' : '−';
        });

        function escapeHtml(value) {
            var div = document.createElement('div');
            div.textContent = value;
            return div.innerHTML;
        }

        function render(items) {
            if (!items || items.length === 0) {
                panel.hidden = true;
                return;
            }
            panel.hidden = false;

            list.innerHTML = items.map(function (item) {
                var title = item.status === 'failed' && item.errorMessage ? ' title="' + escapeHtml(item.errorMessage) + '"' : '';
                return '<li class="ops-panel__item ops-panel__item--' + item.status + '"' + title + '>'
                    + '<span class="ops-panel__dot"></span>'
                    + '<span class="ops-panel__label">' + escapeHtml(item.label) + '</span>'
                    + '</li>';
            }).join('');
        }

        function poll() {
            fetch('{{ path('admin_operations_list') }}', {headers: {Accept: 'application/json'}})
                .then(function (response) { return response.ok ? response.json() : []; })
                .then(render)
                .catch(function () {});
        }

        poll();
        setInterval(poll, 3000);
    })();
    </script>
{% endblock %}