<!--
Archivo: layout.html
Ruta: src\templates\layout.html
Lenguaje: HTML
-->

<!DOCTYPE html>
<html data-bs-theme="light" lang="es-MX">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{% block title %}{{ _('Layout - IGSA') }}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Montserrat.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/simple-line-icons.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/baguetteBox.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vanilla-zoom.min.css') }}">
    <!-- Para Font Awesome 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- ⚠️ Cargar al final para que tenga prioridad -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">

    <!-- Importa el bundle principal generado -->
    <script type="module" src="{{ url_for('static', filename='stencil-components/stencil-components/stencil-components.esm.js') }}"></script>
    <script nomodule src="{{ url_for('static', filename='stencil-components/stencil-components/stencil-components.js') }}"></script>

</head>

<body>
    <nav class="navbar navbar-expand-lg fixed-top bg-body clean-navbar">
        <div class="container">
            <a class="navbar-brand logo" href="{{ url_for('index') }}">{{ _('Operaciones IGSA') }}</a>
            <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1">
                <span class="visually-hidden">{{ _('Toggle navigation') }}</span>
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="{{ url_for('Clientes') }}">{{ _('Clientes') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('Direccion') }}">{{ _('Dirección') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('Ventas') }}">{{ _('Ventas') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('Servicios') }}">{{ _('Servicios') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('Operaciones') }}">{{ _('Operaciones') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('SyC') }}">{{ _('SyC') }}</a></li>
                    <!-- Selector de idioma -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ _('Idioma') }}
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="languageDropdown">
                            <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='es') }}">{{ _('Español') }}</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='en') }}">{{ _('English') }}</a></li>
                        </ul>
                    </li>
                    <!-- Usuario y Botón de Cierre de Sesión Mejorado -->
                    {% if session.get('user_id') %}
                    <li class="nav-item">
                        <a class="nav-link logout-btn" href="{{ url_for('logout_auth') }}">
                            <i class="fas fa-sign-out-alt me-1"></i>{{ _('Salir') }}
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <main class="page">
        {% block content %}{% endblock %}
    </main>

    <footer class="page-footer dark">
        <div class="container footer-content">
            <div class="row">
                <div class="col-sm-3">
                    <h5>{{ _('General') }}</h5>
                    <ul>
                        <li><a href="#">{{ _('Inicio') }}</a></li>
                        <li><a href="#">{{ _('Inicio de Sesión') }}</a></li>
                        <li><a href="#">{{ _('Descargas') }}</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>{{ _('Nosotros') }}</h5>
                    <ul>
                        <li><a href="#">{{ _('Información de la compañía') }}</a></li>
                        <li><a href="#">{{ _('Contáctanos') }}</a></li>
                        <li><a href="#">{{ _('Opiniones') }}</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>{{ _('Soporte') }}</h5>
                    <ul>
                        <li><a href="#">{{ _('Soporte') }}</a></li>
                        <li><a href="#">{{ _('Ayudas') }}</a></li>
                        <li><a href="#">{{ _('Foros') }}</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>{{ _('Legal') }}</h5>
                    <ul>
                        <li><a href="#">{{ _('Términos de servicio') }}</a></li>
                        <li><a href="#">{{ _('Términos de uso') }}</a></li>
                        <li><a href="#">{{ _('Políticas de privacidad') }}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            <p>© 2025 {{ _('Copyright Text') }}</p>
        </div>
    </footer>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/baguetteBox.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vanilla-zoom.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
</body>

</html>