{% extends "admin/layout.html" %}
{% block title %}General Settings{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white" data-testid="text-general-settings-title">{% trans %}General Settings{% endtrans %}</h2>
    </div>

    <form id="general-settings-form" class="space-y-8">

        <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-image mr-2 text-primary"></i>{% trans %}Site Identity{% endtrans %}</h3>
            </div>
            <div class="p-6 space-y-6">

                <div class="flex items-center gap-4 p-4 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Site Logo Type:{% endtrans %}</span>
                    <div class="flex items-center gap-6">
                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                            <input type="radio" name="logo_type" value="image" class="w-4 h-4 text-primary border-gray-300 focus:ring-primary" 
                                {% if site is defined and site.logo_type == 'image' or site.logo_type is not defined %}checked{% endif %} 
                                onchange="toggleLogoType('image')" data-testid="radio-logo-type-image">
                            <span class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 group-hover:text-primary">
                                <i class="fa fa-image"></i> {% trans %}Image Only{% endtrans %}
                            </span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                            <input type="radio" name="logo_type" value="text" class="w-4 h-4 text-primary border-gray-300 focus:ring-primary" 
                                {% if site is defined and site.logo_type == 'text' %}checked{% endif %} 
                                onchange="toggleLogoType('text')" data-testid="radio-logo-type-text">
                            <span class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 group-hover:text-primary">
                                <i class="fa fa-font"></i> {% trans %}Text Only{% endtrans %}
                            </span>
                        </label>
                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                            <input type="radio" name="logo_type" value="favicon_text" class="w-4 h-4 text-primary border-gray-300 focus:ring-primary" 
                                {% if site is defined and site.logo_type == 'favicon_text' %}checked{% endif %} 
                                onchange="toggleLogoType('favicon_text')" data-testid="radio-logo-type-favicon-text">
                            <span class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 group-hover:text-primary">
                                <i class="fa fa-star"></i> {% trans %}Favicon + Text{% endtrans %}
                            </span>
                        </label>
                    </div>
                </div>

                <!-- Image Logo Section -->
                <div id="image-logo-section" class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Site Logo (Image){% endtrans %}</label>
                        <div class="flex items-start gap-4">
                            <div id="logo-preview-container" class="w-32 h-32 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center overflow-hidden bg-gray-50 dark:bg-gray-800">
                                {% if site is defined and site.site_logo %}
                                <img src="{{ site.site_logo }}" alt="Current Logo" id="logo-preview" class="max-w-full max-h-full object-contain" data-testid="img-logo-preview">
                                {% else %}
                                <span class="text-gray-400 dark:text-gray-500 text-xs text-center" id="logo-placeholder"><i class="fa fa-image text-2xl mb-1 block"></i>{% trans %}No logo{% endtrans %}</span>
                                <img src="" alt="Logo Preview" id="logo-preview" class="max-w-full max-h-full object-contain hidden" data-testid="img-logo-preview">
                                {% endif %}
                            </div>
                            <div class="flex-1 space-y-2">
                                <div class="flex gap-2">
                                    <input type="file" id="logo-file-input" accept="image/*" 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-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-primary-light/10 dark:file:text-primary-light cursor-pointer" data-testid="input-logo-file">
                                    <button type="button" id="remove-logo-btn" class="px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" onclick="removeLogo()" data-testid="btn-remove-logo">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                                <input type="hidden" name="site_logo" id="site_logo_value" value="{{ (site.site_logo if site is defined and site.site_logo) or '' }}">
                                <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Recommended: SVG or PNG, max 2MB{% endtrans %}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Text Logo Section (includes both Text Only and Favicon+Text modes) -->
                <div id="text-logo-section" class="space-y-4 {% if site is defined and (site.logo_type == 'text' or site.logo_type == 'favicon_text') %}block{% else %}hidden{% endif %}">
                    
                    <!-- Dynamic note for Favicon+Text mode -->
                    {% if site is defined and site.logo_type == 'favicon_text' %}
                    <div id="favicon-text-note" class="flex items-center gap-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-xs text-blue-700 dark:text-blue-400">
                        <i class="fa fa-info-circle"></i> 
                        <strong>{% trans %}Favicon + Text mode:{% endtrans %}</strong> 
                        {% trans %}Your favicon will appear before the logo text. Make sure you have uploaded a favicon above.{% endtrans %}
                    </div>
                    {% endif %}
                    
                    <!-- Logo Text -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Logo Text{% endtrans %}</label>
                        <input type="text" name="logo_text" id="logo_text" 
                            value="{{ (site.logo_text if site is defined and site.logo_text) or (site.get('brand_replacement') if site is defined else '') or '' }}"
                            placeholder="{% trans %}Enter your site name{% 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-logo-text">
                    </div>

                    <!-- Font Family -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Font Family{% endtrans %}</label>
                        <select name="logo_text_font" 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="select-logo-text-font">
                            <option value="font-sans" {% if site is defined and site.logo_text_font == 'font-sans' or site.logo_text_font is not defined %}selected{% endif %}>{% trans %}Inter (Sans-serif){% endtrans %}</option>
                            <option value="font-serif" {% if site is defined and site.logo_text_font == 'font-serif' %}selected{% endif %}>{% trans %}Merriweather (Serif){% endtrans %}</option>
                            <option value="font-mono" {% if site is defined and site.logo_text_font == 'font-mono' %}selected{% endif %}>{% trans %}JetBrains Mono (Monospace){% endtrans %}</option>
                            <option value="font-poppins" {% if site is defined and site.logo_text_font == 'font-poppins' %}selected{% endif %}>{% trans %}Poppins (Geometric){% endtrans %}</option>
                            <option value="font-roboto" {% if site is defined and site.logo_text_font == 'font-roboto' %}selected{% endif %}>{% trans %}Roboto (Neutral){% endtrans %}</option>
                            <option value="font-opensans" {% if site is defined and site.logo_text_font == 'font-opensans' %}selected{% endif %}>{% trans %}Open Sans (Friendly){% endtrans %}</option>
                            <option value="font-lato" {% if site is defined and site.logo_text_font == 'font-lato' %}selected{% endif %}>{% trans %}Lato (Elegant){% endtrans %}</option>
                            <option value="font-montserrat" {% if site is defined and site.logo_text_font == 'font-montserrat' %}selected{% endif %}>{% trans %}Montserrat (Modern){% endtrans %}</option>
                            <option value="font-oswald" {% if site is defined and site.logo_text_font == 'font-oswald' %}selected{% endif %}>{% trans %}Oswald (Bold){% endtrans %}</option>
                            <option value="font-raleway" {% if site is defined and site.logo_text_font == 'font-raleway' %}selected{% endif %}>{% trans %}Raleway (Thin){% endtrans %}</option>
                        </select>
                    </div>

                    <!-- Custom Font Option (Advanced) -->
                    <div class="mt-2 p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
                        <details class="text-sm">
                            <summary class="text-primary cursor-pointer font-medium">{% trans %}Advanced: Custom Font{% endtrans %}</summary>
                            <div class="mt-3 space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Custom Font Family{% endtrans %}</label>
                                    <input type="text" name="logo_text_custom_font" 
                                        value="{{ (site.logo_text_custom_font if site is defined and site.logo_text_custom_font) or '' }}"
                                        placeholder="'Your Font', sans-serif"
                                        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">
                                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Enter CSS font-family value (e.g., 'Helvetica', Arial, sans-serif){% endtrans %}</p>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Custom Font URL{% endtrans %}</label>
                                    <input type="url" name="logo_text_font_url" 
                                        value="{{ (site.logo_text_font_url if site is defined and site.logo_text_font_url) or '' }}"
                                        placeholder="https://fonts.googleapis.com/css2?family=Your+Font"
                                        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">
                                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Link to Google Fonts or custom font stylesheet{% endtrans %}</p>
                                </div>
                            </div>
                        </details>
                    </div>

                    <!-- Text Size -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Logo Text Size{% endtrans %}</label>
                        <select name="logo_text_size" 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="select-logo-text-size">
                            <option value="text-lg" {% if site is defined and site.logo_text_size == 'text-lg' %}selected{% endif %}>{% trans %}Small (18px){% endtrans %}</option>
                            <option value="text-xl" {% if site is defined and site.logo_text_size == 'text-xl' %}selected{% endif %}>{% trans %}Medium (20px){% endtrans %}</option>
                            <option value="text-2xl" {% if site is defined and site.logo_text_size == 'text-2xl' or site.logo_text_size is not defined %}selected{% endif %}>{% trans %}Large (24px){% endtrans %}</option>
                            <option value="text-3xl" {% if site is defined and site.logo_text_size == 'text-3xl' %}selected{% endif %}>{% trans %}Extra Large (30px){% endtrans %}</option>
                            <option value="text-4xl" {% if site is defined and site.logo_text_size == 'text-4xl' %}selected{% endif %}>{% trans %}2X Large (36px){% endtrans %}</option>
                        </select>
                    </div>

                    <!-- Font Weight -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Font Weight{% endtrans %}</label>
                        <select name="logo_text_weight" 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="select-logo-text-weight">
                            <option value="font-light" {% if site is defined and site.logo_text_weight == 'font-light' %}selected{% endif %}>{% trans %}Light (300){% endtrans %}</option>
                            <option value="font-normal" {% if site is defined and site.logo_text_weight == 'font-normal' %}selected{% endif %}>{% trans %}Normal (400){% endtrans %}</option>
                            <option value="font-medium" {% if site is defined and site.logo_text_weight == 'font-medium' %}selected{% endif %}>{% trans %}Medium (500){% endtrans %}</option>
                            <option value="font-semibold" {% if site is defined and site.logo_text_weight == 'font-semibold' or site.logo_text_weight is not defined %}selected{% endif %}>{% trans %}Semi Bold (600){% endtrans %}</option>
                            <option value="font-bold" {% if site is defined and site.logo_text_weight == 'font-bold' %}selected{% endif %}>{% trans %}Bold (700){% endtrans %}</option>
                            <option value="font-extrabold" {% if site is defined and site.logo_text_weight == 'font-extrabold' %}selected{% endif %}>{% trans %}Extra Bold (800){% endtrans %}</option>
                        </select>
                    </div>

                    <!-- Text Style (Italic, Underline, etc.) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Text Style{% endtrans %}</label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                                <input type="checkbox" name="logo_text_italic" value="1" class="rounded text-primary focus:ring-primary" 
                                    {% if site is defined and site.logo_text_italic == '1' %}checked{% endif %}>
                                <span class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-italic mr-1"></i>{% trans %}Italic{% endtrans %}</span>
                            </label>
                            <label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                                <input type="checkbox" name="logo_text_underline" value="1" class="rounded text-primary focus:ring-primary" 
                                    {% if site is defined and site.logo_text_underline == '1' %}checked{% endif %}>
                                <span class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-underline mr-1"></i>{% trans %}Underline{% endtrans %}</span>
                            </label>
                            <label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                                <input type="checkbox" name="logo_text_uppercase" value="1" class="rounded text-primary focus:ring-primary" 
                                    {% if site is defined and site.logo_text_uppercase == '1' %}checked{% endif %}>
                                <span class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-arrow-up mr-1"></i>{% trans %}Uppercase{% endtrans %}</span>
                            </label>
                            <label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800">
                                <input type="checkbox" name="logo_text_letter_spacing" value="1" class="rounded text-primary focus:ring-primary" 
                                    {% if site is defined and site.logo_text_letter_spacing == '1' %}checked{% endif %}>
                                <span class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-arrows-left-right mr-1"></i>{% trans %}Wide Spacing{% endtrans %}</span>
                            </label>
                        </div>
                    </div>

                    <!-- Light Mode Color -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Logo Color (Light Mode){% endtrans %}</label>
                        <div class="flex gap-2">
                            <input type="color" name="logo_text_color_light" id="logo_text_color_light" 
                                value="{{ (site.logo_text_color_light if site is defined and site.logo_text_color_light) or '#000000' }}"
                                class="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer"
                                data-testid="input-logo-text-color-light">
                            <input type="text" name="logo_text_color_light_hex" 
                                value="{{ (site.logo_text_color_light if site is defined and site.logo_text_color_light) or '#000000' }}"
                                placeholder="#000000"
                                class="flex-1 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-logo-text-color-light-hex">
                        </div>
                    </div>

                    <!-- Dark Mode Color -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Logo Color (Dark Mode){% endtrans %}</label>
                        <div class="flex gap-2">
                            <input type="color" name="logo_text_color_dark" id="logo_text_color_dark" 
                                value="{{ (site.logo_text_color_dark if site is defined and site.logo_text_color_dark) or '#FFFFFF' }}"
                                class="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer"
                                data-testid="input-logo-text-color-dark">
                            <input type="text" name="logo_text_color_dark_hex" 
                                value="{{ (site.logo_text_color_dark if site is defined and site.logo_text_color_dark) or '#FFFFFF' }}"
                                placeholder="#FFFFFF"
                                class="flex-1 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-logo-text-color-dark-hex">
                        </div>
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Color for dark mode (light text on dark background){% endtrans %}</p>
                    </div>

                    <!-- Preview -->
                    <div class="mt-6 p-4 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{% trans %}Preview:{% endtrans %}</label>
                        <div id="logo-preview-text" class="flex items-center gap-2">
                            <!-- Preview will be updated via JavaScript -->
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">{% trans %}Preview shows light mode colors. Dark mode colors will apply automatically.{% endtrans %}</p>
                    </div>
                </div>

                <!-- Favicon Section (always visible) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Site Favicon{% endtrans %}</label>
                    <div class="flex items-start gap-4">
                        <div id="favicon-preview-container" class="w-16 h-16 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center overflow-hidden bg-gray-50 dark:bg-gray-800">
                            {% if site is defined and site.site_favicon %}
                            <img src="{{ site.site_favicon }}" alt="Current Favicon" id="favicon-preview" class="max-w-full max-h-full object-contain" data-testid="img-favicon-preview">
                            {% else %}
                            <span class="text-gray-400 dark:text-gray-500 text-xs text-center" id="favicon-placeholder"><i class="fa fa-star text-lg"></i></span>
                            <img src="" alt="Favicon Preview" id="favicon-preview" class="max-w-full max-h-full object-contain hidden" data-testid="img-favicon-preview">
                            {% endif %}
                        </div>
                        <div class="flex-1 space-y-2">
                            <div class="flex gap-2">
                                <input type="file" id="favicon-file-input" accept="image/*" 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-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 dark:file:bg-primary-light/10 dark:file:text-primary-light cursor-pointer" data-testid="input-favicon-file">
                                <button type="button" id="remove-favicon-btn" class="px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" onclick="removeFavicon()" data-testid="btn-remove-favicon">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                            <input type="hidden" name="site_favicon" id="site_favicon_value" value="{{ (site.site_favicon if site is defined and site.site_favicon) or '' }}">
                            <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Recommended: ICO or PNG, 32x32 or 64x64{% endtrans %}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>


  
  
          <!-- Domain Replacement Card -->
          <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-orange-500/5 to-amber-500/5 dark:from-orange-400/5 dark:to-amber-400/5">
                  <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-globe mr-2 text-orange-500"></i>{% trans %}Domain Replacement{% endtrans %}</h3>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Replaces the old domain across all templates automatically when you save settings. No extra steps needed.{% endtrans %}</p>
              </div>
              <div class="p-6 space-y-4">
                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Find domain{% endtrans %}</label>
                          <input type="text" name="brand_original_domain" id="brand_original_domain"
                              value="{{ site.get('brand_original_domain', 'onlineconvert.cc') }}"
                              placeholder="onlineconvert.cc"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent font-mono">
                          <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}The domain currently in your templates (what to replace from).{% endtrans %}</p>
                      </div>
                      <div>
                          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Replace with domain{% endtrans %}</label>
                          <input type="text" name="brand_domain" id="brand_domain"
                              value="{{ site.get('brand_domain', '') }}"
                              placeholder="e.g. mybrand.io"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent font-mono"
                              oninput="domainRepAutoName(this.value)">
                          <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Your new domain (any TLD).{% endtrans %}</p>
                      </div>
                  </div>
                  <div>
                      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{% trans %}Brand name{% endtrans %}</label>
                      <input type="text" name="brand_replacement" id="brand_replacement"
                          value="{{ site.get('brand_replacement', '') }}"
                          placeholder="e.g. MyBrand"
                          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent">
                      <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Replaces the brand name (e.g. OnlineConvert). Auto-derived from domain if left blank.{% endtrans %}</p>
                  </div>
                  <p class="text-xs text-orange-500 dark:text-orange-400"><i class="fa fa-circle-info mr-1"></i>{% trans %}Applied automatically across all template files when you save settings.{% endtrans %}</p>
              </div>
          </div>

          <script>
          (function() {
              window.domainRepAutoName = function(val) {
                  var nameEl = document.getElementById('brand_replacement');
                  if (!nameEl || nameEl._userEdited) return;
                  var base = (val || '').split('.')[0];
                  nameEl.value = base ? base.charAt(0).toUpperCase() + base.slice(1) : '';
              };
              var nameEl = document.getElementById('brand_replacement');
              if (nameEl) nameEl.addEventListener('input', function() { nameEl._userEdited = !!nameEl.value; });
          })();
          </script>

          <!-- Brand Colors Card -->
        <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-cyan-500/5 dark:from-blue-400/5 dark:to-cyan-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-droplet mr-2 text-blue-500"></i>{% trans %}Brand Colors{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Controls the primary accent color used across buttons, links, borders, focus rings, and the scrollbar across the entire site.{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-6">

                <!-- Live preview -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{% trans %}Live Preview{% endtrans %}</label>
                    <div class="flex flex-wrap gap-3 items-center p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700">
                        <button type="button" id="brand-preview-btn" class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white shadow-md transition-all">{% trans %}Primary Button{% endtrans %}</button>
                        <button type="button" id="brand-preview-btn-outline" class="px-5 py-2.5 rounded-xl text-sm font-semibold border-2 bg-transparent transition-all">{% trans %}Outline Button{% endtrans %}</button>
                        <span id="brand-preview-link" class="text-sm font-medium cursor-pointer underline underline-offset-2 transition-all">{% trans %}Link text{% endtrans %}</span>
                        <div id="brand-preview-swatch" class="w-8 h-8 rounded-lg shadow-md transition-all"></div>
                        <div id="brand-preview-swatch-light" class="w-8 h-8 rounded-lg opacity-60 transition-all"></div>
                    </div>
                </div>

                <!-- Primary Colors -->
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                    <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-circle mr-1 text-blue-500"></i>{% trans %}Primary Color{% endtrans %}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Main{% endtrans %} <span class="text-gray-400">(buttons, highlights)</span></label>
                            <div class="flex gap-2">
                                <input type="color" id="primary_color" name="primary_color"
                                    value="{{ (site.get('primary_color', '#3B82F6') if site is defined) or '#3B82F6' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('primary_color','primary_color_hex'); updateBrandPreview()">
                                <input type="text" id="primary_color_hex"
                                    value="{{ (site.get('primary_color', '#3B82F6') if site is defined) or '#3B82F6' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('primary_color_hex','primary_color'); updateBrandPreview()">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Dark / Hover{% endtrans %} <span class="text-gray-400">(hover states)</span></label>
                            <div class="flex gap-2">
                                <input type="color" id="primary_dark_color" name="primary_dark_color"
                                    value="{{ (site.get('primary_dark_color', '#2563EB') if site is defined) or '#2563EB' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('primary_dark_color','primary_dark_color_hex')">
                                <input type="text" id="primary_dark_color_hex"
                                    value="{{ (site.get('primary_dark_color', '#2563EB') if site is defined) or '#2563EB' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('primary_dark_color_hex','primary_dark_color')">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Light{% endtrans %} <span class="text-gray-400">(tinted text, icons)</span></label>
                            <div class="flex gap-2">
                                <input type="color" id="primary_light_color" name="primary_light_color"
                                    value="{{ (site.get('primary_light_color', '#60A5FA') if site is defined) or '#60A5FA' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('primary_light_color','primary_light_color_hex'); updateBrandPreview()">
                                <input type="text" id="primary_light_color_hex"
                                    value="{{ (site.get('primary_light_color', '#60A5FA') if site is defined) or '#60A5FA' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('primary_light_color_hex','primary_light_color'); updateBrandPreview()">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Scrollbar Colors -->
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                    <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-arrows-up-down mr-1 text-gray-500"></i>{% trans %}Scrollbar Colors{% endtrans %}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Thumb Color{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="scrollbar_thumb" name="scrollbar_thumb"
                                    value="{{ (site.get('scrollbar_thumb', '#3B82F6') if site is defined) or '#3B82F6' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('scrollbar_thumb','scrollbar_thumb_hex')">
                                <input type="text" id="scrollbar_thumb_hex"
                                    value="{{ (site.get('scrollbar_thumb', '#3B82F6') if site is defined) or '#3B82F6' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('scrollbar_thumb_hex','scrollbar_thumb')">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode Track{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="scrollbar_track_dark" name="scrollbar_track_dark"
                                    value="{{ (site.get('scrollbar_track_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('scrollbar_track_dark','scrollbar_track_dark_hex')">
                                <input type="text" id="scrollbar_track_dark_hex"
                                    value="{{ (site.get('scrollbar_track_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('scrollbar_track_dark_hex','scrollbar_track_dark')">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode Track{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="scrollbar_track_light" name="scrollbar_track_light"
                                    value="{{ (site.get('scrollbar_track_light', '#f1f5f9') if site is defined) or '#f1f5f9' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('scrollbar_track_light','scrollbar_track_light_hex')">
                                <input type="text" id="scrollbar_track_light_hex"
                                    value="{{ (site.get('scrollbar_track_light', '#f1f5f9') if site is defined) or '#f1f5f9' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('scrollbar_track_light_hex','scrollbar_track_light')">
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Tip: Set thumb color equal to Primary color for a consistent look. Changes apply on next page load.{% endtrans %}</p>
                </div>

                <!-- Dropzone Loader Colors -->
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                    <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-circle-notch mr-1 text-gray-500"></i>{% trans %}Upload Dropzone Loader Color{% endtrans %}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="dropzone_loader_color_light" name="dropzone_loader_color_light"
                                    value="{{ (site.get('dropzone_loader_color_light', '#10B981') if site is defined) or '#10B981' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('dropzone_loader_color_light','dropzone_loader_color_light_hex')">
                                <input type="text" id="dropzone_loader_color_light_hex"
                                    value="{{ (site.get('dropzone_loader_color_light', '#10B981') if site is defined) or '#10B981' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('dropzone_loader_color_light_hex','dropzone_loader_color_light')">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="dropzone_loader_color_dark" name="dropzone_loader_color_dark"
                                    value="{{ (site.get('dropzone_loader_color_dark', '#10B981') if site is defined) or '#10B981' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('dropzone_loader_color_dark','dropzone_loader_color_dark_hex')">
                                <input type="text" id="dropzone_loader_color_dark_hex"
                                    value="{{ (site.get('dropzone_loader_color_dark', '#10B981') if site is defined) or '#10B981' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('dropzone_loader_color_dark_hex','dropzone_loader_color_dark')">
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Controls the circular progress indicator color in the file upload dropzone widget. Changes apply on next page load.{% endtrans %}</p>
                </div>

            </div>
        </div>

        <!-- Hero Appearance Card -->
        <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-purple-500/5 to-blue-500/5 dark:from-purple-400/5 dark:to-blue-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-palette mr-2 text-purple-500"></i>{% trans %}Hero Appearance{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Customize the hero section background and text colors across all public pages.{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-6">

                <!-- Background Type Toggle -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{% trans %}Background Type{% endtrans %}</label>
                    <div class="flex gap-1 p-1 rounded-xl bg-gray-100 dark:bg-gray-800 w-fit">
                        <button type="button" id="hero-type-btn-gradient" onclick="setHeroBgType('gradient')"
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all">
                            <i class="fa fa-swatchbook mr-1"></i>{% trans %}Gradient{% endtrans %}
                        </button>
                        <button type="button" id="hero-type-btn-solid" onclick="setHeroBgType('solid')"
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all">
                            <i class="fa fa-square mr-1"></i>{% trans %}Solid Color{% endtrans %}
                        </button>
                        <button type="button" id="hero-type-btn-image" onclick="setHeroBgType('image')"
                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all">
                            <i class="fa fa-image mr-1"></i>{% trans %}Image{% endtrans %}
                        </button>
                    </div>
                    <input type="hidden" name="hero_bg_type" id="hero_bg_type_input" value="{{ (site.get('hero_bg_type', 'gradient') if site is defined) or 'gradient' }}">
                </div>

                <!-- Live Preview Bar -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{% trans %}Live Preview{% endtrans %} <span class="text-xs text-gray-400">({% trans %}light mode{% endtrans %})</span></label>
                    <div id="hero-preview-bar" class="h-24 rounded-xl overflow-hidden relative transition-all">
                        <!-- Gradient / Solid view: full-width centred text -->
                        <div id="hero-preview-single" class="absolute inset-0 flex items-center justify-center">
                            <span id="hero-preview-text-sample" class="text-sm font-semibold px-4 text-center relative z-10">{% trans %}Hero Section Preview{% endtrans %}</span>
                        </div>
                        <!-- Image view: two-column split -->
                        <div id="hero-preview-two-col" class="hidden absolute inset-0 flex">
                            <div id="hero-preview-left-col" class="flex-1 flex flex-col justify-center px-4" style="background:#1e3a5f;">
                                <div class="text-xs font-bold leading-snug mb-0.5" id="hero-preview-left-heading" style="color:#fff;">{% trans %}Free online file converter{% endtrans %}</div>
                                <div class="text-[9px] leading-snug opacity-75" style="color:#fff;">{% trans %}Convert media files online{% endtrans %}</div>
                            </div>
                            <div id="hero-preview-right-col" class="w-2/5 relative overflow-hidden" style="background:#1e3a5f;">
                                <img id="hero-preview-right-img" src="" alt="" class="absolute inset-0 w-full h-full object-cover hidden">
                                <div id="hero-preview-right-placeholder" class="absolute inset-0 flex items-center justify-center">
                                    <i class="fa fa-image text-white/40 text-2xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- GRADIENT SECTION -->
                <div id="hero-gradient-section" class="space-y-4">
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode Gradient{% endtrans %}</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}From Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_grad_from_light" name="hero_grad_from_light"
                                        value="{{ (site.get('hero_grad_from_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_grad_from_light','hero_grad_from_light_hex'); updateHeroPreview()">
                                    <input type="text" id="hero_grad_from_light_hex"
                                        value="{{ (site.get('hero_grad_from_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_grad_from_light_hex','hero_grad_from_light'); updateHeroPreview()">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}To Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_grad_to_light" name="hero_grad_to_light"
                                        value="{{ (site.get('hero_grad_to_light', '#8B5CF6') if site is defined) or '#8B5CF6' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_grad_to_light','hero_grad_to_light_hex'); updateHeroPreview()">
                                    <input type="text" id="hero_grad_to_light_hex"
                                        value="{{ (site.get('hero_grad_to_light', '#8B5CF6') if site is defined) or '#8B5CF6' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_grad_to_light_hex','hero_grad_to_light'); updateHeroPreview()">
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Direction{% endtrans %}</label>
                            <select name="hero_grad_dir" id="hero_grad_dir"
                                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 text-sm focus:ring-2 focus:ring-primary/50 outline-none"
                                onchange="updateHeroPreview()">
                                {% set _hgd = (site.get('hero_grad_dir','135deg') if site is defined) or '135deg' %}
                                <option value="135deg" {% if _hgd == '135deg' %}selected{% endif %}>{% trans %}135° Diagonal (↘){% endtrans %}</option>
                                <option value="to right" {% if _hgd == 'to right' %}selected{% endif %}>{% trans %}Left → Right{% endtrans %}</option>
                                <option value="to bottom" {% if _hgd == 'to bottom' %}selected{% endif %}>{% trans %}Top → Bottom{% endtrans %}</option>
                                <option value="to bottom right" {% if _hgd == 'to bottom right' %}selected{% endif %}>{% trans %}Top-Left → Bottom-Right{% endtrans %}</option>
                                <option value="to bottom left" {% if _hgd == 'to bottom left' %}selected{% endif %}>{% trans %}Top-Right → Bottom-Left{% endtrans %}</option>
                                <option value="45deg" {% if _hgd == '45deg' %}selected{% endif %}>{% trans %}45° Diagonal (↗){% endtrans %}</option>
                            </select>
                        </div>
                    </div>
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode Gradient{% endtrans %}</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}From Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_grad_from_dark" name="hero_grad_from_dark"
                                        value="{{ (site.get('hero_grad_from_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_grad_from_dark','hero_grad_from_dark_hex')">
                                    <input type="text" id="hero_grad_from_dark_hex"
                                        value="{{ (site.get('hero_grad_from_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_grad_from_dark_hex','hero_grad_from_dark')">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}To Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_grad_to_dark" name="hero_grad_to_dark"
                                        value="{{ (site.get('hero_grad_to_dark', '#5b21b6') if site is defined) or '#5b21b6' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_grad_to_dark','hero_grad_to_dark_hex')">
                                    <input type="text" id="hero_grad_to_dark_hex"
                                        value="{{ (site.get('hero_grad_to_dark', '#5b21b6') if site is defined) or '#5b21b6' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_grad_to_dark_hex','hero_grad_to_dark')">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SOLID COLOR SECTION -->
                <div id="hero-solid-section" class="hidden space-y-4">
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_solid_light" name="hero_solid_light"
                                        value="{{ (site.get('hero_solid_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_solid_light','hero_solid_light_hex'); updateHeroPreview()">
                                    <input type="text" id="hero_solid_light_hex"
                                        value="{{ (site.get('hero_solid_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_solid_light_hex','hero_solid_light'); updateHeroPreview()">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode Color{% endtrans %}</label>
                                <div class="flex gap-2">
                                    <input type="color" id="hero_solid_dark" name="hero_solid_dark"
                                        value="{{ (site.get('hero_solid_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                        class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                        oninput="syncHexInput('hero_solid_dark','hero_solid_dark_hex')">
                                    <input type="text" id="hero_solid_dark_hex"
                                        value="{{ (site.get('hero_solid_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                        class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                        oninput="syncColorPicker('hero_solid_dark_hex','hero_solid_dark')">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- IMAGE SECTION -->
                <div id="hero-image-section" class="hidden space-y-4">
                    <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Background Image{% endtrans %}</label>
                            <div class="flex items-start gap-4">
                                <div class="w-24 h-16 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center overflow-hidden bg-gray-100 dark:bg-gray-800 flex-shrink-0">
                                    {% if site is defined and site.get('hero_bg_image', '') %}
                                    <img src="{{ site.get('hero_bg_image', '') }}" alt="Hero BG" id="hero-img-preview" class="w-full h-full object-cover">
                                    <span id="hero-img-placeholder" class="hidden text-gray-400 text-xs text-center"><i class="fa fa-image text-xl block mb-1"></i>{% trans %}No image{% endtrans %}</span>
                                    {% else %}
                                    <span id="hero-img-placeholder" class="text-gray-400 text-xs text-center"><i class="fa fa-image text-xl block mb-1"></i>{% trans %}No image{% endtrans %}</span>
                                    <img src="" alt="Hero BG" id="hero-img-preview" class="w-full h-full object-cover hidden">
                                    {% endif %}
                                </div>
                                <div class="flex-1 space-y-2">
                                    <div class="flex gap-2">
                                        <input type="file" id="hero-bg-file-input" accept="image/*"
                                            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-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer">
                                        <button type="button" class="px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all flex-shrink-0" onclick="removeHeroBgImage()">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                    <input type="hidden" name="hero_bg_image" id="hero_bg_image_value" value="{{ (site.get('hero_bg_image', '') if site is defined) or '' }}">
                                    <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Recommended: Wide image (1920×600 px), max 5 MB{% endtrans %}</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2"><i class="fa fa-palette mr-1"></i>{% trans %}Column Background Color{% endtrans %}</label>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">{% trans %}Applied to the left text column and behind the image in the right column.{% endtrans %}</p>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-500 mb-1"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode{% endtrans %}</label>
                                    <div class="flex gap-2">
                                        <input type="color" id="hero_img_left_color_light" name="hero_img_left_color_light"
                                            value="{{ (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                            class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                            oninput="syncHexInput('hero_img_left_color_light','hero_img_left_color_light_hex'); updateHeroPreview()">
                                        <input type="text" id="hero_img_left_color_light_hex"
                                            value="{{ (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' }}"
                                            class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                            oninput="syncColorPicker('hero_img_left_color_light_hex','hero_img_left_color_light'); updateHeroPreview()">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-500 mb-1"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode{% endtrans %}</label>
                                    <div class="flex gap-2">
                                        <input type="color" id="hero_img_left_color_dark" name="hero_img_left_color_dark"
                                            value="{{ (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                            class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                            oninput="syncHexInput('hero_img_left_color_dark','hero_img_left_color_dark_hex')">
                                        <input type="text" id="hero_img_left_color_dark_hex"
                                            value="{{ (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' }}"
                                            class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                            oninput="syncColorPicker('hero_img_left_color_dark_hex','hero_img_left_color_dark')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hero Text Color -->
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 space-y-4">
                    <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200"><i class="fa fa-font mr-1 text-gray-500"></i>{% trans %}Hero Text Color{% endtrans %}</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-sun mr-1 text-yellow-500"></i>{% trans %}Light Mode{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="hero_text_color_light" name="hero_text_color_light"
                                    value="{{ (site.get('hero_text_color_light', '#ffffff') if site is defined) or '#ffffff' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('hero_text_color_light','hero_text_color_light_hex'); updateHeroPreview()">
                                <input type="text" id="hero_text_color_light_hex"
                                    value="{{ (site.get('hero_text_color_light', '#ffffff') if site is defined) or '#ffffff' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('hero_text_color_light_hex','hero_text_color_light'); updateHeroPreview()">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"><i class="fa fa-moon mr-1 text-indigo-500"></i>{% trans %}Dark Mode{% endtrans %}</label>
                            <div class="flex gap-2">
                                <input type="color" id="hero_text_color_dark" name="hero_text_color_dark"
                                    value="{{ (site.get('hero_text_color_dark', '#ffffff') if site is defined) or '#ffffff' }}"
                                    class="w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer flex-shrink-0"
                                    oninput="syncHexInput('hero_text_color_dark','hero_text_color_dark_hex')">
                                <input type="text" id="hero_text_color_dark_hex"
                                    value="{{ (site.get('hero_text_color_dark', '#ffffff') if site is defined) or '#ffffff' }}"
                                    class="flex-1 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 font-mono focus:ring-2 focus:ring-primary/50 outline-none" maxlength="7"
                                    oninput="syncColorPicker('hero_text_color_dark_hex','hero_text_color_dark')">
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 dark:text-gray-500">{% trans %}Applied to headings and body text inside the hero section on all public pages.{% endtrans %}</p>
                </div>

            </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-indigo-500/5 to-purple-500/5 dark:from-indigo-400/5 dark:to-purple-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-globe mr-2 text-indigo-500"></i>{% trans %}Subdomain Routing{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}When enabled, converter pages use subdomains (e.g. audio.yourdomain.com). When disabled, all pages use path-based URLs (e.g. yourdomain.com/converter/audio/mp3).{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center gap-3">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="subdomains_enabled" value="1" class="sr-only peer" {% if site is defined and site.subdomains_enabled == '1' %}checked{% endif %} data-testid="input-subdomains_enabled">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-500/25 dark:peer-focus:ring-indigo-400/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-indigo-500"></div>
                    </label>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable subdomain routing{% endtrans %}</span>
                </div>
                <div class="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-xs text-amber-700 dark:text-amber-400">
                    <i class="fa fa-exclamation-triangle mr-1"></i>
                    <strong>{% trans %}Important:{% endtrans %}</strong> {% trans %}Subdomain routing requires wildcard DNS (*.yourdomain.com) and a wildcard SSL certificate to be configured on your server. Without these, subdomain URLs will not work.{% endtrans %}
                </div>
            </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-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-code mr-2 text-secondary"></i>{% trans %}Code Injection{% endtrans %}</h3>
            </div>
            <div class="p-6 space-y-6">

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Global Head HTML{% endtrans %}</label>
                    <textarea name="global_head_html" rows="5"
                        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"
                        placeholder="{% trans %}<!-- Custom HTML injected into <head> on all pages -->{% endtrans %}"
                        data-testid="input-global_head_html">{{ (site.global_head_html if site is defined and site.global_head_html) or '' }}</textarea>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}This HTML will be injected into the &lt;head&gt; section of every page. Useful for analytics, custom fonts, etc.{% endtrans %}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Plan Head HTML{% endtrans %}</label>
                    <textarea name="plan_head_html" rows="5"
                        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"
                        placeholder="{% trans %}<!-- Custom HTML injected into <head> only for plans with Plan Head HTML enabled -->{% endtrans %}"
                        data-testid="input-plan_head_html">{{ (site.plan_head_html if site is defined and site.plan_head_html) or '' }}</textarea>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}This HTML is injected into &lt;head&gt; only for users whose plan has "Plan Head HTML Enabled" checked. Useful for injecting analytics or ad scripts for free/guest users.{% endtrans %}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Global Body HTML{% endtrans %}</label>
                    <textarea name="global_body_html" rows="5"
                        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"
                        placeholder="{% trans %}<!-- Custom HTML injected after opening <body> on all pages -->{% endtrans %}"
                        data-testid="input-global_body_html">{{ (site.global_body_html if site is defined and site.global_body_html) or '' }}</textarea>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}This HTML will be injected right after the opening &lt;body&gt; tag on every page. Useful for tag managers, noscript tags, etc.{% endtrans %}</p>
                </div>

            </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-shoe-prints mr-2 text-accent"></i>{% trans %}Footer Settings{% endtrans %}</h3>
            </div>
            <div class="p-6 space-y-4">

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Footer Copyright Text{% endtrans %}</label>
                    <input type="text" name="footer_text"
                        value="{{ (site.footer_text if site is defined and site.footer_text) or '' }}"
                        placeholder='Copyright &copy; {{ site.get("brand_domain") or site.get("website_url") or "OnlineConvert.cc" }} 2026. All rights reserved.'
                        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-footer_text">
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}HTML is allowed. Leave empty to use the default copyright text.{% endtrans %}</p>
                </div>

            </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-blue-500/5 to-orange-500/5 dark:from-blue-400/5 dark:to-orange-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-share-alt mr-2 text-blue-500"></i>{% trans %}Social Action Buttons{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Configure Bookmark, Like, Share, and Tweet buttons shown below ratings on all pages{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-6">

                <div class="flex items-center gap-3">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="social_buttons_enabled" value="1" class="sr-only peer" {% if site is defined and site.social_buttons_enabled == '1' %}checked{% endif %} data-testid="input-social_buttons_enabled">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/25 dark:peer-focus:ring-primary-light/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-primary"></div>
                    </label>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable social buttons on all pages{% endtrans %}</span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex items-center gap-3 p-3 rounded-lg border border-gray-100 dark:border-gray-800">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="social_bookmark_enabled" value="1" class="sr-only peer" {% if site is not defined or site.social_bookmark_enabled != '0' %}checked{% endif %} data-testid="input-social_bookmark_enabled">
                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-600 peer-checked:bg-orange-500"></div>
                        </label>
                        <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fa fa-bookmark text-orange-500 mr-1"></i> {% trans %}Bookmark{% endtrans %}</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 rounded-lg border border-gray-100 dark:border-gray-800">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="social_like_enabled" value="1" class="sr-only peer" {% if site is not defined or site.social_like_enabled != '0' %}checked{% endif %} data-testid="input-social_like_enabled">
                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                        <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fa fa-thumbs-up text-blue-600 mr-1"></i> {% trans %}Like{% endtrans %}</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 rounded-lg border border-gray-100 dark:border-gray-800">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="social_share_enabled" value="1" class="sr-only peer" {% if site is not defined or site.social_share_enabled != '0' %}checked{% endif %} data-testid="input-social_share_enabled">
                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-600 peer-checked:bg-blue-500"></div>
                        </label>
                        <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fab fa-facebook text-blue-500 mr-1"></i> {% trans %}Share{% endtrans %}</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 rounded-lg border border-gray-100 dark:border-gray-800">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="social_tweet_enabled" value="1" class="sr-only peer" {% if site is not defined or site.social_tweet_enabled != '0' %}checked{% endif %} data-testid="input-social_tweet_enabled">
                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:after:border-gray-600 peer-checked:bg-sky-400"></div>
                        </label>
                        <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fab fa-twitter text-sky-400 mr-1"></i> {% trans %}Tweet{% endtrans %}</span>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Like Count{% endtrans %}</label>
                        <input type="text" name="social_like_count" value="{{ (site.social_like_count if site is defined and site.social_like_count) or '106k' }}"
                            placeholder="e.g. 106k"
                            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-social_like_count">
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Display count next to Like button (e.g. 106k, 1.2M){% endtrans %}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Share Count{% endtrans %}</label>
                        <input type="text" name="social_share_count" value="{{ (site.social_share_count if site is defined and site.social_share_count) or '2k' }}"
                            placeholder="e.g. 2k"
                            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-social_share_count">
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Display count next to Share button (e.g. 2k, 500){% endtrans %}</p>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Default Tweet Text{% endtrans %}</label>
                    <input type="text" name="social_tweet_text" value="{{ (site.social_tweet_text if site is defined and site.social_tweet_text) or '' }}"
                        placeholder="{% trans %}Check out this awesome converter!{% 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-social_tweet_text">
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Default text for tweet (page URL is auto-appended). Leave empty to use page title.{% endtrans %}</p>
                </div>

            </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-green-500/5 to-blue-500/5 dark:from-green-400/5 dark:to-blue-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-shield-alt mr-2 text-green-500"></i>{% trans %}reCAPTCHA Settings{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Google reCAPTCHA v2 for contact and report forms{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-6">

                <div class="flex items-center gap-3">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="recaptcha_enabled" value="1" class="sr-only peer" {% if site is not defined or site.recaptcha_enabled is not defined or site.recaptcha_enabled != '0' %}checked{% endif %} data-testid="input-recaptcha_enabled">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-500/25 dark:peer-focus:ring-green-400/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-green-500"></div>
                    </label>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Enable reCAPTCHA on forms{% endtrans %}</span>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Site Key{% endtrans %}</label>
                    <input type="text" name="recaptcha_site_key" value="{{ (site.recaptcha_site_key if site is defined and site.recaptcha_site_key) or '' }}"
                        placeholder="{% trans %}6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{% 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"
                        data-testid="input-recaptcha_site_key">
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Public site key from{% endtrans %} <a href="https://www.google.com/recaptcha/admin" target="_blank" class="text-primary hover:underline">{% trans %}Google reCAPTCHA Admin{% endtrans %}</a></p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Secret Key{% endtrans %}</label>
                    <input type="password" name="recaptcha_secret_key" value="{{ (site.recaptcha_secret_key if site is defined and site.recaptcha_secret_key) or '' }}"
                        placeholder="{% trans %}6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx{% 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"
                        data-testid="input-recaptcha_secret_key">
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Private secret key (kept server-side only){% endtrans %}</p>
                </div>

            </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-yellow-500/5 to-orange-500/5 dark:from-yellow-400/5 dark:to-orange-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-rectangle-ad mr-2 text-yellow-500"></i>{% trans %}Advertisement Settings{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Paste your ad code for each position. Ads are hidden from users on paid subscription plans.{% endtrans %}</p>
            </div>
            <div class="p-6 space-y-6">

                <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-xs text-blue-700 dark:text-blue-400">
                    <i class="fa fa-info-circle mr-1"></i>
                    <strong>{% trans %}Ad Positions:{% endtrans %}</strong> {% trans %}Banner (top of every page, below nav), Sidebar (next to converter tools), Inline (between content sections), Dashboard (inside user dashboard). All positions respect the paid plan setting.{% endtrans %}
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                        <i class="fa fa-rectangle-ad mr-1 text-yellow-500"></i>{% trans %}Top Banner Ad{% endtrans %} <span class="text-xs text-gray-400 ml-1">{% trans %}— shown below navigation on all pages{% endtrans %}</span>
                    </label>
                    <textarea name="ad_banner_code" rows="4"
                        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"
                        placeholder="{% trans %}<!-- Paste your banner ad code here (e.g. Google AdSense 728x90) -->{% endtrans %}"
                        data-testid="input-ad_banner_code">{{ (site.ad_banner_code if site is defined and site.ad_banner_code) or '' }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                        <i class="fa fa-columns mr-1 text-orange-500"></i>{% trans %}Sidebar Ad{% endtrans %} <span class="text-xs text-gray-400 ml-1">{% trans %}— shown in the converter tool sidebar{% endtrans %}</span>
                    </label>
                    <textarea name="ad_sidebar_code" rows="4"
                        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"
                        placeholder="{% trans %}<!-- Paste your sidebar ad code here (e.g. 300x250 box) -->{% endtrans %}"
                        data-testid="input-ad_sidebar_code">{{ (site.ad_sidebar_code if site is defined and site.ad_sidebar_code) or '' }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                        <i class="fa fa-minus mr-1 text-red-500"></i>{% trans %}Inline Ad{% endtrans %} <span class="text-xs text-gray-400 ml-1">{% trans %}— shown between content sections on pages{% endtrans %}</span>
                    </label>
                    <textarea name="ad_inline_code" rows="4"
                        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"
                        placeholder="{% trans %}<!-- Paste your inline ad code here (e.g. 728x90 or responsive) -->{% endtrans %}"
                        data-testid="input-ad_inline_code">{{ (site.ad_inline_code if site is defined and site.ad_inline_code) or '' }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                        <i class="fa fa-gauge mr-1 text-purple-500"></i>{% trans %}Dashboard Ad{% endtrans %} <span class="text-xs text-gray-400 ml-1">{% trans %}— shown inside the user dashboard for free plan users{% endtrans %}</span>
                    </label>
                    <textarea name="ad_dashboard_code" rows="4"
                        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"
                        placeholder="{% trans %}<!-- Paste your dashboard ad code here -->{% endtrans %}"
                        data-testid="input-ad_dashboard_code">{{ (site.ad_dashboard_code if site is defined and site.ad_dashboard_code) or '' }}</textarea>
                </div>

            </div>
        </div>

        <!-- SMTP / Email Settings -->
        <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-cyan-500/5 dark:from-blue-400/5 dark:to-cyan-400/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-envelope mr-2 text-blue-500"></i>{% trans %}Email / SMTP Settings{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Configure outgoing email for password resets and notifications.{% endtrans %}</p>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div class="sm:col-span-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-xs text-blue-700 dark:text-blue-400">
                    <i class="fa fa-info-circle mr-1"></i>
                    <strong>{% trans %}Gmail tip:{% endtrans %}</strong> {% trans %}Use{% endtrans %} <code>{% trans %}smtp.gmail.com{% endtrans %}</code>{% trans %}, port{% endtrans %} <code>587</code>{% trans %}, your Gmail address, and an{% endtrans %} <a href="https://myaccount.google.com/apppasswords" target="_blank" class="underline">{% trans %}App Password{% endtrans %}</a> {% trans %}(not your regular password). Requires 2FA enabled on your Google account.{% endtrans %}
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Host{% endtrans %}</label>
                    <input type="text" name="smtp_host" value="{{ site.smtp_host if site is defined else '' }}" placeholder="{% trans %}smtp.gmail.com{% endtrans %}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-host">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Port{% endtrans %}</label>
                    <input type="number" name="smtp_port" value="{{ site.smtp_port if site is defined else '587' }}" placeholder="587" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-port">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Username{% endtrans %}</label>
                    <input type="text" name="smtp_username" value="{{ site.smtp_username if site is defined else '' }}" placeholder="{% trans %}your@gmail.com{% endtrans %}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-username">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Password / App Password{% endtrans %}</label>
                    <input type="password" name="smtp_password" value="{{ site.smtp_password if site is defined else '' }}" placeholder="{% trans %}App password or SMTP password{% endtrans %}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-password">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}From Email Address{% endtrans %}</label>
                    <input type="email" name="smtp_from_email" value="{{ site.smtp_from_email if site is defined else '' }}" placeholder="{% trans %}noreply@yoursite.com{% endtrans %}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-from-email">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}From Name{% endtrans %}</label>
                    <input type="text" name="smtp_from_name" value="{{ site.smtp_from_name if site is defined and site.smtp_from_name else '' }}" placeholder="{{ site.get('brand_replacement') or 'MyBrand' }}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-smtp-from-name">
                </div>
                <div class="sm:col-span-2 flex items-center gap-3">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="smtp_use_tls" value="0">
                        <input type="checkbox" name="smtp_use_tls" value="1" class="sr-only peer" id="smtp_use_tls"
                            {% if not site is defined or site.smtp_use_tls != '0' %}checked{% endif %}>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-blue-500"></div>
                    </label>
                    <label for="smtp_use_tls" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">{% trans %}Use STARTTLS (recommended — required for port 587){% endtrans %}</label>
                </div>
                <div class="sm:col-span-2">
                    <button type="button" id="btn-test-smtp" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 text-sm font-medium hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-testid="btn-test-smtp">
                        <i class="fa fa-vial"></i> {% trans %}Send Test Email{% endtrans %}
                    </button>
                    <span id="smtp-test-result" class="ml-3 text-xs font-medium hidden"></span>
                </div>
            </div>
        </div>

        <!-- Job Notifications -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
                    <i class="fa fa-bell text-teal-600 dark:text-teal-400"></i>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Job Notifications{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Notify users when their file conversion is ready.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-5">
                <div class="flex flex-col gap-4">
                    <div class="flex items-center gap-3">
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                            <input type="hidden" name="job_notify_browser_enabled" value="0">
                            <input type="checkbox" name="job_notify_browser_enabled" value="1" id="job_notify_browser_enabled" class="sr-only peer"
                                {% if not site is defined or site.get('job_notify_browser_enabled','1') != '0' %}checked{% endif %}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-teal-600 dark:peer-checked:bg-teal-500"></div>
                        </label>
                        <div>
                            <label for="job_notify_browser_enabled" class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">{% trans %}Browser Notifications{% endtrans %}</label>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Always free for all users. Uses the browser Notification API.{% endtrans %}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                            <input type="hidden" name="job_notify_email_enabled" value="0">
                            <input type="checkbox" name="job_notify_email_enabled" value="1" id="job_notify_email_enabled" class="sr-only peer"
                                {% if site is defined and site.get('job_notify_email_enabled','0') == '1' %}checked{% endif %}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-teal-600 dark:peer-checked:bg-teal-500"></div>
                        </label>
                        <div>
                            <label for="job_notify_email_enabled" class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">{% trans %}Email Notifications{% endtrans %}</label>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Can be restricted per plan. Uses dedicated SMTP below (falls back to main SMTP if empty).{% endtrans %}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                            <input type="hidden" name="job_notify_push_enabled" value="0">
                            <input type="checkbox" name="job_notify_push_enabled" value="1" id="job_notify_push_enabled" class="sr-only peer"
                                {% if site is defined and site.get('job_notify_push_enabled','0') == '1' %}checked{% endif %}>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-teal-600 dark:peer-checked:bg-teal-500"></div>
                        </label>
                        <div>
                            <label for="job_notify_push_enabled" class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer">{% trans %}Push Notifications (Web Push / VAPID){% endtrans %}</label>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Sends background push notifications to browsers even when the tab is closed. VAPID keys are auto-generated.{% endtrans %}</p>
                        </div>
                    </div>
                </div>
                <!-- VAPID / Push Diagnostic Card -->
                <div id="vapid-card" class="border-t border-gray-100 dark:border-gray-800 pt-4 hidden">
                    <div class="flex items-center gap-2 mb-3">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{% trans %}Web Push (VAPID) Diagnostics{% endtrans %}</h4>
                        <button type="button" onclick="vapidLoadInfo()" class="text-xs text-teal-600 dark:text-teal-400 hover:underline">{% trans %}Refresh{% endtrans %}</button>
                    </div>
                    <div id="vapid-status" class="text-xs text-gray-500 dark:text-gray-400 mb-3">{% trans %}Loading…{% endtrans %}</div>
                    <!-- Public key row -->
                    <div id="vapid-key-row" class="hidden mb-3">
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}VAPID Public Key (read-only){% endtrans %}</label>
                        <div class="flex gap-2">
                            <input id="vapid-pub-key" type="text" readonly
                                class="flex-1 px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs font-mono truncate"
                                value="">
                            <button type="button" onclick="vapidCopyKey()" title="Copy"
                                class="px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 text-xs">
                                <i class="fa fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <!-- Subscriber count + regenerate -->
                    <div class="flex flex-wrap items-center gap-3 mb-3">
                        <span id="vapid-sub-count" class="text-xs text-gray-500 dark:text-gray-400"></span>
                        <button type="button" onclick="vapidRegenerate()"
                            class="text-xs px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20">
                            <i class="fa fa-rotate-right mr-1"></i>{% trans %}Regenerate Keys{% endtrans %}
                        </button>
                    </div>
                    <!-- Error list -->
                    <div id="vapid-errors" class="hidden space-y-1 mb-3"></div>
                    <!-- Test push -->
                    <details class="text-xs">
                        <summary class="cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 select-none">{% trans %}Send a test push to your browser{% endtrans %}</summary>
                        <div class="mt-2 space-y-2">
                            <p class="text-gray-500 dark:text-gray-400">{% trans %}Open DevTools → Application → Service Workers → Push subscription, paste the JSON below, then click Send.{% endtrans %}</p>
                            <textarea id="vapid-test-json" rows="4" placeholder='{"endpoint":"...","keys":{"p256dh":"...","auth":"..."}}'
                                class="w-full px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-xs font-mono resize-none"></textarea>
                            <button type="button" onclick="vapidSendTest()"
                                class="px-4 py-2 rounded-xl bg-teal-600 hover:bg-teal-700 text-white text-xs font-medium">
                                <i class="fa fa-paper-plane mr-1"></i>{% trans %}Send Test Push{% endtrans %}
                            </button>
                            <div id="vapid-test-result" class="hidden text-xs rounded-lg px-3 py-2"></div>
                        </div>
                    </details>
                </div>

                <div class="border-t border-gray-100 dark:border-gray-800 pt-4">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                        <i class="fa fa-key text-gray-400 text-xs"></i>{% trans %}Broadcast Secret Key{% endtrans %}
                    </h4>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">{% trans %}Used to sign broadcast click/open tracking tokens. Set any long random string. Falls back to the Flask session secret if left blank.{% endtrans %}</p>
                    <input type="password" name="broadcast_secret_key"
                           value="{{ site.get('broadcast_secret_key','') if site is defined else '' }}"
                           placeholder="{% trans %}e.g. a long random string{% endtrans %}"
                           autocomplete="new-password"
                           class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none font-mono">
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Changing this invalidates all existing tracking links in previously sent broadcasts.{% endtrans %}</p>
                </div>

                <div class="border-t border-gray-100 dark:border-gray-800 pt-4">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{% trans %}Notification Email SMTP (optional — leave blank to use main SMTP){% endtrans %}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}From Email{% endtrans %}</label>
                            <input type="email" name="job_notify_from_email" value="{{ site.get('job_notify_from_email','') if site is defined else '' }}" placeholder="notifications@yoursite.com" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}From Name{% endtrans %}</label>
                            <input type="text" name="job_notify_from_name" value="{{ site.get('job_notify_from_name','') if site is defined else '' }}" placeholder="OnlineConvert Notifications" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Host{% endtrans %}</label>
                            <input type="text" name="job_notify_smtp_host" value="{{ site.get('job_notify_smtp_host','') if site is defined else '' }}" placeholder="{% trans %}Leave blank to use main SMTP{% endtrans %}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Port{% endtrans %}</label>
                            <input type="number" name="job_notify_smtp_port" value="{{ site.get('job_notify_smtp_port','587') if site is defined else '587' }}" placeholder="587" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Username{% endtrans %}</label>
                            <input type="text" name="job_notify_smtp_username" value="{{ site.get('job_notify_smtp_username','') if site is defined else '' }}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}SMTP Password{% endtrans %}</label>
                            <input type="password" name="job_notify_smtp_password" value="{{ site.get('job_notify_smtp_password','') if site is defined else '' }}" class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        <div class="sm:col-span-2 flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                                <input type="hidden" name="job_notify_smtp_use_tls" value="0">
                                <input type="checkbox" name="job_notify_smtp_use_tls" value="1" class="sr-only peer" id="job_notify_smtp_use_tls"
                                    {% if not site is defined or site.get('job_notify_smtp_use_tls','1') != '0' %}checked{% endif %}>
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-teal-600 dark:peer-checked:bg-teal-500"></div>
                            </label>
                            <label for="job_notify_smtp_use_tls" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">{% trans %}Use STARTTLS{% endtrans %}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Google Social Login -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                    <svg class="w-4 h-4" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.2l6.8-6.8C35.8 2.4 30.2 0 24 0 14.7 0 6.7 5.4 2.7 13.3l7.9 6.1C12.5 13.1 17.8 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.2 7-17.1z"/><path fill="#FBBC05" d="M10.6 28.6A14.6 14.6 0 0 1 9.5 24c0-1.6.3-3.1.7-4.6l-7.9-6.1A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.7 10.7l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.6-5.9c-2 1.4-4.6 2.2-7.6 2.2-6.2 0-11.5-4.2-13.4-9.9l-7.9 6.1C6.7 42.6 14.7 48 24 48z"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Google Social Login{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Allow users to sign in with their Google account.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {% trans %}Create OAuth 2.0 credentials at{% endtrans %}
                    <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener" class="text-blue-500 underline">console.cloud.google.com</a>.
                    {% trans %}Set the Authorised Redirect URI to:{% endtrans %}
                    <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">/auth/google/callback</code>
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Client ID{% endtrans %}</label>
                        <input type="text" name="google_client_id" value="{{ site.google_client_id if site is defined else '' }}"
                            placeholder="xxxxxxxxxx.apps.googleusercontent.com"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-red-500/50 focus:border-red-500 outline-none transition"
                            data-testid="input-google-client-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Client Secret{% endtrans %}</label>
                        <input type="password" name="google_client_secret" value="{{ site.google_client_secret if site is defined else '' }}"
                            placeholder="GOCSPX-…"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-red-500/50 focus:border-red-500 outline-none transition"
                            data-testid="input-google-client-secret">
                    </div>
                </div>
            </div>
        </div>

        <!-- Microsoft Social Login -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                    <svg class="w-5 h-5" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Microsoft Social Login{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Allow users to sign in with their Microsoft account.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {% trans %}Register an app at{% endtrans %}
                    <a href="https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade" target="_blank" rel="noopener" class="text-blue-500 underline">portal.azure.com</a>.
                    {% trans %}Set the Redirect URI to:{% endtrans %}
                    <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">/auth/microsoft/callback</code>
                    {% trans %}and ensure the supported account types include personal + work accounts.{% endtrans %}
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Application (Client) ID{% endtrans %}</label>
                        <input type="text" name="microsoft_client_id" value="{{ site.microsoft_client_id if site is defined else '' }}"
                            placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition"
                            data-testid="input-microsoft-client-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Client Secret{% endtrans %}</label>
                        <input type="password" name="microsoft_client_secret" value="{{ site.microsoft_client_secret if site is defined else '' }}"
                            placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition"
                            data-testid="input-microsoft-client-secret">
                    </div>
                </div>
            </div>
        </div>

        <!-- Apple Sign In -->
        <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                    <svg class="w-5 h-5 text-gray-800 dark:text-white fill-current" viewBox="0 0 814 1000" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 376.6 0 312 0 259C0 201 39.2 168.4 52.4 148c18-26.5 49.5-44 80.8-44 44 0 78 25.7 105.5 25.7C266.1 129.7 299.7 102 355 102c16.2 0 62.2 1.3 95.1 40.8c-18.7 18-95.8 61.1-95.8 165.6 0 121.4 100.6 161.2 109.4 164.4l-.1 3.2z"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Apple Sign In{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Allow users to sign in with their Apple ID.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {% trans %}Register a Services ID at{% endtrans %}
                    <a href="https://developer.apple.com/account/resources/identifiers/list/serviceId" target="_blank" rel="noopener" class="text-blue-500 underline">developer.apple.com</a>.
                    {% trans %}Set the Redirect URI to:{% endtrans %}
                    <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">/auth/apple/callback</code>.
                    {% trans %}You will also need your Team ID, a Sign In with Apple key (Key ID + .p8 file contents).{% endtrans %}
                </p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Services ID (Client ID){% endtrans %}</label>
                        <input type="text" name="apple_client_id" value="{{ site.apple_client_id if site is defined else '' }}"
                            placeholder="com.example.siwa"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-gray-500/50 outline-none transition"
                            data-testid="input-apple-client-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Team ID{% endtrans %}</label>
                        <input type="text" name="apple_team_id" value="{{ site.apple_team_id if site is defined else '' }}"
                            placeholder="XXXXXXXXXX"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-gray-500/50 outline-none transition"
                            data-testid="input-apple-team-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Key ID{% endtrans %}</label>
                        <input type="text" name="apple_key_id" value="{{ site.apple_key_id if site is defined else '' }}"
                            placeholder="XXXXXXXXXX"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-gray-500/50 outline-none transition"
                            data-testid="input-apple-key-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Private Key (.p8 contents){% endtrans %}</label>
                        <textarea name="apple_private_key" rows="4"
                            placeholder="-----BEGIN PRIVATE KEY-----&#10;…&#10;-----END PRIVATE KEY-----"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-gray-500/50 outline-none transition resize-none"
                            data-testid="input-apple-private-key">{{ site.apple_private_key if site is defined else '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cloud Upload Tabs -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-blue-500/5 to-sky-500/5">
                <div class="flex items-center justify-center w-9 h-9 rounded-xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex-shrink-0">
                    <i class="fa fa-cloud text-sm"></i>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Cloud Upload Tabs{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Enable Google Drive, Dropbox and OneDrive upload tabs on converter pages. Leave blank to hide that tab.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Google Drive OAuth Client ID{% endtrans %}</label>
                        <input type="text" name="google_drive_client_id" value="{{ site.google_drive_client_id if site is defined else '' }}"
                            placeholder="xxxxxxxxxx.apps.googleusercontent.com"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 outline-none transition"
                            data-testid="input-google-drive-client-id">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Google Drive API Key (for Picker){% endtrans %}</label>
                        <input type="text" name="google_drive_api_key" value="{{ site.google_drive_api_key if site is defined else '' }}"
                            placeholder="AIza…"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 outline-none transition"
                            data-testid="input-google-drive-api-key">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Dropbox App Key{% endtrans %}</label>
                        <input type="text" name="dropbox_app_key" value="{{ site.dropbox_app_key if site is defined else '' }}"
                            placeholder="abcdefghijklmno"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 outline-none transition"
                            data-testid="input-dropbox-app-key">
                        <p class="mt-1.5 text-xs text-amber-600 dark:text-amber-400 flex items-start gap-1.5">
                            <i class="fa fa-triangle-exclamation mt-0.5 flex-shrink-0"></i>
                            <span>{% trans %}Important: In your <a href="https://www.dropbox.com/developers/apps" target="_blank" class="underline font-medium">Dropbox App Console</a> → Settings → "Chooser/Saver domains", you must add your site's domain (e.g. <code class="bg-amber-100 dark:bg-amber-900/40 px-1 rounded">example.com</code>). Without this, Dropbox will show "App is misconfigured" when users try to pick files.{% endtrans %}</span>
                        </p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}OneDrive OAuth Client ID{% endtrans %}</label>
                        <input type="text" name="onedrive_client_id" value="{{ site.onedrive_client_id if site is defined else '' }}"
                            placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm font-mono focus:ring-2 focus:ring-blue-500/50 outline-none transition"
                            data-testid="input-onedrive-client-id">
                    </div>
                </div>
            </div>
        </div>

        <!-- Theme / Appearance Settings -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme" data-testid="card-theme-settings">
            <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-violet-500/5 to-purple-500/5">
                <div class="flex items-center justify-center w-9 h-9 rounded-xl bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 flex-shrink-0">
                    <i class="fa fa-palette text-sm"></i>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">{% trans %}Theme &amp; Appearance{% endtrans %}</h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Control which display modes users can access and set the default when no preference is stored.{% endtrans %}</p>
                </div>
            </div>
            <div class="px-6 py-5 space-y-5">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                    <!-- Allow Dark Mode -->
                    <div class="flex items-start gap-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{% trans %}Allow Dark Mode{% endtrans %}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Let users switch to dark mode{% endtrans %}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 mt-0.5">
                            <input type="hidden" name="theme_allow_dark" value="0">
                            <input type="checkbox" name="theme_allow_dark" value="1" {% if site.get('theme_allow_dark','1') == '1' %}checked{% endif %}
                                class="sr-only peer" data-testid="toggle-theme-allow-dark">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-500/25 dark:peer-focus:ring-indigo-400/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-indigo-500"></div>
                        </label>
                    </div>
                    <!-- Allow Light Mode -->
                    <div class="flex items-start gap-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{% trans %}Allow Light Mode{% endtrans %}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Let users switch to light mode{% endtrans %}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 mt-0.5">
                            <input type="hidden" name="theme_allow_light" value="0">
                            <input type="checkbox" name="theme_allow_light" value="1" {% if site.get('theme_allow_light','1') == '1' %}checked{% endif %}
                                class="sr-only peer" data-testid="toggle-theme-allow-light">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-yellow-500/25 dark:peer-focus:ring-yellow-400/25 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-600 peer-checked:bg-yellow-500"></div>
                        </label>
                    </div>
                    <!-- Default Mode -->
                    <div class="flex flex-col gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{% trans %}Default Mode{% endtrans %}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Shown when user has no stored preference or their preferred mode is disabled{% endtrans %}</p>
                        <select name="theme_default" class="mt-1 w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-theme-default">
                            <option value="dark" {% if site.get('theme_default','dark') == 'dark' %}selected{% endif %}>🌙 {% trans %}Dark{% endtrans %}</option>
                            <option value="light" {% if site.get('theme_default','dark') == 'light' %}selected{% endif %}>☀️ {% trans %}Light{% endtrans %}</option>
                        </select>
                    </div>
                </div>
                <div class="flex items-start gap-2 px-4 py-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
                    <i class="fa fa-circle-info text-blue-500 mt-0.5 flex-shrink-0 text-sm"></i>
                    <p class="text-xs text-blue-700 dark:text-blue-300">{% trans %}If both modes are enabled, users can freely toggle between them. If only one mode is allowed, the toggle button is hidden and the selected default is enforced. If neither is enabled, the Default Mode is used as the fallback.{% endtrans %}</p>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <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 hover:shadow-xl transition-all duration-300" data-testid="button-save-general">
                <i class="fa fa-save"></i> {% trans %}Save Settings{% endtrans %}
            </button>
            <a href="{{ full_url('/admin/general') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                {% trans %}Cancel{% endtrans %}
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    function toggleLogoType(type) {
        const imageSection = document.getElementById('image-logo-section');
        const textSection = document.getElementById('text-logo-section');
        
        if (type === 'image') {
            imageSection.style.display = 'block';
            textSection.style.display = 'none';
        } else {
            imageSection.style.display = 'none';
            textSection.style.display = 'block';
        }
        
        // Update preview
        updateLogoPreview();
    }

    function removeLogo() {
        if (confirm('{% trans %}Are you sure you want to remove the logo?{% endtrans %}')) {
            $('#site_logo_value').val('');
            $('#logo-preview').attr('src', '').addClass('hidden');
            $('#logo-placeholder').show();
            toastr.success('{% trans %}Logo removed successfully{% endtrans %}');
        }
    }

    function removeFavicon() {
        if (confirm('{% trans %}Are you sure you want to remove the favicon?{% endtrans %}')) {
            $('#site_favicon_value').val('');
            $('#favicon-preview').attr('src', '').addClass('hidden');
            $('#favicon-placeholder').show();
            toastr.success('{% trans %}Favicon removed successfully{% endtrans %}');
            updateLogoPreview(); // Update preview as favicon is removed
        }
    }

    function uploadFile(fileInput, hiddenInput, previewImg, placeholderEl) {
        var file = fileInput.files[0];
        if (!file) return;

        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: '/admin/upload-image',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var url = resp.url;
                $(hiddenInput).val(url);
                $(previewImg).attr('src', url).removeClass('hidden').show();
                if (placeholderEl) $(placeholderEl).hide();
                toastr.success('{% trans %}File uploaded successfully!{% endtrans %}');
                updateLogoPreview(); // Update preview after upload
            },
            error: function() {
                toastr.error('{% trans %}Failed to upload file.{% endtrans %}');
            }
        });
    }

    function updateLogoPreview() {
        const logoType = $('input[name="logo_type"]:checked').val();
        const text = $('#logo_text').val() || 'OnlineConvert';
        const font = $('select[name="logo_text_font"]').val();
        const customFont = $('input[name="logo_text_custom_font"]').val();
        const size = $('select[name="logo_text_size"]').val();
        const weight = $('select[name="logo_text_weight"]').val();
        const italic = $('input[name="logo_text_italic"]').is(':checked');
        const underline = $('input[name="logo_text_underline"]').is(':checked');
        const uppercase = $('input[name="logo_text_uppercase"]').is(':checked');
        const spacing = $('input[name="logo_text_letter_spacing"]').is(':checked');
        const colorLight = $('#logo_text_color_light').val();
        const showFavicon = (logoType === 'favicon_text') || $('input[name="logo_show_favicon"]').is(':checked');
        const faviconUrl = $('#site_favicon_value').val();
        
        let previewHtml = '';
        
        // Show favicon if in favicon_text mode or explicitly enabled
        if (showFavicon && faviconUrl) {
            previewHtml += `<img src="${faviconUrl}" class="w-6 h-6 mr-1" alt="">`;
        }
        
        // Build style attribute
        let style = `color: ${colorLight};`;
        if (customFont) {
            style += ` font-family: ${customFont};`;
        }
        
        previewHtml += `<span class="${font} ${size} ${weight} ${italic ? 'italic' : ''} ${underline ? 'underline' : ''} ${uppercase ? 'uppercase' : ''} ${spacing ? 'tracking-wide' : ''}" style="${style}">${text}</span>`;
        
        $('#logo-preview-text').html(previewHtml);
    }

    // Initialize everything when document is ready
    $(document).ready(function() {
        const logoType = $('input[name="logo_type"]:checked').val();
        if (logoType) {
            toggleLogoType(logoType);
        }

        // Sync color inputs with hex inputs
        $('#logo_text_color_light').on('input', function() {
            $('input[name="logo_text_color_light_hex"]').val($(this).val());
            updateLogoPreview();
        });

        $('input[name="logo_text_color_light_hex"]').on('input', function() {
            const val = $(this).val();
            if (/^#[0-9A-F]{6}$/i.test(val)) {
                $('#logo_text_color_light').val(val);
                updateLogoPreview();
            }
        });

        $('#logo_text_color_dark').on('input', function() {
            $('input[name="logo_text_color_dark_hex"]').val($(this).val());
        });

        $('input[name="logo_text_color_dark_hex"]').on('input', function() {
            const val = $(this).val();
            if (/^#[0-9A-F]{6}$/i.test(val)) {
                $('#logo_text_color_dark').val(val);
            }
        });

        // Listen to all changes for preview update
        $('#text-logo-section input, #text-logo-section select').on('change keyup', function() {
            updateLogoPreview();
        });

        $('input[name="logo_type"]').on('change', function() {
            updateLogoPreview();
        });

        // Initial preview update
        updateLogoPreview();
    });

    $('#logo-file-input').on('change', function() {
        uploadFile(this, '#site_logo_value', '#logo-preview', '#logo-placeholder');
    });

    $('#favicon-file-input').on('change', function() {
        uploadFile(this, '#site_favicon_value', '#favicon-preview', '#favicon-placeholder');
    });

    $('#general-settings-form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '/admin/general',
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            data: $(this).serialize(),
            success: function() { 
                toastr.success('{% trans %}General settings saved successfully!{% endtrans %}'); 
            },
            error: function() { 
                toastr.error('{% trans %}Failed to save settings.{% endtrans %}'); 
            }
        });
    });

    $('#btn-test-smtp').on('click', function() {
        var email = prompt('{% trans %}Send test email to:{% endtrans %}');
        if (!email) return;
        var $btn = $(this);
        var $result = $('#smtp-test-result');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-1"></i>{% trans %}Sending...{% endtrans %}');
        $result.removeClass('hidden text-green-600 text-red-600 dark:text-green-400 dark:text-red-400').addClass('hidden');
        $.ajax({
            url: '/admin/test-email',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ email: email }),
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(res) {
                $btn.prop('disabled', false).html('<i class="fa fa-vial mr-1"></i>{% trans %}Send Test Email{% endtrans %}');
                if (res.success) {
                    $result.removeClass('hidden').addClass('text-green-600 dark:text-green-400').text('✓ ' + res.message);
                } else {
                    $result.removeClass('hidden').addClass('text-red-600 dark:text-red-400').text('✗ ' + res.error);
                }
            },
            error: function(xhr) {
                $btn.prop('disabled', false).html('<i class="fa fa-vial mr-1"></i>{% trans %}Send Test Email{% endtrans %}');
                var err = xhr.responseJSON ? xhr.responseJSON.error : '{% trans %}Failed to send test email.{% endtrans %}';
                $result.removeClass('hidden').addClass('text-red-600 dark:text-red-400').text('✗ ' + err);
            }
        });
    });

    // ── VAPID diagnostic card ────────────────────────────────────────────────
    (function(){
        var $toggle = document.getElementById('job_notify_push_enabled');
        var $card   = document.getElementById('vapid-card');
        if(!$toggle || !$card) return;

        function syncCard(){
            if($toggle.checked){ $card.classList.remove('hidden'); vapidLoadInfo(); }
            else                { $card.classList.add('hidden'); }
        }
        $toggle.addEventListener('change', syncCard);
        syncCard();
    })();

    function vapidLoadInfo(){
        var $st  = document.getElementById('vapid-status');
        var $kr  = document.getElementById('vapid-key-row');
        var $pk  = document.getElementById('vapid-pub-key');
        var $sc  = document.getElementById('vapid-sub-count');
        var $err = document.getElementById('vapid-errors');
        $st.textContent = '{% trans %}Loading…{% endtrans %}';
        $kr.classList.add('hidden');
        $err.classList.add('hidden');
        $err.innerHTML = '';
        fetch('/admin/push/vapid-info')
        .then(function(r){ return r.json(); })
        .then(function(d){
            var parts = [];
            if(d.py_vapid_ok)   parts.push('<span class="text-green-600 dark:text-green-400"><i class="fa fa-check mr-1"></i>py_vapid OK</span>');
            else                parts.push('<span class="text-red-600 dark:text-red-400"><i class="fa fa-times mr-1"></i>py_vapid missing</span>');
            if(d.pywebpush_ok)  parts.push('<span class="text-green-600 dark:text-green-400"><i class="fa fa-check mr-1"></i>pywebpush ' + (d.pywebpush_version||'') + ' OK</span>');
            else                parts.push('<span class="text-red-600 dark:text-red-400"><i class="fa fa-times mr-1"></i>pywebpush missing</span>');
            if(d.push_enabled)  parts.push('<span class="text-green-600 dark:text-green-400"><i class="fa fa-check mr-1"></i>{% trans %}Toggle ON{% endtrans %}</span>');
            else                parts.push('<span class="text-amber-600 dark:text-amber-400"><i class="fa fa-warning mr-1"></i>{% trans %}Toggle OFF (save this page to enable){% endtrans %}</span>');
            $st.innerHTML = parts.join(' &nbsp;·&nbsp; ');
            if(d.public_key){
                $pk.value = d.public_key;
                $kr.classList.remove('hidden');
            }
            $sc.textContent = '{% trans %}Active push subscribers:{% endtrans %} ' + (d.subscriber_count || 0);
            if(d.errors && d.errors.length){
                $err.classList.remove('hidden');
                d.errors.forEach(function(e){
                    var p = document.createElement('p');
                    p.className = 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-3 py-1.5 rounded-lg';
                    p.textContent = '⚠ ' + e;
                    $err.appendChild(p);
                });
            }
        })
        .catch(function(e){ $st.textContent = '{% trans %}Failed to load:{% endtrans %} ' + e; });
    }

    function vapidCopyKey(){
        var $pk = document.getElementById('vapid-pub-key');
        if(!$pk || !$pk.value) return;
        navigator.clipboard.writeText($pk.value).then(function(){
            $pk.select();
            var btn = $pk.nextElementSibling;
            if(btn){ btn.innerHTML='<i class="fa fa-check text-green-500"></i>'; setTimeout(function(){ btn.innerHTML='<i class="fa fa-copy"></i>'; }, 1500); }
        });
    }

    function vapidRegenerate(){
        window.ocConfirm('{% trans %}Regenerate VAPID push notification keys?{% endtrans %}\n\n\u2022 {% trans %}ALL existing push subscriptions in every browser will immediately break{% endtrans %}\n\u2022 {% trans %}Every user will need to manually re-subscribe to notifications{% endtrans %}\n\u2022 {% trans %}This cannot be undone{% endtrans %}', function(){
        fetch('/admin/push/vapid-regenerate', {method:'POST', headers:{'X-CSRFToken': window._csrf||''}})
        .then(function(r){ return r.json(); })
        .then(function(d){
            if(d.ok){
                alert('{% trans %}Keys regenerated. New public key:{% endtrans %}\n' + d.public_key + '\n\n{% trans %}Warning:{% endtrans %} ' + (d.warning||''));
                vapidLoadInfo();
            } else {
                alert('{% trans %}Error:{% endtrans %} ' + (d.error||'Unknown error'));
            }
        })
        .catch(function(e){ alert('{% trans %}Request failed:{% endtrans %} ' + e); });
        }); /* end ocConfirm */
    }

    function vapidSendTest(){
        var raw = (document.getElementById('vapid-test-json')||{}).value || '';
        var $res = document.getElementById('vapid-test-result');
        $res.className = 'hidden text-xs rounded-lg px-3 py-2';
        $res.textContent = '';
        var parsed;
        try { parsed = JSON.parse(raw); } catch(e){ $res.className='text-xs rounded-lg px-3 py-2 bg-red-50 dark:bg-red-900/20 text-red-600'; $res.textContent='Invalid JSON: '+e; return; }
        var endpoint = parsed.endpoint || '';
        var p256dh   = (parsed.keys||{}).p256dh || '';
        var auth     = (parsed.keys||{}).auth    || '';
        if(!endpoint||!p256dh||!auth){ $res.className='text-xs rounded-lg px-3 py-2 bg-red-50 dark:bg-red-900/20 text-red-600'; $res.textContent='{% trans %}Missing endpoint, keys.p256dh, or keys.auth in JSON.{% endtrans %}'; return; }
        fetch('/admin/push/test', {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRFToken':window._csrf||''},
            body:JSON.stringify({endpoint:endpoint, p256dh:p256dh, auth:auth})
        })
        .then(function(r){ return r.json(); })
        .then(function(d){
            if(d.ok){
                $res.className='text-xs rounded-lg px-3 py-2 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400';
                $res.textContent='✓ ' + (d.msg||'Sent!');
            } else {
                $res.className='text-xs rounded-lg px-3 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400';
                $res.textContent='✗ ' + (d.error||'Failed');
            }
        })
        .catch(function(e){ $res.className='text-xs rounded-lg px-3 py-2 bg-red-50 text-red-600'; $res.textContent='{% trans %}Request failed:{% endtrans %} '+e; });
    }

    /* ── Brand Colors ───────────────────────────────────────────────────── */
    function updateBrandPreview() {
        var pri   = document.getElementById('primary_color')       ? document.getElementById('primary_color').value       : '#3B82F6';
        var light = document.getElementById('primary_light_color') ? document.getElementById('primary_light_color').value : '#60A5FA';
        var btn   = document.getElementById('brand-preview-btn');
        var btnO  = document.getElementById('brand-preview-btn-outline');
        var lnk   = document.getElementById('brand-preview-link');
        var sw    = document.getElementById('brand-preview-swatch');
        var swL   = document.getElementById('brand-preview-swatch-light');
        if (btn)  { btn.style.backgroundColor = pri;   btn.style.boxShadow = '0 4px 14px -2px ' + pri + '66'; }
        if (btnO) { btnO.style.borderColor = pri;      btnO.style.color = pri; }
        if (lnk)  { lnk.style.color = pri; }
        if (sw)   { sw.style.backgroundColor = pri; }
        if (swL)  { swL.style.backgroundColor = light; }
    }

    $(document).ready(function() { updateBrandPreview(); });

    /* ── Hero Appearance ─────────────────────────────────────────────────── */
    function syncHexInput(colorId, hexId) {
        var val = document.getElementById(colorId).value;
        document.getElementById(hexId).value = val;
    }
    function syncColorPicker(hexId, colorId) {
        var val = document.getElementById(hexId).value;
        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
            document.getElementById(colorId).value = val;
        }
    }

    function setHeroBgType(type) {
        document.getElementById('hero_bg_type_input').value = type;
        var sections = ['gradient', 'solid', 'image'];
        sections.forEach(function(s) {
            var sec = document.getElementById('hero-' + s + '-section');
            var btn = document.getElementById('hero-type-btn-' + s);
            if (s === type) {
                sec.classList.remove('hidden');
                btn.classList.add('bg-white', 'dark:bg-gray-700', 'shadow-sm', 'text-gray-900', 'dark:text-white');
                btn.classList.remove('text-gray-500', 'dark:text-gray-400');
            } else {
                sec.classList.add('hidden');
                btn.classList.remove('bg-white', 'dark:bg-gray-700', 'shadow-sm', 'text-gray-900', 'dark:text-white');
                btn.classList.add('text-gray-500', 'dark:text-gray-400');
            }
        });
        updateHeroPreview();
    }

    function updateHeroPreview() {
        var type = document.getElementById('hero_bg_type_input').value || 'gradient';
        var bar = document.getElementById('hero-preview-bar');
        var textEl = document.getElementById('hero-preview-text-sample');
        var singleView = document.getElementById('hero-preview-single');
        var twoColView = document.getElementById('hero-preview-two-col');
        var textColor = document.getElementById('hero_text_color_light') ? document.getElementById('hero_text_color_light').value : '#ffffff';

        if (type === 'gradient') {
            var fromL = document.getElementById('hero_grad_from_light') ? document.getElementById('hero_grad_from_light').value : '#1e3a5f';
            var toL   = document.getElementById('hero_grad_to_light')   ? document.getElementById('hero_grad_to_light').value   : '#8B5CF6';
            var dir   = document.getElementById('hero_grad_dir')        ? document.getElementById('hero_grad_dir').value        : '135deg';
            bar.style.background = 'linear-gradient(' + dir + ', ' + fromL + ' 0%, ' + toL + ' 100%)';
            bar.style.backgroundImage = '';
            if (singleView) singleView.classList.remove('hidden');
            if (twoColView) twoColView.classList.add('hidden');
        } else if (type === 'solid') {
            var solidL = document.getElementById('hero_solid_light') ? document.getElementById('hero_solid_light').value : '#1e3a5f';
            bar.style.background = solidL;
            bar.style.backgroundImage = '';
            if (singleView) singleView.classList.remove('hidden');
            if (twoColView) twoColView.classList.add('hidden');
        } else if (type === 'image') {
            var imgUrl = document.getElementById('hero_bg_image_value') ? document.getElementById('hero_bg_image_value').value : '';
            var leftCol = document.getElementById('hero-preview-left-col');
            var rightCol = document.getElementById('hero-preview-right-col');
            var rightImg = document.getElementById('hero-preview-right-img');
            var rightPlaceholder = document.getElementById('hero-preview-right-placeholder');
            var leftHeading = document.getElementById('hero-preview-left-heading');

            // Use the dedicated image-mode color picker
            var imgColorEl = document.getElementById('hero_img_left_color_light');
            var bgColor = (imgColorEl && imgColorEl.value) ? imgColorEl.value : '#1e3a5f';

            // Apply color to both columns (image covers right column on top of it)
            if (leftCol) { leftCol.style.background = bgColor; }
            if (rightCol) { rightCol.style.background = bgColor; }
            if (leftHeading) leftHeading.style.color = textColor;
            var subText = leftCol ? leftCol.querySelector('div:last-child') : null;
            if (subText) subText.style.color = textColor;

            // Right column: show image (layered over background color) or placeholder
            if (imgUrl) {
                if (rightImg) { rightImg.src = imgUrl; rightImg.classList.remove('hidden'); }
                if (rightPlaceholder) rightPlaceholder.style.display = 'none';
            } else {
                if (rightImg) { rightImg.src = ''; rightImg.classList.add('hidden'); }
                if (rightPlaceholder) rightPlaceholder.style.display = 'flex';
            }

            bar.style.background = bgColor;
            if (singleView) singleView.classList.add('hidden');
            if (twoColView) twoColView.classList.remove('hidden');
        }
        if (textEl) textEl.style.color = textColor;
    }

    function removeHeroBgImage() {
        document.getElementById('hero_bg_image_value').value = '';
        var preview = document.getElementById('hero-img-preview');
        var placeholder = document.getElementById('hero-img-placeholder');
        if (preview)     { preview.src = ''; preview.classList.add('hidden'); }
        if (placeholder) { placeholder.classList.remove('hidden'); }
        updateHeroPreview();
        toastr.success('{% trans %}Hero background image removed.{% endtrans %}');
    }

    // Hero BG image upload
    $('#hero-bg-file-input').on('change', function() {
        var file = this.files[0];
        if (!file) return;
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url: '/admin/upload-image',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                var url = resp.url;
                $('#hero_bg_image_value').val(url);
                var preview = document.getElementById('hero-img-preview');
                var placeholder = document.getElementById('hero-img-placeholder');
                if (preview)     { preview.src = url; preview.classList.remove('hidden'); }
                if (placeholder) { placeholder.classList.add('hidden'); }
                updateHeroPreview();
                toastr.success('{% trans %}Hero background image uploaded!{% endtrans %}');
            },
            error: function() {
                toastr.error('{% trans %}Failed to upload image.{% endtrans %}');
            }
        });
    });

    // Init hero appearance UI on page load
    $(document).ready(function() {
        var heroType = document.getElementById('hero_bg_type_input').value || 'gradient';
        setHeroBgType(heroType);
    });
</script>
{% endblock %}