{% extends "base.html" %}

{% block body_class %}admin-layout{% endblock %}

{% block content %}
<div class="wrapper">
    <!-- Sidebar Overlay -->
    <div id="sidebar-overlay" class="sidebar-overlay"></div>
    
    <!-- Sidebar -->
    <nav id="sidebar" class="sidebar js-sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="{{ url_for('dashboard.index') }}">
                {% if app_settings and app_settings.logo %}
                    <img src="{{ url_for('static', filename=app_settings.logo) }}" alt="{{ app_settings.title }}" style="max-height: 40px; max-width: 180px; object-fit: contain;">
                    <span class="align-middle ms-2">{{ app_settings.title }}</span>
                {% else %}
                    <span class="align-middle"><i class="fas fa-chart-bar me-2"></i>{{ app_settings.title if app_settings else t('app.name', 'Survey Manager') }}</span>
                {% endif %}
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-item {% if request.endpoint == 'dashboard.index' %}active{% endif %}">
                    <a class="sidebar-link" href="{{ url_for('dashboard.index') }}">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">{{ t('nav.dashboard','Dashboard') }}</span>
                    </a>
                </li>

                <li class="sidebar-header">{{ t('nav.management','Management') }}</li>

                <li class="sidebar-item {% if 'user' in request.endpoint %}active{% endif %}">
                    <a class="sidebar-link" href="{{ url_for('user.index') }}">
                        <i class="align-middle fas fa-users"></i>
                        <span class="align-middle">{{ t('nav.users','Users') }}</span>
                    </a>
                </li>

                <!-- Settings group -->
                <li class="sidebar-item">
                    <a class="sidebar-link collapsed" data-bs-toggle="collapse" href="#settingsMenu" role="button" aria-expanded="{{ 'true' if ('settings' in request.endpoint or 'temperament' in request.endpoint or 'option' in request.endpoint or 'recommendation' in request.endpoint) else 'false' }}" aria-controls="settingsMenu">
                        <i class="align-middle fas fa-cog"></i>
                        <span class="align-middle">{{ t('nav.settings','Settings') }}</span>
                    </a>
                </li>
                <ul id="settingsMenu" class="list-unstyled collapse {% if 'settings' in request.endpoint or 'temperament' in request.endpoint or 'option' in request.endpoint or 'recommendation' in request.endpoint %}show{% endif %}">
                    <li class="sidebar-item {% if 'settings.general' in request.endpoint %}active{% endif %}">
                        <a class="sidebar-link" href="{{ url_for('settings.general') }}">
                            <i class="align-middle fas fa-sliders-h"></i>
                            <span class="align-middle">{{ t('settings.general','General') }}</span>
                        </a>
                    </li>
                    <li class="sidebar-item {% if 'temperament' in request.endpoint %}active{% endif %}">
                        <a class="sidebar-link" href="{{ url_for('temperament.index') }}">
                            <i class="align-middle fas fa-brain"></i>
                            <span class="align-middle">{{ t('nav.temperaments','Temperaments') }}</span>
                        </a>
                    </li>
                    <li class="sidebar-item {% if 'option' in request.endpoint %}active{% endif %}">
                        <a class="sidebar-link" href="{{ url_for('option.index') }}">
                            <i class="align-middle fas fa-list-alt"></i>
                            <span class="align-middle">{{ t('nav.options','Options') }}</span>
                        </a>
                    </li>
                    <li class="sidebar-item {% if 'recommendation' in request.endpoint %}active{% endif %}">
                        <a class="sidebar-link" href="{{ url_for('recommendation.index') }}">
                            <i class="align-middle fas fa-lightbulb"></i>
                            <span class="align-middle">{{ t('nav.recommendations','Recommendations') }}</span>
                        </a>
                    </li>
                </ul>

                <li class="sidebar-item {% if 'survey' in request.endpoint %}active{% endif %}">
                    <a class="sidebar-link" href="{{ url_for('survey.index') }}">
                        <i class="align-middle fas fa-poll"></i>
                        <span class="align-middle">{{ t('nav.surveys','Surveys') }}</span>
                    </a>
                </li>

                <li class="sidebar-item {% if 'project' in request.endpoint %}active{% endif %}">
                    <a class="sidebar-link" href="{{ url_for('project.index') }}">
                        <i class="align-middle fas fa-project-diagram"></i>
                        <span class="align-middle">{{ t('nav.projects','Projects') }}</span>
                    </a>
                </li>

                <li class="sidebar-item {% if 'people' in request.endpoint %}active{% endif %}">
                    <a class="sidebar-link" href="{{ url_for('people.index') }}">
                        <i class="align-middle fas fa-address-book"></i>
                        <span class="align-middle">{{ t('nav.people','People') }}</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Main content -->
    <div class="main">
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle js-sidebar-toggle">
                <i class="hamburger align-self-center"></i>
            </a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item d-flex align-items-center me-3">
                        <select class="form-select form-select-sm" style="min-width: 110px;" onchange="setLang(this.value)">
                            {% set current_lang = session.get('lang','es') %}
                            <option value="es" {{ 'selected' if current_lang=='es' else '' }}>{{ t('profile.language_es','Spanish') }}</option>
                            <option value="en" {{ 'selected' if current_lang=='en' else '' }}>{{ t('profile.language_en','English') }}</option>
                        </select>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="https://ui-avatars.com/api/?name={{ session.user_name|default('User') }}&background=007bff&color=fff" class="avatar img-fluid rounded me-2" alt="{{ session.user_name|default('User') }}">
                            <span class="text-dark d-none d-sm-inline">{{ session.user_name|default('User') }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" href="{{ url_for('auth.profile') }}">
                                <i class="fas fa-user me-2"></i>{{ t('nav.profile','Profile') }}
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#" onclick="confirmLogout()">
                                <i class="fas fa-sign-out-alt me-2"></i>{{ t('nav.logout','Log out') }}
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="content">
            <div class="container-fluid p-0">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

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

<script>
function confirmLogout() {
    Swal.fire({
        title: '{{ t('admin.confirm_logout.title','Are you sure?') }}',
        text: "{{ t('admin.confirm_logout.text','You will be logged out of the system') }}",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '{{ t('admin.confirm_logout.confirm','Yes, log out') }}'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "{{ url_for('auth.logout') }}";
        }
    });
}
</script>

{% endblock %}