{% extends "admin/layout.html" %}
{% block title %}Page Content Manager{% endblock %}

{% block body %}
<div class="space-y-6">
    <div>
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Page Content Manager{% endtrans %}</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, head tags, content, and FAQs for each page. Manage translations per language.{% endtrans %}</p>
    </div>

    <div class="flex flex-wrap items-center gap-3 mb-4">
        <input type="text" id="search-pages" placeholder="{% trans %}Search pages...{% endtrans %}"
            class="w-full md:w-72 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all"
            data-testid="input-search-pages">
        {% if not session.get('editor_login') or session.get('login') %}
        <div class="relative" id="bulk-csv-wrap">
            <button type="button" onclick="document.getElementById('bulk-csv-dropdown').classList.toggle('hidden')"
                    class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-sm hover:border-primary dark:hover:border-primary-light hover:text-primary dark:hover:text-primary-light transition-all"
                    data-testid="btn-bulk-csv">
                <i class="fa fa-file-csv text-xs"></i>
                {% trans %}Bulk CSV{% endtrans %}
                <i class="fa fa-chevron-down text-[10px] ml-0.5"></i>
            </button>
            <div id="bulk-csv-dropdown" class="hidden absolute left-0 mt-1 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20 overflow-hidden">
                <button type="button" onclick="document.getElementById('bulk-csv-dropdown').classList.add('hidden'); document.getElementById('export-translations-modal').classList.remove('hidden')"
                        class="w-full flex items-center gap-2.5 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                        data-testid="btn-export-translations">
                    <i class="fa fa-download text-primary dark:text-primary-light w-4"></i>
                    {% trans %}Export All Translations{% endtrans %}
                </button>
                <a href="{{ url('/admin/translations/template') }}"
                   class="flex items-center gap-2.5 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-t border-gray-100 dark:border-gray-800"
                   data-testid="btn-translations-template">
                    <i class="fa fa-file-alt text-gray-400 dark:text-gray-500 w-4"></i>
                    {% trans %}Download Empty Template{% endtrans %}
                </a>
                <button type="button" onclick="document.getElementById('bulk-csv-dropdown').classList.add('hidden'); document.getElementById('import-translations-modal').classList.remove('hidden')"
                        class="w-full flex items-center gap-2.5 px-4 py-3 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-t border-gray-100 dark:border-gray-800"
                        data-testid="btn-import-translations">
                    <i class="fa fa-upload text-gray-400 dark:text-gray-500 w-4"></i>
                    {% trans %}Import All Translations{% endtrans %}
                </button>
            </div>
        </div>
        {% endif %}
    </div>

    <div data-section="static" class="page-section 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-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5 flex items-center justify-between gap-3">
            <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-file-alt mr-2"></i>{% trans %}Static Pages{% endtrans %}</h3>
            <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="page:" data-parts="" data-label="Static Pages"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for page in static_pages %}
            <div class="page-item flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-{{ page.id }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}" class="flex items-center gap-3 flex-1 min-w-0">
                    <div class="w-10 h-10 rounded-lg bg-primary/10 dark:bg-primary-light/10 flex items-center justify-center flex-shrink-0">
                        <i class="fa {{ page.icon }} text-primary dark:text-primary-light"></i>
                    </div>
                    <div class="min-w-0">
                        <span class="text-sm font-medium text-gray-900 dark:text-white page-label">{{ page.label }}</span>
                        <div class="flex items-center gap-1.5 mt-0.5 flex-wrap">
                            <span class="text-xs text-gray-400 dark:text-gray-500">{{ page.id }}</span>
                            {% set page_langs = completed_translations.get(page.id) or [] %}
                            {% for lang in non_en_langs %}
                            {% if lang in page_langs %}
                            <a href="{{ full_url('/admin/pages/translate') }}?page_id={{ page.id }}&lang={{ lang }}"
                               onclick="event.stopPropagation()"
                               class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-800/40 transition-colors"
                               title="{% trans %}Translation complete{% endtrans %} — click to edit">
                                <i class="fa fa-check text-[8px]"></i> {{ lang | upper }}
                            </a>
                            {% else %}
                            <a href="{{ full_url('/admin/pages/translate') }}?page_id={{ page.id }}&lang={{ lang }}"
                               onclick="event.stopPropagation()"
                               class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-amber-100 dark:hover:bg-amber-900/20 hover:text-amber-600 dark:hover:text-amber-400 transition-colors"
                               title="{% trans %}Not yet translated{% endtrans %} — click to translate">
                                {{ lang | upper }}
                            </a>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </a>
                <div class="flex items-center gap-2 ml-3 flex-shrink-0">
                    {% if page.id in edited_pages %}
                    <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium hidden sm:inline">{% trans %}Customized{% endtrans %}</span>
                    {% endif %}
                    <a href="{{ full_url('/admin/pages/translate') }}?page_id={{ page.id }}"
                       class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium text-primary dark:text-primary-light bg-primary/8 hover:bg-primary/15 dark:bg-primary-light/8 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                       onclick="event.stopPropagation()"
                       title="{% trans %}Translate this page{% endtrans %}">
                        <i class="fa fa-language"></i>
                        {% trans %}Translate{% endtrans %}
                    </a>
                    <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                       class="inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                       onclick="event.stopPropagation()"
                       title="{% trans %}Download CSV (English){% endtrans %}">
                        <i class="fa fa-download text-[10px]"></i>
                    </a>
                    <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}" class="text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors">
                        <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    {% if converter_category_pages | length %}
    <div data-section="converter-categories" class="page-section 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-blue-500/5 to-primary/5 dark:from-blue-400/5 dark:to-primary-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-folder mr-2"></i>{% trans %}Converter Categories{% endtrans %} ({{ converter_category_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, OG image, category descriptions, long descriptions and FAQs for converter category pages (list.html){% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="converter" data-parts="2" data-label="Converter Categories"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[500px] overflow-y-auto">
            {% for page in converter_category_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-convcat-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="{{ page.icon }} text-sm text-blue-500 dark:text-blue-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if converter_pages | length %}
    <div data-section="converter-extensions" class="page-section 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-accent/5 to-primary/5 dark:from-accent-light/5 dark:to-primary-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-exchange-alt mr-2"></i>{% trans %}Converter Extensions{% endtrans %} ({{ converter_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, OG image, filetype descriptions, format definitions and FAQs for each converter page (converter.html){% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="converter" data-parts="3" data-label="Converter Extensions"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[500px] overflow-y-auto">
            {% for page in converter_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-conv-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="{{ page.icon }} text-sm text-accent dark:text-accent-light"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if converter_pair_groups | length %}
    <div data-section="converter-pairs" class="page-section 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-rose-500/5 to-primary/5 dark:from-rose-400/5 dark:to-primary-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-right-left mr-2"></i>{% trans %}Converter Pair Pages{% endtrans %}</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, and FAQs for individual file conversion pair pages (e.g. MP4 to MP3). Each pair maps to a URL like /convert/mp4-to-mp3.{% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="converter" data-parts="" data-label="Converter Pair Pages"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for group in converter_pair_groups %}
            <details class="group/det">
                <summary class="flex items-center justify-between px-6 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all select-none">
                    <div class="flex items-center gap-3">
                        <i class="fa {{ group.icon }} text-sm text-rose-500 dark:text-rose-400"></i>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ group.label }}</span>
                        <span class="text-xs text-gray-400 dark:text-gray-500">({{ group.pairs | length }} {% trans %}pairs{% endtrans %})</span>
                    </div>
                    <i class="fa fa-chevron-down text-xs text-gray-400 dark:text-gray-500 group-open/det:rotate-180 transition-transform"></i>
                </summary>
                <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto bg-gray-50/50 dark:bg-gray-800/30">
                    {% for pair in group.pairs %}
                    <div class="page-item flex items-center hover:bg-white dark:hover:bg-gray-800/70 transition-all group"
                        data-testid="link-page-pair-{{ pair.id | replace(':', '-') }}">
                        <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ pair.id }}"
                            class="flex-1 flex items-center justify-between px-8 py-2.5">
                            <div class="flex items-center gap-3 flex-wrap">
                                <i class="fa fa-right-left text-xs text-rose-400 dark:text-rose-500"></i>
                                <span class="text-sm text-gray-600 dark:text-gray-400 page-label">{{ pair.label }}</span>
                                {% if pair.slug %}
                                <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 font-mono">/convert/{{ pair.slug }}</span>
                                {% endif %}
                            </div>
                            <div class="flex items-center gap-2">
                                {% if pair.id in edited_pages %}
                                <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                                {% endif %}
                                <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                            </div>
                        </a>
                        <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ pair.id }}&lang=en"
                           class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                           title="{% trans %}Download CSV (English){% endtrans %}">
                            <i class="fa fa-download text-[10px]"></i>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </details>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if generator_category_pages | length %}
    <div data-section="generator-categories" class="page-section 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-purple-500/5 to-secondary/5 dark:from-purple-400/5 dark:to-secondary-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-folder mr-2"></i>{% trans %}Generator Categories{% endtrans %} ({{ generator_category_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, OG image, category descriptions and FAQs for generator listing pages (list2.html){% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="generator" data-parts="" data-label="Generator Categories"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto">
            {% for page in generator_category_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-gencat-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="{{ page.icon }} text-sm text-purple-500 dark:text-purple-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if hash_pages | length %}
    <div data-section="hash-generators" class="page-section 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-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-hashtag mr-2"></i>{% trans %}Hash Generators{% endtrans %} ({{ hash_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, OG image, definitions and FAQs for hash generator pages (hash.html){% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="hash" data-parts="" data-label="Hash Generators"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto">
            {% for page in hash_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-hash-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="{{ page.icon }} text-sm text-secondary dark:text-secondary-light"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if format_definition_pages | length %}
    <div data-section="format-definitions" class="page-section 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-cyan-500/5 to-blue-500/5 dark:from-cyan-400/5 dark:to-blue-400/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-file-lines mr-2"></i>{% trans %}Format Definitions{% endtrans %} ({{ format_definition_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit format definitions for all file extensions and hash types{% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="filetype" data-parts="" data-label="Format Definitions"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[500px] overflow-y-auto">
            {% for page in format_definition_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-fmt-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="fa {{ page.icon }} text-sm text-cyan-500 dark:text-cyan-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if currency_pages | length %}
    <div data-section="currencies" class="page-section 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-yellow-500/5 to-accent/5 dark:from-yellow-400/5 dark:to-accent-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-coins mr-2"></i>{% trans %}Currency Pages{% endtrans %} ({{ currency_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description, OG image and FAQs for currency converter pages{% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="currency" data-parts="2" data-label="Currency Pages"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto">
            {% for page in currency_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-curr-{{ loop.index }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="fa {{ page.icon }} text-sm text-yellow-500 dark:text-yellow-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if currency_base_pages | length %}
    <div data-section="currency-base" class="page-section 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-yellow-500/5 to-accent/5 dark:from-yellow-400/5 dark:to-accent-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-money-bill-wave mr-2"></i>{% trans %}Per-Currency Pages{% endtrans %} ({{ currency_base_pages | length }})</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description and FAQs for individual currency pages (currency:code){% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="currency" data-parts="2" data-label="Per-Currency Pages"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto">
            {% for page in currency_base_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-page-currency-{{ page.code | lower }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="fa {{ page.icon }} text-sm text-yellow-500 dark:text-yellow-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        {% if page.id in edited_pages %}
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        {% endif %}
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# ── Currency Pair Pages ─────────────────────────────────────────────── #}
    <div data-section="currency-pairs" class="page-section 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-amber-500/5 to-accent/5 dark:from-amber-400/5 dark:to-accent-light/5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white">
                        <i class="fa fa-exchange-alt mr-2"></i>{% trans %}Currency Pair Pages{% endtrans %}
                        {% if currency_pair_pages %}<span class="text-sm font-normal text-gray-500">({{ currency_pair_pages | length }} {% trans %}customized{% endtrans %})</span>{% endif %}
                    </h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Edit title, description and FAQs for individual currency converter pair pages (e.g. USD→EUR). Type two currency codes below to open or create a pair page.{% endtrans %}</p>
                </div>
                <button type="button" class="cat-csv-btn flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-primary/30 text-primary dark:text-primary-light hover:bg-primary/8 dark:hover:bg-primary-light/8 transition-all" data-prefix="currency" data-parts="3" data-label="Currency Pair Pages"><i class="fa fa-download text-[10px]"></i> {% trans %}CSV{% endtrans %}</button>
            </div>
        </div>

        {# Jump-to-pair search form #}
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/30">
            <form id="currency-pair-search-form" method="get" action="{{ full_url('/admin/pages/edit') }}" class="flex flex-wrap gap-3 items-end">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Base Currency{% endtrans %}</label>
                    <select name="_base_sel" id="pair-base" class="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white min-w-[130px]">
                        <option value="">-- {% trans %}Select{% endtrans %} --</option>
                        {% for code in currency_code_list %}
                        <option value="{{ code | upper }}">{{ code | upper }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Target Currency{% endtrans %}</label>
                    <select name="_target_sel" id="pair-target" class="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white min-w-[130px]">
                        <option value="">-- {% trans %}Select{% endtrans %} --</option>
                        {% for code in currency_code_list %}
                        <option value="{{ code | upper }}">{{ code | upper }}</option>
                        {% endfor %}
                    </select>
                </div>
                <input type="hidden" name="page_id" id="pair-page-id-input" value="">
                <button type="button" id="go-to-pair-btn"
                    class="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark transition-colors">
                    <i class="fa fa-edit mr-1"></i>{% trans %}Open / Edit Pair{% endtrans %}
                </button>
            </form>
        </div>

        {# List of already-customized pairs #}
        {% if currency_pair_pages %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800 max-h-[400px] overflow-y-auto">
            {% for page in currency_pair_pages %}
            <div class="page-item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all group"
                data-testid="link-pair-{{ page.base | lower }}-{{ page.target | lower }}">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page.id }}"
                    class="flex-1 flex items-center justify-between px-6 py-3">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-exchange-alt text-sm text-amber-500 dark:text-amber-400"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300 page-label">{{ page.label }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs px-2 py-0.5 rounded-full bg-accent/10 text-accent dark:text-accent-light font-medium">{% trans %}Customized{% endtrans %}</span>
                        <i class="fa fa-chevron-right text-xs text-gray-300 dark:text-gray-600 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                    </div>
                </a>
                <a href="{{ full_url('/admin/pages/content-csv') }}?page_id={{ page.id }}&lang=en"
                   class="flex-shrink-0 mr-4 inline-flex items-center justify-center w-7 h-7 rounded-lg text-xs text-primary dark:text-primary-light hover:bg-primary/15 dark:hover:bg-primary-light/15 transition-all opacity-0 group-hover:opacity-100"
                   title="{% trans %}Download CSV (English){% endtrans %}">
                    <i class="fa fa-download text-[10px]"></i>
                </a>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-5 text-sm text-gray-500 dark:text-gray-400">
            {% trans %}No pair pages customized yet. Use the search above to open and edit a pair.{% endtrans %}
        </div>
        {% endif %}
    </div>

</div>
{% endblock %}

{% block page_scripts %}
<script>
    $(function() {
        var params = new URLSearchParams(window.location.search);
        var section = params.get('section');

        if (section) {
            $(".page-section").each(function() {
                if ($(this).data("section") !== section) {
                    $(this).hide();
                }
            });
            var target = $('[data-section="' + section + '"]');
            if (target.length) {
                target.show();
                $('html, body').animate({ scrollTop: target.offset().top - 100 }, 200);
            }
        }

        // Currency pair "Open / Edit Pair" button
        $("#go-to-pair-btn").on("click", function() {
            var base = $("#pair-base").val();
            var target = $("#pair-target").val();
            if (!base || !target) {
                toastr.warning("{% trans %}Please select both a base and a target currency.{% endtrans %}");
                return;
            }
            if (base === target) {
                toastr.warning("{% trans %}Base and target currencies must be different.{% endtrans %}");
                return;
            }
            var pageId = "currency:" + base.toLowerCase() + ":" + target.toLowerCase();
            window.location.href = "{{ full_url('/admin/pages/edit') }}?page_id=" + encodeURIComponent(pageId);
        });

        $("#search-pages").on("input", function() {
            var query = $(this).val().toLowerCase();
            if (query.length > 0) {
                $(".page-section").show();
            } else if (section) {
                $(".page-section").each(function() {
                    if ($(this).data("section") !== section) {
                        $(this).hide();
                    }
                });
            }
            $(".page-item").each(function() {
                var label = $(this).find(".page-label").text().toLowerCase();
                $(this).toggle(label.indexOf(query) !== -1);
            });
        });

        $(document).on("click", function(e) {
            if (!$(e.target).closest("#bulk-csv-wrap").length) {
                $("#bulk-csv-dropdown").addClass("hidden");
            }
        });
    });
</script>

<div id="export-translations-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">
                <i class="fa fa-download mr-2 text-primary dark:text-primary-light"></i>{% trans %}Export All Translations{% endtrans %}
            </h3>
            <button type="button" onclick="document.getElementById('export-translations-modal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <form id="export-translations-form" method="get" action="{{ url('/admin/translations/export') }}" class="p-6 space-y-4">
            <div class="rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/40 p-3 space-y-1">
                <p class="text-xs text-blue-600 dark:text-blue-400">
                    <strong>{% trans %}Single language{% endtrans %}:</strong> {% trans %}exports <em>all</em> pages with the English original in an <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">english_text</code> column so translators have full context. Already-translated rows are pre-filled.{% endtrans %}
                </p>
                <p class="text-xs text-blue-600 dark:text-blue-400">
                    <strong>{% trans %}All languages{% endtrans %}:</strong> {% trans %}exports every existing translated row with its English reference.{% endtrans %}
                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Language{% endtrans %}</label>
                <select name="lang" class="w-full px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                    <option value="all">{% trans %}All Languages{% endtrans %}</option>
                    {% for l in active_langs %}
                    <option value="{{ l }}">{{ l | upper }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('export-translations-modal').classList.add('hidden')"
                        class="px-4 py-2 rounded-xl text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
                <button type="submit"
                        class="px-4 py-2 rounded-xl text-sm font-medium text-white bg-primary hover:bg-primary-dark transition-all">
                    <i class="fa fa-download mr-1.5"></i>{% trans %}Export{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>

<div id="import-translations-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">
                <i class="fa fa-upload mr-2 text-primary dark:text-primary-light"></i>{% trans %}Import All Translations{% endtrans %}
            </h3>
            <button type="button" onclick="document.getElementById('import-translations-modal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <form method="post" action="{{ url('/admin/translations/import') }}" enctype="multipart/form-data" class="p-6 space-y-4">
            <div class="rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/40 p-4 space-y-2">
                <p class="text-xs font-semibold text-blue-700 dark:text-blue-300 uppercase tracking-wide">{% trans %}Expected CSV format{% endtrans %}</p>
                <p class="text-xs text-blue-600 dark:text-blue-400 font-mono bg-blue-100/60 dark:bg-blue-800/30 px-2 py-1.5 rounded-lg">page_id, lang, field_key, label, <strong>english_text</strong>, value</p>
                <ul class="text-xs text-blue-600 dark:text-blue-400 space-y-1 list-disc list-inside">
                    <li>{% trans %}The <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">english_text</code> column is for reference only — it is ignored on import.{% endtrans %}</li>
                    <li>{% trans %}Empty <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">value</code> rows are <strong>skipped</strong> — existing data is preserved.{% endtrans %}</li>
                    <li>{% trans %}Use <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">__CLEAR__</code> as a value to <strong>delete</strong> a field.{% endtrans %}</li>
                    <li>{% trans %}FAQ rows: use <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">faq_1_question</code>, <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">faq_1_answer</code>, etc.{% endtrans %}</li>
                    <li>{% trans %}File must be <strong>UTF-8</strong> encoded.{% endtrans %}</li>
                </ul>
                <a href="{{ url('/admin/translations/template') }}" class="inline-flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1">
                    <i class="fa fa-download"></i> {% trans %}Download template with all pages + English reference{% endtrans %}
                </a>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Language Override{% endtrans %} <span class="text-gray-400 font-normal">({% trans %}optional{% endtrans %})</span></label>
                <select name="force_lang" class="w-full px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                    <option value="">{% trans %}Use language from CSV{% endtrans %}</option>
                    {% for l in active_langs %}
                    <option value="{{ l }}">{{ l | upper }}</option>
                    {% endfor %}
                </select>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}If set, all rows will be saved under this language regardless of the lang column.{% endtrans %}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}CSV file{% endtrans %} <span class="text-gray-400 font-normal">(*.csv)</span></label>
                <input type="file" name="csv_file" accept=".csv" required
                       class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary/10 file:text-primary dark:file:text-primary-light hover:file:bg-primary/20 file:transition-all file:cursor-pointer">
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('import-translations-modal').classList.add('hidden')"
                        class="px-4 py-2 rounded-xl text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
                <button type="submit"
                        class="px-4 py-2 rounded-xl text-sm font-medium text-white bg-primary hover:bg-primary-dark transition-all">
                    <i class="fa fa-upload mr-1.5"></i>{% trans %}Import{% endtrans %}
                </button>
            </div>
        </form>
    </div>
</div>

{# ── Category CSV Download Modal ──────────────────────────────────── #}
<div id="cat-csv-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">
                <i class="fa fa-download mr-2 text-primary dark:text-primary-light"></i>
                {% trans %}Download CSV{% endtrans %} — <span id="cat-csv-modal-label"></span>
            </h3>
            <button type="button" onclick="document.getElementById('cat-csv-modal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="px-6 py-5">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                {% trans %}Choose a language. The CSV includes English reference text and any existing translation. Fill in the <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">value</code> column and re-import.{% endtrans %}
            </p>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Language{% endtrans %}</label>
                <select id="cat-csv-lang-select"
                        class="w-full border border-gray-300 dark:border-gray-700 rounded-xl px-3 py-2 text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                    <option value="en">en — English (reference template)</option>
                    {% for l in non_en_langs %}
                    <option value="{{ l }}">{{ l }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('cat-csv-modal').classList.add('hidden')"
                        class="px-4 py-2 rounded-xl text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </button>
                <button type="button" id="cat-csv-download-btn"
                        class="px-4 py-2 rounded-xl text-sm font-medium text-white bg-primary hover:bg-primary-dark transition-all">
                    <i class="fa fa-download mr-1.5"></i>{% trans %}Download{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</div>
<script>
(function () {
    var modal = document.getElementById('cat-csv-modal');
    var labelEl = document.getElementById('cat-csv-modal-label');
    var langSel = document.getElementById('cat-csv-lang-select');
    var dlBtn = document.getElementById('cat-csv-download-btn');
    var _prefix = '', _parts = '';

    document.querySelectorAll('.cat-csv-btn').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            _prefix = btn.dataset.prefix || '';
            _parts = btn.dataset.parts || '';
            labelEl.textContent = btn.dataset.label || '';
            modal.classList.remove('hidden');
        });
    });

    dlBtn.addEventListener('click', function () {
        var lang = langSel.value || 'en';
        var base = '{{ full_url("/admin/pages/csv/category") }}';
        var url = base + '?prefix=' + encodeURIComponent(_prefix) + '&lang=' + encodeURIComponent(lang);
        if (_parts) url += '&parts=' + encodeURIComponent(_parts);
        window.location.href = url;
        modal.classList.add('hidden');
    });

    modal.addEventListener('click', function (e) {
        if (e.target === modal) modal.classList.add('hidden');
    });

    // ── Add "Upload CSV" button next to every section download button ────────
    document.querySelectorAll('.cat-csv-btn').forEach(function (dlBtn) {
        var upBtn = document.createElement('button');
        upBtn.type = 'button';
        upBtn.title = 'Upload CSV for this section';
        upBtn.className = 'flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all';
        upBtn.innerHTML = '<i class="fa fa-upload text-[10px]"></i> Upload';
        dlBtn.parentNode.insertBefore(upBtn, dlBtn.nextSibling);
        upBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            document.getElementById('import-translations-modal').classList.remove('hidden');
        });
    });
})();
</script>

{% endblock %}