{% extends "admin/layout.html" %}
{% block title %}Language Management{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Language Management{% endtrans %}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Enable or disable site languages. English is always active and cannot be disabled.{% endtrans %}</p>
        </div>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    <form method="POST" action="{{ full_url('/admin/languages') }}" id="lang-form">
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-teal-500/5 to-primary/5 dark:from-teal-400/5 dark:to-primary-light/5 flex items-center justify-between">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-globe mr-2"></i>{% trans %}Site Languages{% endtrans %}</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Toggle which languages are available for content translation.{% endtrans %}</p>
                </div>
                <button type="submit" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-all" data-testid="btn-save-languages">
                    <i class="fa fa-save"></i>{% trans %}Save{% endtrans %}
                </button>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for lang in all_langs %}
                <div class="flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-all" data-testid="lang-row-{{ lang.code }}">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-lg bg-primary/10 dark:bg-primary-light/10 flex items-center justify-center text-lg font-bold text-primary dark:text-primary-light select-none">
                            {{ lang.code[:2].upper() }}
                        </div>
                        <div>
                            <div class="text-sm font-medium text-gray-900 dark:text-white">{{ lang.name }}</div>
                            <div class="text-xs text-gray-400 dark:text-gray-500 font-mono">{{ lang.code }}</div>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer {% if lang.code == 'en' %}opacity-50 pointer-events-none{% endif %}">
                        <input type="checkbox" name="active_langs" value="{{ lang.code }}"
                            {% if lang.is_active %}checked{% endif %}
                            {% if lang.code == 'en' %}disabled{% endif %}
                            class="sr-only peer"
                            data-testid="toggle-lang-{{ lang.code }}">
                        {% if lang.code == 'en' %}
                        <input type="hidden" name="active_langs" value="en">
                        {% endif %}
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 dark:peer-focus:ring-primary-light/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary dark:peer-checked:bg-primary-light"></div>
                        <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang.is_active %}{% trans %}Active{% endtrans %}{% else %}{% trans %}Inactive{% endtrans %}{% endif %}
                        </span>
                    </label>
                </div>
                {% endfor %}
            </div>
            <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 flex justify-end">
                <button type="submit" class="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-all">
                    <i class="fa fa-save"></i>{% trans %}Save Language Settings{% endtrans %}
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    document.querySelectorAll('.peer').forEach(function(toggle) {
        toggle.addEventListener('change', function() {
            var label = this.closest('label').querySelector('span');
            label.textContent = this.checked ? '{% trans %}Active{% endtrans %}' : '{% trans %}Inactive{% endtrans %}';
        });
    });
</script>
{% endblock %}