{% extends "admin/layout.html" %}
{% block title %}Edit Page - {{ page_label }}{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <a href="{{ full_url('/admin/pages') }}" class="text-sm text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-colors">
                    <i class="fa fa-arrow-left mr-1"></i>{% trans %}All Pages{% endtrans %}
                </a>
            </div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">{{ page_label }}</h2>
            <div class="flex items-center gap-3 mt-0.5">
                <p class="text-xs text-gray-400 dark:text-gray-500">{{ page_id }}</p>
                {% if live_url_parts is defined and live_url_parts %}
                <a href="{{ full_url(path=live_url_parts.get('path',''), filetype=live_url_parts.get('filetype'), fileformat=live_url_parts.get('fileformat'), input_format=live_url_parts.get('input_format'), output_format=live_url_parts.get('output_format')) }}" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-primary/10 text-primary dark:text-primary-light text-xs font-medium hover:bg-primary/20 transition-all"
                   data-testid="link-view-live">
                    <i class="fa fa-external-link-alt text-[10px]"></i>
                    {% trans %}View live page{% endtrans %}
                </a>
                {% endif %}
            </div>
        </div>
        <div class="flex items-center gap-3 flex-wrap">
            <a href="{{ url('/admin/pages/translate') }}?page_id={{ page_id }}"
               class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-primary/10 text-primary dark:text-primary-light text-sm font-medium hover:bg-primary/20 transition-all"
               data-testid="btn-translate-mode">
                <i class="fa fa-language text-xs"></i>
                {% trans %}Translate{% endtrans %}
            </a>
            <div class="relative" id="csv-menu-wrap">
                <button type="button" onclick="document.getElementById('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-csv-menu">
                    <i class="fa fa-file-csv text-xs"></i>
                    CSV
                    <i class="fa fa-chevron-down text-[10px] ml-0.5"></i>
                </button>
                <div id="csv-dropdown" class="hidden absolute right-0 mt-1 w-52 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20 overflow-hidden">
                    <a id="csv-download-link" href="{{ url('/admin/pages/content-csv') }}?page_id={{ page_id }}&lang={{ lang }}"
                       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"
                       data-testid="btn-download-csv">
                        <i class="fa fa-download text-primary dark:text-primary-light w-4"></i>
                        {% trans %}Download CSV{% endtrans %}
                    </a>
                    <a href="{{ url('/admin/pages/content-csv-template') }}?page_id={{ page_id }}&lang={{ lang }}"
                       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-download-csv-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('csv-dropdown').classList.add('hidden'); document.getElementById('csv-upload-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-upload-csv">
                        <i class="fa fa-upload text-gray-400 dark:text-gray-500 w-4"></i>
                        {% trans %}Upload CSV{% endtrans %}
                    </button>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">{% trans %}Language:{% endtrans %}</label>
                <select id="lang-selector" class="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" data-testid="select-lang">
                    {% for l in langs %}
                    <option value="{{ l }}" {% if l == lang %}selected{% endif %}>{{ l | upper }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <form id="fields-form" class="space-y-6">
        <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-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-search mr-2"></i>{% trans %}SEO & Meta Tags{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Title, description, and custom HTML for the page head section{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-4">
                {% for f in page_fields %}
                {% if f.key == 'title' or f.key == 'description' or f.key == 'head_html' or f.key == 'og_image' %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{{ f.label }}{% if lang != 'en' %} <span class="text-xs text-primary dark:text-primary-light">({{ lang | upper }})</span>{% endif %}</label>
                    {% if f.key == 'og_image' %}
                    <div class="space-y-3">
                        <div id="og-image-preview-wrap" class="{% if not fields[f.key] %}hidden{% endif %}">
                            <img id="og-image-preview" src="{{ fields[f.key] or '' }}" alt="OG Image Preview"
                                class="max-h-40 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-800"
                                data-testid="img-og-preview">
                        </div>
                        <div class="flex items-center gap-3 flex-wrap">
                            <label class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary/10 text-primary dark:text-primary-light text-sm font-medium cursor-pointer hover:bg-primary/20 transition-all" data-testid="button-og-upload">
                                <i class="fa fa-upload"></i> {% trans %}Upload Image{% endtrans %}
                                <input type="file" id="og-image-file" accept="image/*" class="hidden" data-testid="input-og-file">
                            </label>
                            <span class="text-xs text-gray-400 dark:text-gray-500">{% trans %}or paste URL below{% endtrans %}</span>
                        </div>
                        <input type="text" name="field_{{ f.key }}" id="og-image-url" value="{{ fields[f.key] or '' }}" placeholder="{% trans %}https://example.com/image.png{% endtrans %}"
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                            data-testid="input-{{ f.key }}">
                        <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Upload an image or enter a URL for the Open Graph image{% endtrans %}</p>
                    </div>
                    {% elif f.type == 'textarea' %}
                    <textarea name="field_{{ f.key }}" rows="3" placeholder="{{ f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm font-mono"
                        data-testid="input-{{ f.key }}">{{ fields[f.key] or '' }}</textarea>
                    {% else %}
                    <input type="text" name="field_{{ f.key }}" value="{{ fields[f.key] or '' }}" placeholder="{{ f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ f.key }}">
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>

        <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-accent/5 to-primary/5 dark:from-accent-light/5 dark:to-primary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-pen mr-2"></i>{% trans %}Page Content{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Heading, description, and content sections shown on the page{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-4">
                {% for f in page_fields %}
                {% if f.key == 'page_heading' or f.key == 'page_description' or f.key == 'before_faq_title' or f.key == 'before_faq_content' %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{{ f.label }}{% if lang != 'en' %} <span class="text-xs text-primary dark:text-primary-light">({{ lang | upper }})</span>{% endif %}</label>
                    {% if f.type == 'textarea' %}
                    <textarea name="field_{{ f.key }}" rows="3" placeholder="{{ f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm font-mono"
                        data-testid="input-{{ f.key }}">{{ fields[f.key] or '' }}</textarea>
                    {% else %}
                    <input type="text" name="field_{{ f.key }}" value="{{ fields[f.key] or '' }}" placeholder="{{ f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ f.key }}">
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>

        {% if show_desc_fields %}
        <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-yellow-500/5 to-accent/5 dark:from-yellow-400/5 dark:to-accent-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-box mr-2"></i>{% trans %}Filetype & Category Descriptions{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Override the filetype title, category description, long description, and extension card box text. Leave empty to use default values from config.{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-4">
                {% for f in page_fields %}
                {% if f.key == 'filetype_title' or f.key == 'filetype_description' or f.key == 'filetype_long_description' or f.key == 'extension_box_text' %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{{ f.label }}{% if lang != 'en' %} <span class="text-xs text-primary dark:text-primary-light">({{ lang | upper }})</span>{% endif %}</label>
                    {% if f.type == 'textarea' %}
                    <textarea name="field_{{ f.key }}" rows="3" placeholder="{{ defaults[f.key] if defaults[f.key] else f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ f.key }}">{{ fields[f.key] or '' }}</textarea>
                    {% else %}
                    <input type="text" name="field_{{ f.key }}" value="{{ fields[f.key] or '' }}" placeholder="{{ defaults[f.key] if defaults[f.key] else f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ f.key }}">
                    {% endif %}
                    {% if defaults[f.key] %}
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}Default:{% endtrans %} {{ defaults[f.key] | truncate(120) }}</p>
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if show_format_def %}
        <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-blue-500/5 to-primary/5 dark:from-blue-400/5 dark:to-primary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-file-lines mr-2"></i>{% trans %}Format Definition{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}The definition text for this file format. Leave empty to use default from config.{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-4">
                {% for f in page_fields %}
                {% if f.key == 'format_definition' %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{{ f.label }}{% if lang != 'en' %} <span class="text-xs text-primary dark:text-primary-light">({{ lang | upper }})</span>{% endif %}</label>
                    <textarea name="field_{{ f.key }}" rows="4" placeholder="{{ defaults[f.key] if defaults[f.key] else f.placeholder }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ f.key }}">{{ fields[f.key] or '' }}</textarea>
                    {% if defaults[f.key] %}
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}Default:{% endtrans %} {{ defaults[f.key] | truncate(120) }}</p>
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Option Override Fields Section -->
{% if option_overrides %}
<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-green-500/5 to-teal-500/5 dark:from-green-400/5 dark:to-teal-400/5">
        <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-sliders mr-2"></i>{% trans %}Converter Option Labels{% endtrans %}</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Override option label names and tooltip descriptions shown in the converter settings panel. Leave blank to use defaults from config.{% endtrans %}</p>
    </div>
    <div class="p-6 space-y-6">
        {% for opt in option_overrides %}
        <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex items-center gap-3 mb-3">
                <span class="px-2.5 py-1 rounded-lg bg-teal-500/10 text-teal-600 dark:text-teal-400 text-xs font-mono font-semibold">{{ opt.key }}</span>
                {% if opt.default_title %}<span class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Default:{% endtrans %} {{ opt.default_title }}</span>{% endif %}
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Label{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <input type="text" name="option_{{ opt.key }}_title"
                        value="{{ opt.value_title or '' }}"
                        placeholder="{{ opt.default_title or '' }}"
                        class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Tooltip Description{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <input type="text" name="option_{{ opt.key }}_description"
                        value="{{ opt.value_description or '' }}"
                        placeholder="{{ opt.default_description or '' }}"
                        class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm">
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

        <!-- Extension-Specific Fields Section -->
{% if show_extension_fields and extensions %}
<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-blue-500/5 to-primary/5 dark:from-blue-400/5 dark:to-primary-light/5">
        <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-puzzle-piece mr-2"></i>{% trans %}Extension-Specific Settings{% endtrans %}</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Customize titles, descriptions, and icons for each file extension{% endtrans %}</p>
    </div>
    <div class="p-6 space-y-6">
        {% for ext in extensions %}
        {% set ext_title_key = 'ext_' + ext + '_title' %}
        {% set ext_box_key = 'ext_' + ext + '_box_text' %}
        {% set ext_icon_type_key = 'ext_' + ext + '_icon_type' %}
        {% set ext_icon_value_key = 'ext_' + ext + '_icon_value' %}
        
        <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex items-center gap-3 mb-3">
                <span class="px-2.5 py-1 rounded-lg bg-primary/10 text-primary dark:text-primary-light text-xs font-semibold uppercase">{{ ext }}</span>
                <span class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Extension{% endtrans %}</span>
            </div>
            
            <div class="grid grid-cols-1 gap-4">
                <!-- Icon Type Selector -->
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Icon Type{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <div class="flex items-center gap-4 p-2">
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="ext_{{ ext }}_icon_type" value="none" class="w-4 h-4 text-primary" 
                                {% if fields[ext_icon_type_key] == 'none' or not fields[ext_icon_type_key] %}checked{% endif %}
                                onchange="toggleIconType('{{ ext }}', 'none')">
                            <span class="text-sm text-gray-600 dark:text-gray-400">{% trans %}None{% endtrans %}</span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="ext_{{ ext }}_icon_type" value="fa" class="w-4 h-4 text-primary" 
                                {% if fields[ext_icon_type_key] == 'fa' %}checked{% endif %}
                                onchange="toggleIconType('{{ ext }}', 'fa')">
                            <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fa fa-font-awesome"></i> {% trans %}Font Awesome{% endtrans %}</span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="ext_{{ ext }}_icon_type" value="svg" class="w-4 h-4 text-primary" 
                                {% if fields[ext_icon_type_key] == 'svg' %}checked{% endif %}
                                onchange="toggleIconType('{{ ext }}', 'svg')">
                            <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fa fa-code"></i> {% trans %}SVG Code{% endtrans %}</span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="ext_{{ ext }}_icon_type" value="image" class="w-4 h-4 text-primary" 
                                {% if fields[ext_icon_type_key] == 'image' %}checked{% endif %}
                                onchange="toggleIconType('{{ ext }}', 'image')">
                            <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fa fa-image"></i> {% trans %}Image{% endtrans %}</span>
                        </label>
                    </div>
                </div>

                <!-- Font Awesome Icon Input -->
                <div id="ext-{{ ext }}-fa-input" class="icon-input-field {% if fields[ext_icon_type_key] != 'fa' %}hidden{% endif %}">
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Font Awesome Icon Class{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <div class="flex gap-2">
                        <input type="text" 
                            name="ext_{{ ext }}_fa_icon"
                            id="ext-{{ ext }}-fa-icon"
                            data-ext="{{ ext }}"
                            value="{{ fields[ext_icon_value_key] if fields[ext_icon_type_key] == 'fa' else '' }}" 
                            placeholder="{% trans %}e.g., fa-file-pdf, fa-image, fa-video{% endtrans %}"
                            class="flex-1 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm font-mono">
                        <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-lg">
                            <i class="fa {{ fields[ext_icon_value_key] if fields[ext_icon_type_key] == 'fa' and fields[ext_icon_value_key] else 'fa-file' }}"></i>
                        </div>
                    </div>
                </div>

                <!-- SVG Code Input -->
                <div id="ext-{{ ext }}-svg-input" class="icon-input-field {% if fields[ext_icon_type_key] != 'svg' %}hidden{% endif %}">
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}SVG Code{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <textarea 
                        name="ext_{{ ext }}_svg_code"
                        id="ext-{{ ext }}-svg-code"
                        data-ext="{{ ext }}"
                        rows="3" 
                        placeholder="{% trans %}<svg ...>...</svg>{% endtrans %}"
                        class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm font-mono">{{ fields[ext_icon_value_key] if fields[ext_icon_type_key] == 'svg' else '' }}</textarea>
                </div>

                <!-- Image Upload -->
                <div id="ext-{{ ext }}-image-input" class="icon-input-field {% if fields[ext_icon_type_key] != 'image' %}hidden{% endif %}">
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Icon Image{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <div class="space-y-3">
                        <div id="ext-{{ ext }}-image-preview" class="{% if not fields[ext_icon_value_key] or fields[ext_icon_type_key] != 'image' %}hidden{% endif %}">
                            <img id="ext-{{ ext }}-image-preview-img" src="{{ fields[ext_icon_value_key] if fields[ext_icon_type_key] == 'image' else '' }}" 
                                alt="Icon Preview" class="max-h-20 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-800">
                        </div>
                        <div class="flex items-center gap-3 flex-wrap">
                            <label class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/10 text-primary dark:text-primary-light text-sm font-medium cursor-pointer hover:bg-primary/20 transition-all">
                                <i class="fa fa-upload"></i> {% trans %}Upload Image{% endtrans %}
                                <input type="file" class="hidden icon-image-upload" data-ext="{{ ext }}" accept="image/*">
                            </label>
                            <span class="text-xs text-gray-400 dark:text-gray-500">{% trans %}or paste URL below{% endtrans %}</span>
                        </div>
                        <input type="text" 
                            name="ext_{{ ext }}_image_url"
                            id="ext-{{ ext }}-image-url"
                            data-ext="{{ ext }}"
                            value="{{ fields[ext_icon_value_key] if fields[ext_icon_type_key] == 'image' else '' }}" 
                            placeholder="{% trans %}https://example.com/icon.png{% endtrans %}"
                            class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm">
                    </div>
                </div>

                <!-- Extension Title Field -->
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Extension Title{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <input type="text" 
                        name="ext_{{ ext }}_title"
                        id="ext-{{ ext }}-title"
                        data-ext="{{ ext }}"
                        value="{{ fields[ext_title_key] or '' }}" 
                        placeholder="{% trans %}Convert to {{ ext }}{% endtrans %}"
                        class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm">
                </div>
                
                <!-- Extension Box Text Field -->
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                        {% trans %}Extension Box Text{% endtrans %} {% if lang != 'en' %}<span class="text-primary">({{ lang | upper }})</span>{% endif %}
                    </label>
                    <textarea 
                        name="ext_{{ ext }}_box_text"
                        id="ext-{{ ext }}-box-text"
                        data-ext="{{ ext }}"
                        rows="2" 
                        placeholder="{{ get_definition(ext) }}"
                        class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm">{{ fields[ext_box_key] or '' }}</textarea>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{% trans %}Default:{% endtrans %} {{ get_definition(ext) }}</p>
                </div>
                
                <!-- Preview -->
                <div class="mt-2 p-3 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">{% trans %}Preview:{% endtrans %}</p>
                    <div class="flex items-start justify-between">
                        <div class="flex items-start gap-2">
                            <div id="ext-{{ ext }}-preview-icon" class="w-8 h-8 flex items-center justify-center text-xl text-primary">
                                {% if fields[ext_icon_type_key] == 'fa' and fields[ext_icon_value_key] %}
                                    <i class="fa {{ fields[ext_icon_value_key] }}"></i>
                                {% elif fields[ext_icon_type_key] == 'svg' and fields[ext_icon_value_key] %}
                                    <div class="w-6 h-6">{{ fields[ext_icon_value_key]|safe }}</div>
                                {% elif fields[ext_icon_type_key] == 'image' and fields[ext_icon_value_key] %}
                                    <img src="{{ fields[ext_icon_value_key] }}" class="w-6 h-6 object-contain" alt="">
                                {% else %}
                                    <i class="fa fa-file text-gray-400"></i>
                                {% endif %}
                            </div>
                            <div>
                                <h4 id="ext-{{ ext }}-preview-title" class="font-semibold text-gray-900 dark:text-white text-sm">
                                    {{ fields[ext_title_key] if fields[ext_title_key] else 'Convert ' + ext + ' file' }}
                                </h4>
                                <p id="ext-{{ ext }}-preview-description" class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
                                    {{ fields[ext_box_key] if fields[ext_box_key] else get_definition(ext) }}
                                </p>
                            </div>
                        </div>
                        <i class="fa fa-chevron-right text-xs text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

        <div class="flex justify-end gap-3">
    <button type="button" id="reset-fields-btn" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-red-500 hover:bg-red-600 text-white font-semibold shadow-lg shadow-red-500/30 transition-all duration-300" data-testid="button-reset-fields">
        <i class="fa fa-undo"></i> {% trans %}Reset to Default{% endtrans %}
    </button>
    <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-primary hover:bg-primary-dark text-white font-semibold shadow-lg shadow-primary/30 transition-all duration-300" data-testid="button-save-fields">
        <i class="fa fa-save"></i> {% trans %}Save Page Settings{% endtrans %}
    </button>
</div>
    </form>

    <form id="faqs-form" class="space-y-4">
        <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-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5 flex items-center justify-between">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-question-circle mr-2"></i>{% trans %}FAQs{% endtrans %}{% if lang != 'en' %} <span class="text-xs text-primary dark:text-primary-light">({{ lang | upper }})</span>{% endif %}</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Manage frequently asked questions for this page{% endtrans %}</p>
                </div>
                <button type="button" id="add-faq-btn" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-accent/10 text-accent dark:text-accent-light text-sm font-medium hover:bg-accent/20 transition-all" data-testid="button-add-faq">
                    <i class="fa fa-plus text-xs"></i> {% trans %}Add FAQ{% endtrans %}
                </button>
            </div>
            <div id="faq-list" class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for faq in faqs %}
                <div class="faq-item p-6 space-y-3">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex-1 space-y-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Question{% endtrans %} #{{ loop.index }}</label>
                                <input type="text" name="faq_question[]" value="{{ faq.question }}" placeholder="{% trans %}Enter FAQ question...{% endtrans %}"
                                    class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                                    data-testid="input-faq-q-{{ loop.index }}">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Answer{% endtrans %}</label>
                                <textarea name="faq_answer[]" rows="3" placeholder="{% trans %}Enter FAQ answer... (HTML allowed){% endtrans %}"
                                    class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                                    data-testid="input-faq-a-{{ loop.index }}">{{ faq.answer }}</textarea>
                            </div>
                        </div>
                        <button type="button" onclick="this.closest('.faq-item').remove()" class="flex-shrink-0 p-2 rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all mt-5" title="{% trans %}Remove FAQ{% endtrans %}">
                            <i class="fa fa-trash text-sm"></i>
                        </button>
                    </div>
                </div>
                {% endfor %} 
            </div>
            <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
                <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 transition-all duration-300" data-testid="button-save-faqs">
                    <i class="fa fa-save"></i> {% trans %}Save FAQs{% endtrans %}
                </button>
            </div>
        </div>
    </form>
</div>

<div id="csv-upload-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 %}Upload CSV{% endtrans %}
            </h3>
            <button type="button" onclick="document.getElementById('csv-upload-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="csv-upload-form" enctype="multipart/form-data" class="p-6 space-y-4">
            <input type="hidden" name="page_id" value="{{ page_id }}">
            <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 %}Translation workflow{% endtrans %}</p>
                <ol class="text-xs text-blue-600 dark:text-blue-400 space-y-1 list-decimal list-inside">
                    <li>{% trans %}<strong>Download CSV</strong> — the <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">english_text</code> column contains the English original. The <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">value</code> column is blank for you to fill in.{% endtrans %}</li>
                    <li>{% trans %}Fill in the <strong>value</strong> column with your translation. Leave a row blank to skip it.{% endtrans %}</li>
                    <li>{% trans %}<strong>Upload</strong> — all filled values are saved to the selected language. The page is automatically marked as <em>translation complete</em>.{% endtrans %}</li>
                </ol>
                <p class="text-xs text-blue-500 dark:text-blue-500 border-t border-blue-100 dark:border-blue-800/30 pt-2 mt-1">
                    {% trans %}Tip: use <code class="bg-blue-100 dark:bg-blue-800/40 px-1 rounded">__CLEAR__</code> as a value to delete an existing field. File must be <strong>UTF-8</strong>.{% endtrans %}
                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Save translations to language{% endtrans %}</label>
                <select name="lang" id="csv-upload-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">
                    {% for l in langs %}
                    <option value="{{ l }}" {% if l == lang %}selected{% endif %}>{{ l | upper }}{% if l == lang %} ({% trans %}current{% endtrans %}){% endif %}</option>
                    {% endfor %}
                </select>
            </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" id="csv-file-input" 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('csv-upload-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>
{% endblock %}

{% block page_scripts %}
<script>
    var faqCounter = {{ faqs | length }};
    var pageId = "{{ page_id }}";
    var pageLang = "{{ lang }}";

    // ========== Helper function to escape special characters in selectors ==========
    function escapeSelector(ext) {
        return ext.replace(/[.!@#$%^&*()=+]/g, '\\$&');
    }

    // ========== FAQ Functions ==========
    $("#add-faq-btn").on("click", function() {
        faqCounter++;
        var html = '<div class="faq-item p-6 space-y-3">' +
            '<div class="flex items-start justify-between gap-3">' +
            '<div class="flex-1 space-y-3">' +
            '<div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Question{% endtrans %} #' + faqCounter + '</label>' +
            '<input type="text" name="faq_question[]" placeholder="{% trans %}Enter FAQ question...{% endtrans %}" ' +
            'class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"></div>' +
            '<div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Answer{% endtrans %}</label>' +
            '<textarea name="faq_answer[]" rows="3" placeholder="{% trans %}Enter FAQ answer... (HTML allowed){% endtrans %}" ' +
            'class="w-full 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 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"></textarea></div>' +
            '</div>' +
            '<button type="button" onclick="this.closest(\'.faq-item\').remove()" class="flex-shrink-0 p-2 rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all mt-5" title="{% trans %}Remove FAQ{% endtrans %}">' +
            '<i class="fa fa-trash text-sm"></i></button>' +
            '</div></div>';
        $("#faq-list").append(html);
    });

    // ========== Language Selector ==========
    $("#lang-selector").on("change", function() {
        var lang = $(this).val();
        window.location.href = "{{ url('/admin/pages/edit') }}?page_id=" + encodeURIComponent(pageId) + "&lang=" + lang;
    });

    // ========== CSV Upload ==========
    $("#csv-upload-form").on("submit", function(e) {
        e.preventDefault();
        var $btn = $(this).find('button[type="submit"]');
        var formData = new FormData(this);
        $btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin mr-1.5"></i>{% trans %}Importing...{% endtrans %}');
        $.ajax({
            url: "{{ url('/admin/pages/content-csv') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {"X-Requested-With": "XMLHttpRequest"},
            success: function(resp) {
                var $langSel = $("#csv-upload-lang");
                var selectedLang = ($langSel.length && $langSel.val()) ? $langSel.val().toUpperCase() : "?";
                var msg = selectedLang + ": " + (resp.saved || 0) + " {% trans %}field(s) saved{% endtrans %}";
                if (resp.cleared) msg += ", " + resp.cleared + " {% trans %}cleared{% endtrans %}";
                if (resp.marked_complete) msg += " — ✓ {% trans %}marked as complete{% endtrans %}";
                toastr.success("{% trans %}CSV imported{% endtrans %}: " + msg);
                // Clear the file input and reset button — do NOT reload the page
                var fileInput = document.getElementById("csv-file-input");
                if (fileInput) fileInput.value = "";
                $btn.prop("disabled", false).html('<i class="fa fa-upload mr-1.5"></i>{% trans %}Import{% endtrans %}');
                document.getElementById("csv-upload-modal").classList.add("hidden");
            },
            error: function(xhr) {
                var msg = "{% trans %}Upload failed{% endtrans %}.";
                try { msg = JSON.parse(xhr.responseText).message || msg; } catch(e){}
                toastr.error(msg);
                $btn.prop("disabled", false).html('<i class="fa fa-upload mr-1.5"></i>{% trans %}Import{% endtrans %}');
            }
        });
    });

    // Close CSV dropdown when clicking outside
    $(document).on("click", function(e) {
        if (!$(e.target).closest("#csv-menu-wrap").length) {
            $("#csv-dropdown").addClass("hidden");
        }
    });

    // ========== OG Image Handling ==========
    $("#og-image-file").on("change", function() {
        var file = this.files[0];
        if (!file) return;
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "{{ url('/admin/upload-image') }}",
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: formData,
            processData: false,
            contentType: false,
            success: function(resp) {
                var url = resp.url || resp.path || "";
                $("#og-image-url").val(url);
                $("#og-image-preview").attr("src", url);
                $("#og-image-preview-wrap").removeClass("hidden");
                toastr.success("{% trans %}Image uploaded successfully!{% endtrans %}");
            },
            error: function() { 
                toastr.error("{% trans %}Failed to upload image.{% endtrans %}"); 
            }
        });
    });

    $("#og-image-url").on("input", function() {
        var url = $(this).val().trim();
        if (url) {
            $("#og-image-preview").attr("src", url);
            $("#og-image-preview-wrap").removeClass("hidden");
        } else {
            $("#og-image-preview-wrap").addClass("hidden");
        }
    });

    // ========== Icon Type Toggle Functions ==========
    window.toggleIconType = function(ext, type) {
        var safeExt = escapeSelector(ext);
        
        // Hide all icon input fields for this extension
        $(`#ext-${safeExt}-fa-input`).addClass('hidden');
        $(`#ext-${safeExt}-svg-input`).addClass('hidden');
        $(`#ext-${safeExt}-image-input`).addClass('hidden');
        
        // Show the selected type
        if (type === 'fa') {
            $(`#ext-${safeExt}-fa-input`).removeClass('hidden');
        } else if (type === 'svg') {
            $(`#ext-${safeExt}-svg-input`).removeClass('hidden');
        } else if (type === 'image') {
            $(`#ext-${safeExt}-image-input`).removeClass('hidden');
        }
        
        // Update preview
        updateExtensionPreview(ext);
    }

    // ========== Icon Image Upload Handling ==========
    $(document).on('change', '.icon-image-upload', function() {
        var file = this.files[0];
        var ext = $(this).data('ext');
        var safeExt = escapeSelector(ext);
        
        if (!file) return;
        
        var formData = new FormData();
        formData.append('file', file);
        
        $.ajax({
            url: '/admin/upload-image',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            data: formData,
            processData: false,
            contentType: false,
            success: function(resp) {
                var url = resp.url || resp.path || "";
                $(`#ext-${safeExt}-image-url`).val(url);
                $(`#ext-${safeExt}-image-preview-img`).attr('src', url);
                $(`#ext-${safeExt}-image-preview`).removeClass('hidden');
                toastr.success('{% trans %}Icon uploaded successfully!{% endtrans %}');
                
                // Make sure image radio is selected
                $(`input[name="ext_${ext}_icon_type"][value="image"]`).prop('checked', true);
                toggleIconType(ext, 'image');
                
                // Update the preview
                updateExtensionPreview(ext);
            },
            error: function() { 
                toastr.error('{% trans %}Failed to upload icon.{% endtrans %}'); 
            }
        });
    });

    // ========== Font Awesome Icon Preview ==========
    $(document).on('input', '[id$="-fa-icon"]', function() {
        var ext = $(this).data('ext');
        if (ext) {
            // Make sure FA radio is selected
            $(`input[name="ext_${ext}_icon_type"][value="fa"]`).prop('checked', true);
            toggleIconType(ext, 'fa');
            updateExtensionPreview(ext);
        }
    });

    // ========== SVG Icon Preview ==========
    $(document).on('input', '[id$="-svg-code"]', function() {
        var ext = $(this).data('ext');
        if (ext) {
            // Make sure SVG radio is selected
            $(`input[name="ext_${ext}_icon_type"][value="svg"]`).prop('checked', true);
            toggleIconType(ext, 'svg');
            updateExtensionPreview(ext);
        }
    });

    // ========== Image URL Preview ==========
    $(document).on('input', '[id$="-image-url"]', function() {
        var ext = $(this).data('ext');
        if (!ext) return;
        
        var safeExt = escapeSelector(ext);
        var url = $(this).val();
        
        if (url) {
            $(`#ext-${safeExt}-image-preview-img`).attr('src', url);
            $(`#ext-${safeExt}-image-preview`).removeClass('hidden');
            
            // Make sure image radio is selected
            $(`input[name="ext_${ext}_icon_type"][value="image"]`).prop('checked', true);
            toggleIconType(ext, 'image');
        } else {
            $(`#ext-${safeExt}-image-preview`).addClass('hidden');
        }
        updateExtensionPreview(ext);
    });

    // ========== Extension Title Preview ==========
    $(document).on('input', '[id$="-title"]', function() {
        var ext = $(this).data('ext');
        if (ext) {
            updateExtensionPreview(ext);
        }
    });

    // ========== Extension Box Text Preview ==========
    $(document).on('input', '[id$="-box-text"]', function() {
        var ext = $(this).data('ext');
        if (ext) {
            updateExtensionPreview(ext);
        }
    });

    // ========== Radio Button Change Handler ==========
    $(document).on('change', 'input[type="radio"][name^="ext_"]', function() {
        var name = $(this).attr('name');
        // Extract extension from name (format: ext_EXTENSION_icon_type)
        var matches = name.match(/ext_(.+)_icon_type/);
        if (matches && matches[1]) {
            var ext = matches[1];
            var type = $(this).val();
            toggleIconType(ext, type);
            updateExtensionPreview(ext);
        }
    });

    // ========== Update Extension Preview Function ==========
    function updateExtensionPreview(ext) {
        if (!ext) return;
        
        var safeExt = escapeSelector(ext);
        var iconType = $(`input[name="ext_${ext}_icon_type"]:checked`).val() || 'none';
        
        // Get title with fallback
        var title = $(`#ext-${safeExt}-title`).val();
        if (!title || title.trim() === '') {
            title = `Convert ${ext} file`;
        }
        
        // Get box text with fallback - use current input value or empty string
        var boxText = $(`#ext-${safeExt}-box-text`).val();
        var defaultBoxText = "{% trans %}Convert your {% endtrans %}" + ext + " {% trans %}files online for free.{% endtrans %}";
        
        // Update title and description in preview
        $(`#ext-${safeExt}-preview-title`).text(title);
        if (boxText && boxText.trim() !== '') {
            $(`#ext-${safeExt}-preview-description`).text(boxText);
        } else {
            $(`#ext-${safeExt}-preview-description`).text(defaultBoxText);
        }
        
        // Update icon based on type
        var iconHtml = '';
        if (iconType === 'fa') {
            var faIcon = $(`#ext-${safeExt}-fa-icon`).val() || 'fa-file';
            iconHtml = `<i class="fa ${faIcon}"></i>`;
        } else if (iconType === 'svg') {
            var svgCode = $(`#ext-${safeExt}-svg-code`).val() || '';
            if (svgCode && svgCode.trim() !== '') {
                iconHtml = svgCode;
            } else {
                iconHtml = '<i class="fa fa-file text-gray-400"></i>';
            }
        } else if (iconType === 'image') {
            var imageUrl = $(`#ext-${safeExt}-image-url`).val() || '';
            if (imageUrl && imageUrl.trim() !== '') {
                iconHtml = `<img src="${imageUrl}" class="w-6 h-6 object-contain" alt="">`;
            } else {
                iconHtml = '<i class="fa fa-file text-gray-400"></i>';
            }
        } else {
            iconHtml = '<i class="fa fa-file text-gray-400"></i>';
        }
        
        $(`#ext-${safeExt}-preview-icon`).html(iconHtml);
    }

    // ========== Initialize All Extension Previews ==========
    function initializeExtensionPreviews() {
        {% if show_extension_fields and extensions %}
            {% for ext in extensions %}
                // Set up initial preview for {{ ext }}
                setTimeout(function() {
                    updateExtensionPreview('{{ ext }}');
                }, 100);
            {% endfor %}
        {% endif %}
    }

    // ========== Fields Form Submit ==========
    $("#fields-form").on("submit", function(e) {
        e.preventDefault();
        
        // Get all form data including extension fields
        var formData = $(this).serializeArray();
        
        // Add extension fields manually to ensure all are included
        {% if show_extension_fields and extensions %}
            {% for ext in extensions %}
            var safeExt = escapeSelector('{{ ext }}');
            
            // Check if title field exists and add it
            var titleValue = $(`#ext-${safeExt}-title`).val();
            formData.push({
                name: "ext_{{ ext }}_title",
                value: titleValue !== undefined ? titleValue : ''
            });
            
            // Check if box text field exists and add it
            var boxTextValue = $(`#ext-${safeExt}-box-text`).val();
            formData.push({
                name: "ext_{{ ext }}_box_text",
                value: boxTextValue !== undefined ? boxTextValue : ''
            });
            
            // Icon type
            var iconType = $(`input[name="ext_{{ ext }}_icon_type"]:checked`).val() || 'none';
            formData.push({
                name: "ext_{{ ext }}_icon_type",
                value: iconType
            });
            
            // Icon value based on type
            var iconValue = '';
            if (iconType === 'fa') {
                iconValue = $(`#ext-${safeExt}-fa-icon`).val() || '';
            } else if (iconType === 'svg') {
                iconValue = $(`#ext-${safeExt}-svg-code`).val() || '';
            } else if (iconType === 'image') {
                iconValue = $(`#ext-${safeExt}-image-url`).val() || '';
            }
            
            formData.push({
                name: "ext_{{ ext }}_icon_value",
                value: iconValue
            });
            {% endfor %}
        {% endif %}
        
        // Convert back to serialized string
        var serializedData = $.param(formData);
        serializedData += "&action=save_fields&page_id=" + encodeURIComponent(pageId) + "&lang=" + encodeURIComponent(pageLang);
        
        $.ajax({
            url: "{{ url('/admin/pages/edit') }}?page_id=" + encodeURIComponent(pageId) + "&lang=" + encodeURIComponent(pageLang),
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: serializedData,
            success: function() {
                toastr.success("{% trans %}Page settings saved successfully!{% endtrans %}");
            },
            error: function() { 
                toastr.error("{% trans %}Failed to save page settings.{% endtrans %}"); 
            }
        });
    });

    // ========== FAQs Form Submit ==========
    $("#faqs-form").on("submit", function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        formData += "&action=save_faqs&page_id=" + encodeURIComponent(pageId) + "&lang=" + encodeURIComponent(pageLang);
        $.ajax({
            url: "{{ url('/admin/pages/edit') }}?page_id=" + encodeURIComponent(pageId) + "&lang=" + encodeURIComponent(pageLang),
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: formData,
            success: function() {
                toastr.success("{% trans %}FAQs saved successfully!{% endtrans %}");
            },
            error: function() { 
                toastr.error("{% trans %}Failed to save FAQs.{% endtrans %}"); 
            }
        });
    });

    // ========== Document Ready ==========
    $(document).ready(function() {
        // Initialize all extension previews
        initializeExtensionPreviews();
        
        // Log to verify extensions are loaded
        console.log('Extensions loaded, previews initialized');
    });
             
            $("#reset-fields-btn").on("click", function() {
    if (confirm("{% trans %}Are you sure you want to reset all fields to default? This cannot be undone.{% endtrans %}")) {
        var formData = {
            action: "reset_fields",
            page_id: pageId,
            lang: pageLang
        };
        
        $.ajax({
            url: "{{ url('/admin/pages/edit') }}",
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: formData,
            success: function(response) {
                // Clear all input fields
                $('input[type="text"]').val('');
                $('textarea').val('');
                
                // Reset radio buttons to default (first option)
                $('input[type="radio"]').each(function() {
                    if ($(this).val() === 'none' || $(this).val() === '') {
                        $(this).prop('checked', true);
                    }
                });
                
                // Clear file inputs
                $('input[type="file"]').val('');
                
                // Hide image previews
                $('[id$="-image-preview"]').addClass('hidden');
                $('[id$="-preview-wrap"]').addClass('hidden');
                
                // Reset icon fields to hidden state (show only none)
                $('.icon-input-field').addClass('hidden');
                
                // Update all previews
                {% if show_extension_fields and extensions %}
                    {% for ext in extensions %}
                        updateExtensionPreview('{{ ext }}');
                    {% endfor %}
                {% endif %}
                
                toastr.success("{% trans %}All fields reset to default!{% endtrans %}");
            },
            error: function() { 
                toastr.error("{% trans %}Failed to reset fields.{% endtrans %}"); 
            }
        });
    }
});

</script>
{% endblock %}