{% set lang = request.cookies.get('panel_lang', 'es') %}
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ "Idiomas - Bots de Traducción" | translate(lang) }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">
                <i class="bi bi-translate"></i> {{ "Bots de Traducción" | translate(lang) }}
            </a>
            <div class="d-flex align-items-center">
                <div class="dropdown me-3">
                    <button class="btn btn-outline-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-translate"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item {{ 'active' if lang == 'es' }}" href="/set-lang/es">Español</a></li>
                        <li><a class="dropdown-item {{ 'active' if lang == 'en' }}" href="/set-lang/en">English</a></li>
                        <li><a class="dropdown-item {{ 'active' if lang == 'pt' }}" href="/set-lang/pt">Português</a></li>
                    </ul>
                </div>
                <a href="/dashboard" class="btn btn-outline-light btn-sm me-2">{{ "Dashboard" | translate(lang) }}</a>
                <a href="/logout" class="btn btn-outline-light btn-sm">{{ "Cerrar Sesión" | translate(lang) }}</a>
            </div>
        </div>
    </nav>

    <div class="modal fade" id="flagPicker" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ "Seleccionar Bandera" | translate(lang) }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-1" id="flagGrid"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-5">
        <h2 class="mb-4">🌍 {{ "Gestión de Idiomas" | translate(lang) }}</h2>
        
        {% if request.query_params.get('success') %}
        <div class="alert alert-success">{{ "Configuración guardada correctamente." | translate(lang) }}</div>
        {% endif %}
        {% if request.query_params.get('synced') %}
        <div class="alert alert-success">{{ "Idiomas sincronizados desde LibreTranslate." | translate(lang) }}</div>
        {% endif %}
        {% if request.query_params.get('error') %}
        <div class="alert alert-danger">{{ "Error al sincronizar. Verifica la URL de LibreTranslate." | translate(lang) }}</div>
        {% endif %}
        
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-cloud-download"></i> {{ "Sincronizar con LibreTranslate" | translate(lang) }}</h5>
                <form method="post" action="/languages/sync">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-arrow-repeat"></i> {{ "Sincronizar idiomas" | translate(lang) }}
                    </button>
                </form>
            </div>
            <div class="card-body">
                <p class="text-muted">{{ "URL de LibreTranslate:" | translate(lang) }} <code>{{ libretranslate_url }}</code></p>
                <p class="text-muted"> {{ "Idiomas disponibles:" | translate(lang) }} {{ available_languages|length }}</p>
            </div>
        </div>

        {% if available_languages|length > 0 %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">🚩 {{ "Editar Banderas" | translate(lang) }}</h5>
            </div>
            <div class="card-body">
                <form method="post" action="/languages/flags">
                    <p class="text-muted">{{ "Haz clic en el botón de bandera para seleccionar una, o escribe directamente el emoji." | translate(lang) }}</p>
                    <div class="row">
                        {% for lang_item in available_languages %}
                        <div class="col-md-4 col-sm-6 mb-3">
                            <div class="input-group">
                                <button type="button" class="btn btn-outline-secondary flag-btn" 
                                        data-target="flag_{{ lang_item.code }}" 
                                        style="font-size: 1.5rem;">
                                    {{ lang_item.flag if lang_item.flag else '🏳️' }}
                                </button>
                                <input type="text" class="form-control" 
                                       name="flag_{{ lang_item.code }}" 
                                       id="flag_{{ lang_item.code }}"
                                       value="{{ lang_item.flag }}"
                                       placeholder="🇪🇸"
                                       maxlength="10">
                                <span class="input-group-text">{{ lang_item.code }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <button type="submit" class="btn btn-warning mt-2">
                        <i class="bi bi-flag"></i> {{ "Guardar Banderas" | translate(lang) }}
                    </button>
                </form>
            </div>
        </div>
        {% endif %}

        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-discord"></i> {{ "Idiomas para Discord" | translate(lang) }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="/languages/bot">
                            <input type="hidden" name="bot_type" value="discord">
                            {% if available_languages|length == 0 %}
                            <p class="text-muted">{{ "No hay idiomas disponibles. Sincroniza primero." | translate(lang) }}</p>
                            {% else %}
                            {% for lang_item in available_languages %}
                            <div class="form-check d-flex align-items-center">
                                <input class="form-check-input" type="checkbox" 
                                       name="lang_codes" value="{{ lang_item.code }}" 
                                       id="discord_{{ lang_item.code }}"
                                       {% if lang_item.code in discord_languages %}checked{% endif %}>
                                <label class="form-check-label ms-2" for="discord_{{ lang_item.code }}" style="font-size: 1.5rem;">
                                    {{ lang_item.flag if lang_item.flag else '🏳️' }}
                                </label>
                                <span class="ms-2">{{ lang_item.name }} ({{ lang_item.code }})</span>
                            </div>
                            {% endfor %}
                            <button type="submit" class="btn btn-primary mt-3">{{ "Guardar para Discord" | translate(lang) }}</button>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="bi bi-telegram"></i> {{ "Idiomas para Telegram" | translate(lang) }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="/languages/bot">
                            <input type="hidden" name="bot_type" value="telegram">
                            {% if available_languages|length == 0 %}
                            <p class="text-muted">{{ "No hay idiomas disponibles. Sincroniza primero." | translate(lang) }}</p>
                            {% else %}
                            {% for lang_item in available_languages %}
                            <div class="form-check d-flex align-items-center">
                                <input class="form-check-input" type="checkbox" 
                                       name="lang_codes" value="{{ lang_item.code }}" 
                                       id="telegram_{{ lang_item.code }}"
                                       {% if lang_item.code in telegram_languages %}checked{% endif %}>
                                <label class="form-check-label ms-2" for="telegram_{{ lang_item.code }}" style="font-size: 1.5rem;">
                                    {{ lang_item.flag if lang_item.flag else '🏳️' }}
                                </label>
                                <span class="ms-2">{{ lang_item.name }} ({{ lang_item.code }})</span>
                            </div>
                            {% endfor %}
                            <button type="submit" class="btn btn-info mt-3 text-white">{{ "Guardar para Telegram" | translate(lang) }}</button>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {% if available_languages|length > 0 %}
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">📋 {{ "Idiomas disponibles en LibreTranslate" | translate(lang) }}</h5>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>{{ "Bandera" | translate(lang) }}</th>
                            <th>{{ "Código" | translate(lang) }}</th>
                            <th>{{ "Nombre" | translate(lang) }}</th>
                            <th>Discord</th>
                            <th>Telegram</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for lang_item in available_languages %}
                        <tr>
                            <td style="font-size: 1.5rem;">{{ lang_item.flag if lang_item.flag else '🏳️' }}</td>
                            <td><code>{{ lang_item.code }}</code></td>
                            <td>{{ lang_item.name }}</td>
                            <td>
                                {% if lang_item.code in discord_languages %}
                                <i class="bi bi-check-circle-fill text-success"></i>
                                {% else %}
                                <i class="bi bi-x-circle text-secondary"></i>
                                {% endif %}
                            </td>
                            <td>
                                {% if lang_item.code in telegram_languages %}
                                <i class="bi bi-check-circle-fill text-success"></i>
                                {% else %}
                                <i class="bi bi-x-circle text-secondary"></i>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const flags = [
            '🇬🇧','🇺🇸','🇪🇸','🇫🇷','🇩🇪','🇮🇹','🇵🇹','🇧🇷','🇷🇺','🇯🇵','🇰🇷','🇨🇳',
            '🇦🇪','🇸🇦','🇮🇳','🇹🇭','🇻🇳','🇮🇩','🇵🇭','🇲🇾','🇸🇬','🇦🇺','🇳🇿','🇨🇦',
            '🇲🇽','🇦🇷','🇨🇴','🇨🇱','🇵🇪','🇻🇪','🇵🇾','🇺🇾','🇧🇴','🇪🇨','🇵🇦','🇨🇷',
            '🇨🇺','🇩🇴','🇭🇳','🇸🇻','🇬🇹','🇳🇮','🇱🇧','🇵🇸','🇯🇲','🇹🇹','🇧🇧','🇩🇲',
            '🇪🇪','🇱🇻','🇱🇹','🇺🇦','🇧🇾','🇰🇿','🇦🇲','🇬🇪','🇦🇿','🇰🇬','🇹🇯','🇹🇲',
            '🇭🇷','🇷🇸','🇸🇮','🇲🇪','🇦🇱','🇲🇰','🇧🇦','🇲🇷','🇱🇾','🇹🇳','🇸🇳','🇲🇱'
        ];
        
        let currentTarget = null;
        const modal = new bootstrap.Modal(document.getElementById('flagPicker'));
        const flagGrid = document.getElementById('flagGrid');
        
        flags.forEach(flag => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-outline-secondary col-2';
            btn.style.fontSize = '1.5rem';
            btn.textContent = flag;
            btn.onclick = () => {
                if (currentTarget) {
                    document.getElementById(currentTarget).value = flag;
                    const btn = document.querySelector(`button[data-target="${currentTarget}"]`);
                    btn.textContent = flag;
                }
                modal.hide();
            };
            flagGrid.appendChild(btn);
        });
        
        document.querySelectorAll('.flag-btn').forEach(btn => {
            btn.onclick = () => {
                currentTarget = btn.getAttribute('data-target');
                modal.show();
            };
        });
    </script>
</body>
</html>
