{% extends "admin/change_form.html" %}
{% load i18n static %}

{% block extrahead %}{{ block.super }}
<script>
(function () {
    "use strict";

    var MSG_TEXT = {
        success: "{% trans 'This is a test success message.' %}",
        warning: "{% trans 'This is a test warning message.' %}",
        error:   "{% trans 'This is a test error message.' %}",
        info:    "{% trans 'This is a test info message.' %}",
    };

    var BG_VAR = {
        success: "--message-success-bg",
        warning: "--message-warning-bg",
        error:   "--message-error-bg",
        info:    "--message-info-bg",
    };

    var TEXT_VAR = {
        success: "--message-success-text",
        warning: "--message-warning-text",
        error:   "--message-error-text",
        info:    "--message-info-text",
    };

    function resolveColor(lightId, darkId, darkUseId, isDark) {
        if (isDark) {
            var darkUseEl = document.getElementById(darkUseId);
            var darkEl    = document.getElementById(darkId);
            if (darkUseEl && darkUseEl.checked && darkEl && darkEl.value) {
                return darkEl.value;
            }
        }
        var lightEl = document.getElementById(lightId);
        return lightEl ? lightEl.value : "";
    }

    function showTestMessage(msgType, bgColor, textColor, triggerBtn) {
        var adminEl = document.querySelector(".admin-interface") || document.body;

        // Remove any previous preview
        var prev = document.getElementById("msg-preview-container");
        if (prev) prev.remove();

        // Apply colors as inline CSS properties so they override the theme's variables
        adminEl.style.setProperty(BG_VAR[msgType], bgColor);
        if (textColor) {
            adminEl.style.setProperty(TEXT_VAR[msgType], textColor);
        }

        // Build message DOM
        var ul = document.createElement("ul");
        ul.className = "messagelist";
        ul.id = "msg-preview-container";
        var li = document.createElement("li");
        li.className = msgType;
        li.textContent = MSG_TEXT[msgType];
        ul.appendChild(li);

        // Insert at the top of the containing section (after the h2 heading),
        // so the result appears right where the operator is looking.
        var section = triggerBtn ? triggerBtn.closest("fieldset.theme-custom-section") : null;
        if (section) {
            var h2 = section.querySelector("h2");
            var anchor = (h2 && h2.nextSibling) ? h2.nextSibling : section.firstChild;
            section.insertBefore(ul, anchor);
        } else {
            // Fallback: sibling of #content (original behaviour)
            var content = document.getElementById("content");
            var parent = content ? content.parentNode : null;
            if (parent) {
                var existingUl = parent.querySelector(":scope > ul.messagelist");
                parent.insertBefore(ul, existingUl || content);
            } else {
                document.body.appendChild(ul);
            }
        }

        // Auto-remove after 3 seconds, restore CSS vars
        setTimeout(function () {
            ul.remove();
            adminEl.style.removeProperty(BG_VAR[msgType]);
            adminEl.style.removeProperty(TEXT_VAR[msgType]);
        }, 3000);
    }

    document.addEventListener("click", function (e) {
        var btn = e.target.closest(".msg-test-btn");
        if (!btn) return;

        var msgType = btn.dataset.msgType;
        var isDark  = document.documentElement.getAttribute("data-theme") === "dark";

        var bgColor   = resolveColor(btn.dataset.bgInput, btn.dataset.bgDarkInput, btn.dataset.bgDarkUse, isDark);
        var textColor = resolveColor(btn.dataset.textInput, btn.dataset.textDarkInput, btn.dataset.textDarkUse, isDark);

        if (bgColor) {
            showTestMessage(msgType, bgColor, textColor, btn);
        }
    });
}());
</script>
{% endblock extrahead %}

{% block field_sets %}
{% with form=adminform.form %}
{% for fieldset in adminform %}

<!-- ============================================================
     IDENTITY  (fieldset.name == None)
     ============================================================ -->
{% if not fieldset.name %}
<fieldset class="module aligned wide theme-custom-section" id="section-identity">
  <h2 class="theme-section-heading">{% trans "Theme Naming" %}</h2>
  <div class="theme-section-body">
    {{ form.active.as_hidden }}
    {{ form.foldable_apps.as_hidden }}
    {% if form.name.errors %}<div class="field-error-row">{{ form.name.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.name.label }}</div>
      <div class="col-field">
        {% if original %}
          {% if form.name.errors %}
            <input type="text" name="name" id="id_name" value="{{ form.name.value }}" class="vTextField">
            <button type="button" id="name-unlock-btn" class="name-unlock-btn name-unlock-active"
                    title="{% trans 'Lock name' %}"
                    data-icon-locked="{% static 'admin/img/icon-changelink.svg' %}"
                    data-icon-unlocked="{% static 'admin/img/icon-yes.svg' %}">
                <img src="{% static 'admin/img/icon-yes.svg' %}" alt="">
            </button>
          {% else %}
            <input type="text" name="name" id="id_name" value="{{ form.name.value }}" readonly class="vTextField theme-name-locked">
            <button type="button" id="name-unlock-btn" class="name-unlock-btn"
                    title="{% trans 'Rename' %}"
                    data-icon-locked="{% static 'admin/img/icon-changelink.svg' %}"
                    data-icon-unlocked="{% static 'admin/img/icon-yes.svg' %}">
                <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="">
            </button>
          {% endif %}
        {% else %}
          {{ form.name }}
        {% endif %}
      </div>
    </div>

    {% if form.name.help_text %}<div class="help-row"><div class="col-help">{{ form.name.help_text }}</div></div>{% endif %}
  </div>
</fieldset>

<!-- ============================================================
     HEADER & LOGO  (rendered on the Logo fieldset pass; Favicon
     and Header fieldset passes are silently skipped below)
     ============================================================ -->
{% elif fieldset.name == "Logo" %}
<fieldset class="module aligned wide theme-custom-section" id="section-header-logo">
  <h2 class="theme-section-heading">{% trans "Header &amp; Logo" %}</h2>
  <div class="theme-section-body">

    <!-- Logo and Favicon side by side -->
    <div class="logo-favicon-row">

      <!-- Logo column -->
      <div class="logo-col">
        <div class="file-col-heading">{% trans "Logo" %}</div>

        <!-- Live preview (IDs kept for logo-preview.js) -->
        <div class="logo-preview-container" id="logo-preview-container">
          <img id="logo-preview-img" class="logo-preview-img"
               src="{% if form.logo.value %}{{ form.logo.value.url }}{% endif %}"
               alt="" {% if not form.logo.value %}style="display:none"{% endif %}>
          <span id="logo-preview-title">{% if server_settings.title %}{{ server_settings.title }}{% else %}Server Name{% endif %}</span>
        </div>

        <!-- Filename + clear -->
        <div class="file-meta" id="logo-meta">
          <span class="file-meta-label">{% trans "Filename:" %}</span>
          <span class="file-name-display{% if not form.logo.value %} file-name-empty{% endif %}" id="logo-name" data-none-text="{% trans '<none selected>' %}">{% if form.logo.value %}{{ form.logo.value.name }}{% else %}{% trans "<none selected>" %}{% endif %}</span>
          <button type="button" class="file-clear-btn" data-widget="logo" title="{% trans 'Remove' %}"{% if not form.logo.value %} style="display:none"{% endif %}>×</button>
        </div>
        <input type="checkbox" name="logo-clear" id="logo-clear_id" style="display:none" aria-hidden="true">
        {{ form.logo.errors }}

        <!-- Choose file -->
        <input type="file" name="logo" id="id_logo" style="display:none">
        <button type="button" class="theme-file-btn" data-target="id_logo">{% trans "Choose File" %}</button>

      </div>

      <!-- Favicon column -->
      <div class="favicon-col">
        <div class="file-col-heading">{% trans "Favicon" %}</div>

        <!-- Current favicon preview -->
        <div class="favicon-preview-container" id="favicon-preview-container">
          {% if form.favicon.value %}
          <img src="{{ form.favicon.value.url }}" alt="" class="favicon-preview-img">
          {% endif %}
        </div>

        <!-- Filename + clear -->
        <div class="file-meta" id="favicon-meta">
          <span class="file-meta-label">{% trans "Filename:" %}</span>
          <span class="file-name-display{% if not form.favicon.value %} file-name-empty{% endif %}" id="favicon-name" data-none-text="{% trans '<none selected>' %}">{% if form.favicon.value %}{{ form.favicon.value.name }}{% else %}{% trans "<none selected>" %}{% endif %}</span>
          <button type="button" class="file-clear-btn" data-widget="favicon" title="{% trans 'Remove' %}"{% if not form.favicon.value %} style="display:none"{% endif %}>×</button>
        </div>
        <input type="checkbox" name="favicon-clear" id="favicon-clear_id" style="display:none" aria-hidden="true">
        {{ form.favicon.errors }}

        <!-- Choose file -->
        <input type="file" name="favicon" id="id_favicon" style="display:none">
        <button type="button" class="theme-file-btn" data-target="id_favicon">{% trans "Choose File" %}</button>
      </div>

    </div><!-- /logo-favicon-row -->

    <!-- Logo settings — full-width rows below the file pickers -->
    <div class="logo-settings">
      {% if form.logo_max_width.errors %}<div class="field-error-row">{{ form.logo_max_width.errors }}</div>{% endif %}
      <div class="simple-row">
        <div class="col-label">{% trans "Logo width" %}</div>
        <div class="col-field">
          {{ form.logo_max_width }}
          <input type="hidden" name="logo_max_height" id="id_logo_max_height" value="0">
        </div>
      </div>

      {{ form.logo_visible.as_hidden }}
      {% if form.logo_vertical_offset.errors %}<div class="field-error-row">{{ form.logo_vertical_offset.errors }}</div>{% endif %}
      <div class="simple-row">
        <div class="col-label">{% trans "Move logo by:" %}</div>
        <div class="col-field">
          <div class="logo-offset-input">
            {{ form.logo_vertical_offset }}<span class="offset-unit">{% trans "px" %}</span>
          </div>
        </div>
      </div>

      <div class="help-row"><div class="col-help">{% trans "Move up (positive), move down (negative)" %}</div></div>
    </div>

    <!-- Title settings -->
    <div class="logo-settings">
      {% if form.title_font_size.errors %}<div class="field-error-row">{{ form.title_font_size.errors }}</div>{% endif %}
      <div class="simple-row">
        <div class="col-label">{% trans "Title font size" %}</div>
        <div class="col-field">{{ form.title_font_size }}</div>
      </div>

      {% if form.title_font_size.help_text %}<div class="help-row"><div class="col-help">{{ form.title_font_size.help_text }}</div></div>{% endif %}
    </div>

    <!-- Header bar colours -->
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_header_background_color.errors or form.css_header_background_color_dark.errors %}<div class="field-error-row">{{ form.css_header_background_color.errors }}{{ form.css_header_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Header background" %}</div>
        <div class="col-light">{{ form.css_header_background_color }}</div>
        <div class="col-toggle">{{ form.css_header_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_header_background_color">{{ form.css_header_background_color_dark }}</div>
      </div>
      {% if form.css_header_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_header_background_color.help_text }}</div></div>{% endif %}
      {{ form.logo_color.as_hidden }}{{ form.logo_color_dark_use.as_hidden }}{{ form.logo_color_dark.as_hidden }}
      {% if form.title_color.errors or form.title_color_dark.errors %}<div class="field-error-row">{{ form.title_color.errors }}{{ form.title_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Title color" %}</div>
        <div class="col-light">{{ form.title_color }}</div>
        <div class="col-toggle">{{ form.title_color_dark_use }}</div>
        <div class="col-dark" id="dark-title_color">{{ form.title_color_dark }}</div>
      </div>
      {% if form.title_color.help_text %}<div class="help-row"><div class="col-help">{{ form.title_color.help_text }}</div></div>{% endif %}
      {% if form.css_header_text_color.errors or form.css_header_text_color_dark.errors %}<div class="field-error-row">{{ form.css_header_text_color.errors }}{{ form.css_header_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Header text color" %}</div>
        <div class="col-light">{{ form.css_header_text_color }}</div>
        <div class="col-toggle">{{ form.css_header_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_header_text_color">{{ form.css_header_text_color_dark }}</div>
      </div>
      {% if form.css_header_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_header_text_color.help_text }}</div></div>{% endif %}
      {% if form.css_header_link_color.errors or form.css_header_link_color_dark.errors %}<div class="field-error-row">{{ form.css_header_link_color.errors }}{{ form.css_header_link_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Header link color" %}</div>
        <div class="col-light">{{ form.css_header_link_color }}</div>
        <div class="col-toggle">{{ form.css_header_link_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_header_link_color">{{ form.css_header_link_color_dark }}</div>
      </div>
      {% if form.css_header_link_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_header_link_color.help_text }}</div></div>{% endif %}
      {% if form.css_header_link_hover_color.errors or form.css_header_link_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_header_link_hover_color.errors }}{{ form.css_header_link_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Header link hover" %}</div>
        <div class="col-light">{{ form.css_header_link_hover_color }}</div>
        <div class="col-toggle">{{ form.css_header_link_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_header_link_hover_color">{{ form.css_header_link_hover_color_dark }}</div>
      </div>
      {% if form.css_header_link_hover_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_header_link_hover_color.help_text }}</div></div>{% endif %}
    </div>

    {% if settings_change_url %}<div class="admin-settings-cross-link">{% trans "Settings:" %} <a href="{{ settings_change_url }}#fieldset-server-identity">{% trans "Server Identity" %} →</a></div>{% endif %}
  </div>
</fieldset>

<!-- Favicon and Header fieldset passes — already rendered above, skip -->
{% elif fieldset.name == "Favicon" %}{% elif fieldset.name == "Header" %}

<!-- ============================================================
     TITLE
     ============================================================ -->
{% elif fieldset.name == "Title" %}

<!-- ============================================================
     BREADCRUMBS / MODULE HEADERS
     ============================================================ -->
{% elif fieldset.name == "Breadcrumbs / Module headers" %}
<fieldset class="module aligned wide theme-custom-section" id="section-breadcrumbs">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_module_background_color.errors or form.css_module_background_color_dark.errors %}<div class="field-error-row">{{ form.css_module_background_color.errors }}{{ form.css_module_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.css_module_background_color }}</div>
        <div class="col-toggle">{{ form.css_module_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_background_color">{{ form.css_module_background_color_dark }}</div>
      </div>
      {% if form.css_module_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_background_color.help_text }}</div></div>{% endif %}
      {% if form.css_module_background_selected_color.errors or form.css_module_background_selected_color_dark.errors %}<div class="field-error-row">{{ form.css_module_background_selected_color.errors }}{{ form.css_module_background_selected_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Selected background" %}</div>
        <div class="col-light">{{ form.css_module_background_selected_color }}</div>
        <div class="col-toggle">{{ form.css_module_background_selected_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_background_selected_color">{{ form.css_module_background_selected_color_dark }}</div>
      </div>
      {% if form.css_module_background_selected_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_background_selected_color.help_text }}</div></div>{% endif %}
      {% if form.css_module_text_color.errors or form.css_module_text_color_dark.errors %}<div class="field-error-row">{{ form.css_module_text_color.errors }}{{ form.css_module_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Text color" %}</div>
        <div class="col-light">{{ form.css_module_text_color }}</div>
        <div class="col-toggle">{{ form.css_module_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_text_color">{{ form.css_module_text_color_dark }}</div>
      </div>
      {% if form.css_module_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_text_color.help_text }}</div></div>{% endif %}
      {% if form.css_module_link_color.errors or form.css_module_link_color_dark.errors %}<div class="field-error-row">{{ form.css_module_link_color.errors }}{{ form.css_module_link_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link color" %}</div>
        <div class="col-light">{{ form.css_module_link_color }}</div>
        <div class="col-toggle">{{ form.css_module_link_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_link_color">{{ form.css_module_link_color_dark }}</div>
      </div>
      {% if form.css_module_link_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_link_color.help_text }}</div></div>{% endif %}
      {% if form.css_module_link_selected_color.errors or form.css_module_link_selected_color_dark.errors %}<div class="field-error-row">{{ form.css_module_link_selected_color.errors }}{{ form.css_module_link_selected_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link selected color" %}</div>
        <div class="col-light">{{ form.css_module_link_selected_color }}</div>
        <div class="col-toggle">{{ form.css_module_link_selected_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_link_selected_color">{{ form.css_module_link_selected_color_dark }}</div>
      </div>
      {% if form.css_module_link_selected_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_link_selected_color.help_text }}</div></div>{% endif %}
      {% if form.css_module_link_hover_color.errors or form.css_module_link_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_module_link_hover_color.errors }}{{ form.css_module_link_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link hover color" %}</div>
        <div class="col-light">{{ form.css_module_link_hover_color }}</div>
        <div class="col-toggle">{{ form.css_module_link_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_module_link_hover_color">{{ form.css_module_link_hover_color_dark }}</div>
      </div>
      {% if form.css_module_link_hover_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_link_hover_color.help_text }}</div></div>{% endif %}
    </div>
    {% if form.css_module_border_radius.errors %}<div class="field-error-row">{{ form.css_module_border_radius.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_module_border_radius.label }}</div>
      <div class="col-field">{{ form.css_module_border_radius }}</div>
    </div>

    {% if form.css_module_border_radius.help_text %}<div class="help-row"><div class="col-help">{{ form.css_module_border_radius.help_text }}</div></div>{% endif %}
    {% if form.css_tab_border_radius.errors %}<div class="field-error-row">{{ form.css_tab_border_radius.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_tab_border_radius.label }}</div>
      <div class="col-field">{{ form.css_tab_border_radius }}</div>
    </div>

    {% if form.css_tab_border_radius.help_text %}<div class="help-row"><div class="col-help">{{ form.css_tab_border_radius.help_text }}</div></div>{% endif %}
  </div>
</fieldset>

<!-- ============================================================
     BODY
     ============================================================ -->
{% elif fieldset.name == "Body" %}
<fieldset class="module aligned wide theme-custom-section" id="section-body-text">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    {% if form.css_body_font_family.errors %}<div class="field-error-row">{{ form.css_body_font_family.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_body_font_family.label }}</div>
      <div class="col-field">{{ form.css_body_font_family }}</div>
    </div>

    {% if form.css_body_font_family.help_text %}<div class="help-row"><div class="col-help">{{ form.css_body_font_family.help_text }}</div></div>{% endif %}
    {% if form.css_body_font_size.errors %}<div class="field-error-row">{{ form.css_body_font_size.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_body_font_size.label }}</div>
      <div class="col-field">{{ form.css_body_font_size }}</div>
    </div>

    {% if form.css_body_font_size.help_text %}<div class="help-row"><div class="col-help">{{ form.css_body_font_size.help_text }}</div></div>{% endif %}
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_body_text_color.errors or form.css_body_text_color_dark.errors %}<div class="field-error-row">{{ form.css_body_text_color.errors }}{{ form.css_body_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Text color" %}</div>
        <div class="col-light">{{ form.css_body_text_color }}</div>
        <div class="col-toggle">{{ form.css_body_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_body_text_color">{{ form.css_body_text_color_dark }}</div>
      </div>
      {% if form.css_body_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_body_text_color.help_text }}</div></div>{% endif %}
      {% if form.css_body_background_color.errors or form.css_body_background_color_dark.errors %}<div class="field-error-row">{{ form.css_body_background_color.errors }}{{ form.css_body_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.css_body_background_color }}</div>
        <div class="col-toggle">{{ form.css_body_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_body_background_color">{{ form.css_body_background_color_dark }}</div>
      </div>
      {% if form.css_body_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_body_background_color.help_text }}</div></div>{% endif %}
      {% if form.css_generic_link_color.errors or form.css_generic_link_color_dark.errors %}<div class="field-error-row">{{ form.css_generic_link_color.errors }}{{ form.css_generic_link_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link color" %}</div>
        <div class="col-light">{{ form.css_generic_link_color }}</div>
        <div class="col-toggle">{{ form.css_generic_link_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_generic_link_color">{{ form.css_generic_link_color_dark }}</div>
      </div>
      {% if form.css_generic_link_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_generic_link_color.help_text }}</div></div>{% endif %}
      {% if form.css_generic_link_hover_color.errors or form.css_generic_link_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_generic_link_hover_color.errors }}{{ form.css_generic_link_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link hover color" %}</div>
        <div class="col-light">{{ form.css_generic_link_hover_color }}</div>
        <div class="col-toggle">{{ form.css_generic_link_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_generic_link_hover_color">{{ form.css_generic_link_hover_color_dark }}</div>
      </div>
      {% if form.css_generic_link_hover_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_generic_link_hover_color.help_text }}</div></div>{% endif %}
      {% if form.css_generic_link_active_color.errors or form.css_generic_link_active_color_dark.errors %}<div class="field-error-row">{{ form.css_generic_link_active_color.errors }}{{ form.css_generic_link_active_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Link active color" %}</div>
        <div class="col-light">{{ form.css_generic_link_active_color }}</div>
        <div class="col-toggle">{{ form.css_generic_link_active_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_generic_link_active_color">{{ form.css_generic_link_active_color_dark }}</div>
      </div>
      {% if form.css_generic_link_active_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_generic_link_active_color.help_text }}</div></div>{% endif %}
    </div>
  </div>
</fieldset>

<!-- ============================================================
     BUTTONS
     ============================================================ -->
{% elif fieldset.name == "Buttons" %}
<fieldset class="module aligned wide theme-custom-section" id="section-buttons">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_save_button_background_color.errors or form.css_save_button_background_color_dark.errors %}<div class="field-error-row">{{ form.css_save_button_background_color.errors }}{{ form.css_save_button_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.css_save_button_background_color }}</div>
        <div class="col-toggle">{{ form.css_save_button_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_save_button_background_color">{{ form.css_save_button_background_color_dark }}</div>
      </div>
      {% if form.css_save_button_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_save_button_background_color.help_text }}</div></div>{% endif %}
      {% if form.css_save_button_background_hover_color.errors or form.css_save_button_background_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_save_button_background_hover_color.errors }}{{ form.css_save_button_background_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Hover background" %}</div>
        <div class="col-light">{{ form.css_save_button_background_hover_color }}</div>
        <div class="col-toggle">{{ form.css_save_button_background_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_save_button_background_hover_color">{{ form.css_save_button_background_hover_color_dark }}</div>
      </div>
      {% if form.css_save_button_background_hover_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_save_button_background_hover_color.help_text }}</div></div>{% endif %}
      {% if form.css_save_button_text_color.errors or form.css_save_button_text_color_dark.errors %}<div class="field-error-row">{{ form.css_save_button_text_color.errors }}{{ form.css_save_button_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Text color" %}</div>
        <div class="col-light">{{ form.css_save_button_text_color }}</div>
        <div class="col-toggle">{{ form.css_save_button_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_save_button_text_color">{{ form.css_save_button_text_color_dark }}</div>
      </div>
      {% if form.css_save_button_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_save_button_text_color.help_text }}</div></div>{% endif %}
    </div>
    {% if form.css_button_font_size.errors %}<div class="field-error-row">{{ form.css_button_font_size.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_button_font_size.label }}</div>
      <div class="col-field">{{ form.css_button_font_size }}</div>
    </div>

    {% if form.css_button_font_size.help_text %}<div class="help-row"><div class="col-help">{{ form.css_button_font_size.help_text }}</div></div>{% endif %}
    {% if form.css_button_border_radius.errors %}<div class="field-error-row">{{ form.css_button_border_radius.errors }}</div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.css_button_border_radius.label }}</div>
      <div class="col-field">{{ form.css_button_border_radius }}</div>
    </div>

    {% if form.css_button_border_radius.help_text %}<div class="help-row"><div class="col-help">{{ form.css_button_border_radius.help_text }}</div></div>{% endif %}

    <p class="color-table-subheading">{% trans "Action buttons (History, Back, etc.)" %}</p>
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_action_button_background_color.errors or form.css_action_button_background_color_dark.errors %}<div class="field-error-row">{{ form.css_action_button_background_color.errors }}{{ form.css_action_button_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.css_action_button_background_color }}</div>
        <div class="col-toggle">{{ form.css_action_button_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_action_button_background_color">{{ form.css_action_button_background_color_dark }}</div>
      </div>
      {% if form.css_action_button_background_hover_color.errors or form.css_action_button_background_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_action_button_background_hover_color.errors }}{{ form.css_action_button_background_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background hover color" %}</div>
        <div class="col-light">{{ form.css_action_button_background_hover_color }}</div>
        <div class="col-toggle">{{ form.css_action_button_background_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_action_button_background_hover_color">{{ form.css_action_button_background_hover_color_dark }}</div>
      </div>
      {% if form.css_action_button_text_color.errors or form.css_action_button_text_color_dark.errors %}<div class="field-error-row">{{ form.css_action_button_text_color.errors }}{{ form.css_action_button_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Text color" %}</div>
        <div class="col-light">{{ form.css_action_button_text_color }}</div>
        <div class="col-toggle">{{ form.css_action_button_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_action_button_text_color">{{ form.css_action_button_text_color_dark }}</div>
      </div>
    </div>
  </div>
</fieldset>

<!-- ============================================================
     ALERT BUTTONS
     ============================================================ -->
{% elif fieldset.name == "Alert Buttons" %}
<fieldset class="module aligned wide theme-custom-section" id="section-alert-buttons">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_delete_button_background_color.errors or form.css_delete_button_background_color_dark.errors %}<div class="field-error-row">{{ form.css_delete_button_background_color.errors }}{{ form.css_delete_button_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.css_delete_button_background_color }}</div>
        <div class="col-toggle">{{ form.css_delete_button_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_delete_button_background_color">{{ form.css_delete_button_background_color_dark }}</div>
      </div>
      {% if form.css_delete_button_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_delete_button_background_color.help_text }}</div></div>{% endif %}
      {% if form.css_delete_button_background_hover_color.errors or form.css_delete_button_background_hover_color_dark.errors %}<div class="field-error-row">{{ form.css_delete_button_background_hover_color.errors }}{{ form.css_delete_button_background_hover_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Hover background" %}</div>
        <div class="col-light">{{ form.css_delete_button_background_hover_color }}</div>
        <div class="col-toggle">{{ form.css_delete_button_background_hover_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_delete_button_background_hover_color">{{ form.css_delete_button_background_hover_color_dark }}</div>
      </div>
      {% if form.css_delete_button_background_hover_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_delete_button_background_hover_color.help_text }}</div></div>{% endif %}
      {% if form.css_delete_button_text_color.errors or form.css_delete_button_text_color_dark.errors %}<div class="field-error-row">{{ form.css_delete_button_text_color.errors }}{{ form.css_delete_button_text_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Text color" %}</div>
        <div class="col-light">{{ form.css_delete_button_text_color }}</div>
        <div class="col-toggle">{{ form.css_delete_button_text_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_delete_button_text_color">{{ form.css_delete_button_text_color_dark }}</div>
      </div>
      {% if form.css_delete_button_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_delete_button_text_color.help_text }}</div></div>{% endif %}
    </div>
  </div>
</fieldset>

<!-- ============================================================
     STATUS COLORS
     ============================================================ -->
{% elif fieldset.name == "Status Colors" %}
<fieldset class="module aligned wide theme-custom-section" id="section-status-colors">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.css_success_color.errors or form.css_success_color_dark.errors %}<div class="field-error-row">{{ form.css_success_color.errors }}{{ form.css_success_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Success" %}</div>
        <div class="col-light">{{ form.css_success_color }}</div>
        <div class="col-toggle">{{ form.css_success_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_success_color">{{ form.css_success_color_dark }}</div>
      </div>
      {% if form.css_success_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_success_color.help_text }}</div></div>{% endif %}
      {% if form.css_warning_color.errors or form.css_warning_color_dark.errors %}<div class="field-error-row">{{ form.css_warning_color.errors }}{{ form.css_warning_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Warning" %}</div>
        <div class="col-light">{{ form.css_warning_color }}</div>
        <div class="col-toggle">{{ form.css_warning_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_warning_color">{{ form.css_warning_color_dark }}</div>
      </div>
      {% if form.css_warning_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_warning_color.help_text }}</div></div>{% endif %}
      {% if form.css_muted_color.errors or form.css_muted_color_dark.errors %}<div class="field-error-row">{{ form.css_muted_color.errors }}{{ form.css_muted_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Muted" %}</div>
        <div class="col-light">{{ form.css_muted_color }}</div>
        <div class="col-toggle">{{ form.css_muted_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_muted_color">{{ form.css_muted_color_dark }}</div>
      </div>
      {% if form.css_muted_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_muted_color.help_text }}</div></div>{% endif %}
      {% if form.css_alert_color.errors or form.css_alert_color_dark.errors %}<div class="field-error-row">{{ form.css_alert_color.errors }}{{ form.css_alert_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Alert" %}</div>
        <div class="col-light">{{ form.css_alert_color }}</div>
        <div class="col-toggle">{{ form.css_alert_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_alert_color">{{ form.css_alert_color_dark }}</div>
      </div>
      {% if form.css_alert_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_alert_color.help_text }}</div></div>{% endif %}
      {% if form.css_disabled_color.errors or form.css_disabled_color_dark.errors %}<div class="field-error-row">{{ form.css_disabled_color.errors }}{{ form.css_disabled_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Disabled" %}</div>
        <div class="col-light">{{ form.css_disabled_color }}</div>
        <div class="col-toggle">{{ form.css_disabled_color_dark_use }}</div>
        <div class="col-dark" id="dark-css_disabled_color">{{ form.css_disabled_color_dark }}</div>
      </div>
      {% if form.css_disabled_color.help_text %}<div class="help-row"><div class="col-help">{{ form.css_disabled_color.help_text }}</div></div>{% endif %}
    </div>
  </div>
</fieldset>

<!-- ============================================================
     NOTIFICATION COLORS
     ============================================================ -->
{% elif fieldset.name == "Notification Colors" %}
<fieldset class="module aligned wide theme-custom-section" id="section-notification-colors">
  <h2 class="theme-section-heading">{% trans "Notification Colors" %}</h2>
  <div class="theme-section-body">
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
        <div class="col-test col-header"></div>
      </div>
      <!-- Success -->
      {% if form.css_message_success_bg.errors or form.css_message_success_bg_dark.errors %}<div class="field-error-row">{{ form.css_message_success_bg.errors }}{{ form.css_message_success_bg_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Success background" %}</div>
        <div class="col-light">{{ form.css_message_success_bg }}</div>
        <div class="col-toggle">{{ form.css_message_success_bg_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_success_bg">{{ form.css_message_success_bg_dark }}</div>
        <div class="col-test">
          <button type="button" class="msg-test-btn"
            data-msg-type="success"
            data-bg-input="id_css_message_success_bg"
            data-bg-dark-input="id_css_message_success_bg_dark"
            data-bg-dark-use="id_css_message_success_bg_dark_use"
            data-text-input="id_css_message_success_text"
            data-text-dark-input="id_css_message_success_text_dark"
            data-text-dark-use="id_css_message_success_text_dark_use">{% trans "Test" %}</button>
        </div>
      </div>
      {% if form.css_message_success_text.errors or form.css_message_success_text_dark.errors %}<div class="field-error-row">{{ form.css_message_success_text.errors }}{{ form.css_message_success_text_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Success text" %}</div>
        <div class="col-light">{{ form.css_message_success_text }}</div>
        <div class="col-toggle">{{ form.css_message_success_text_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_success_text">{{ form.css_message_success_text_dark }}</div>
        <div class="col-test"></div>
      </div>
      <!-- Warning -->
      {% if form.css_message_warning_bg.errors or form.css_message_warning_bg_dark.errors %}<div class="field-error-row">{{ form.css_message_warning_bg.errors }}{{ form.css_message_warning_bg_dark.errors }}</div>{% endif %}
      <div class="color-row color-group-start">
        <div class="col-label">{% trans "Warning background" %}</div>
        <div class="col-light">{{ form.css_message_warning_bg }}</div>
        <div class="col-toggle">{{ form.css_message_warning_bg_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_warning_bg">{{ form.css_message_warning_bg_dark }}</div>
        <div class="col-test">
          <button type="button" class="msg-test-btn"
            data-msg-type="warning"
            data-bg-input="id_css_message_warning_bg"
            data-bg-dark-input="id_css_message_warning_bg_dark"
            data-bg-dark-use="id_css_message_warning_bg_dark_use"
            data-text-input="id_css_message_warning_text"
            data-text-dark-input="id_css_message_warning_text_dark"
            data-text-dark-use="id_css_message_warning_text_dark_use">{% trans "Test" %}</button>
        </div>
      </div>
      {% if form.css_message_warning_text.errors or form.css_message_warning_text_dark.errors %}<div class="field-error-row">{{ form.css_message_warning_text.errors }}{{ form.css_message_warning_text_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Warning text" %}</div>
        <div class="col-light">{{ form.css_message_warning_text }}</div>
        <div class="col-toggle">{{ form.css_message_warning_text_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_warning_text">{{ form.css_message_warning_text_dark }}</div>
        <div class="col-test"></div>
      </div>
      <!-- Error -->
      {% if form.css_message_error_bg.errors or form.css_message_error_bg_dark.errors %}<div class="field-error-row">{{ form.css_message_error_bg.errors }}{{ form.css_message_error_bg_dark.errors }}</div>{% endif %}
      <div class="color-row color-group-start">
        <div class="col-label">{% trans "Error background" %}</div>
        <div class="col-light">{{ form.css_message_error_bg }}</div>
        <div class="col-toggle">{{ form.css_message_error_bg_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_error_bg">{{ form.css_message_error_bg_dark }}</div>
        <div class="col-test">
          <button type="button" class="msg-test-btn"
            data-msg-type="error"
            data-bg-input="id_css_message_error_bg"
            data-bg-dark-input="id_css_message_error_bg_dark"
            data-bg-dark-use="id_css_message_error_bg_dark_use"
            data-text-input="id_css_message_error_text"
            data-text-dark-input="id_css_message_error_text_dark"
            data-text-dark-use="id_css_message_error_text_dark_use">{% trans "Test" %}</button>
        </div>
      </div>
      {% if form.css_message_error_text.errors or form.css_message_error_text_dark.errors %}<div class="field-error-row">{{ form.css_message_error_text.errors }}{{ form.css_message_error_text_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Error text" %}</div>
        <div class="col-light">{{ form.css_message_error_text }}</div>
        <div class="col-toggle">{{ form.css_message_error_text_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_error_text">{{ form.css_message_error_text_dark }}</div>
        <div class="col-test"></div>
      </div>
      <!-- Info -->
      {% if form.css_message_info_bg.errors or form.css_message_info_bg_dark.errors %}<div class="field-error-row">{{ form.css_message_info_bg.errors }}{{ form.css_message_info_bg_dark.errors }}</div>{% endif %}
      <div class="color-row color-group-start">
        <div class="col-label">{% trans "Info background" %}</div>
        <div class="col-light">{{ form.css_message_info_bg }}</div>
        <div class="col-toggle">{{ form.css_message_info_bg_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_info_bg">{{ form.css_message_info_bg_dark }}</div>
        <div class="col-test">
          <button type="button" class="msg-test-btn"
            data-msg-type="info"
            data-bg-input="id_css_message_info_bg"
            data-bg-dark-input="id_css_message_info_bg_dark"
            data-bg-dark-use="id_css_message_info_bg_dark_use"
            data-text-input="id_css_message_info_text"
            data-text-dark-input="id_css_message_info_text_dark"
            data-text-dark-use="id_css_message_info_text_dark_use">{% trans "Test" %}</button>
        </div>
      </div>
      {% if form.css_message_info_text.errors or form.css_message_info_text_dark.errors %}<div class="field-error-row">{{ form.css_message_info_text.errors }}{{ form.css_message_info_text_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Info text" %}</div>
        <div class="col-light">{{ form.css_message_info_text }}</div>
        <div class="col-toggle">{{ form.css_message_info_text_dark_use }}</div>
        <div class="col-dark" id="dark-css_message_info_text">{{ form.css_message_info_text_dark }}</div>
        <div class="col-test"></div>
      </div>
    </div>
    {% if settings_change_url %}<div class="admin-settings-cross-link">{% trans "Settings:" %} <a href="{{ settings_change_url }}#fieldset-notifications">{% trans "Notifications" %} →</a></div>{% endif %}
  </div>
</fieldset>

<!-- Navigation Bar: foldable_apps rendered as hidden in identity section; skip here -->
{% elif fieldset.name == "Navigation Bar" %}

<!-- ============================================================
     RELATED MODAL
     ============================================================ -->
{% elif fieldset.name == "Related Modal" %}
<fieldset class="module aligned wide theme-custom-section" id="section-related-modal">
  <h2 class="theme-section-heading">{{ fieldset.name }}</h2>
  <div class="theme-section-body">
    {% if fieldset.description %}<p class="help theme-section-desc">{{ fieldset.description }}</p>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.related_modal_active.label }}</div>
      <div class="col-light">{{ form.related_modal_active.errors }}{{ form.related_modal_active }}</div>
    </div>
    {% if form.related_modal_active.help_text %}<div class="help-row"><div class="col-help">{{ form.related_modal_active.help_text }}</div></div>{% endif %}
    <div class="color-table">
      <div class="color-header-row">
        <div class="col-label"></div>
        <div class="col-light col-header">{% trans "Value" %}</div>
        <div class="col-dark-span col-header">{% trans "Dark Mode Value" %}</div>
      </div>
      {% if form.related_modal_background_color.errors or form.related_modal_background_color_dark.errors %}<div class="field-error-row">{{ form.related_modal_background_color.errors }}{{ form.related_modal_background_color_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background color" %}</div>
        <div class="col-light">{{ form.related_modal_background_color }}</div>
        <div class="col-toggle">{{ form.related_modal_background_color_dark_use }}</div>
        <div class="col-dark" id="dark-related_modal_background_color">{{ form.related_modal_background_color_dark }}</div>
      </div>
      {% if form.related_modal_background_color.help_text %}<div class="help-row"><div class="col-help">{{ form.related_modal_background_color.help_text }}</div></div>{% endif %}
      {% if form.related_modal_background_opacity.errors or form.related_modal_background_opacity_dark.errors %}<div class="field-error-row">{{ form.related_modal_background_opacity.errors }}{{ form.related_modal_background_opacity_dark.errors }}</div>{% endif %}
      <div class="color-row">
        <div class="col-label">{% trans "Background opacity" %}</div>
        <div class="col-light">{{ form.related_modal_background_opacity }}</div>
        <div class="col-toggle">{{ form.related_modal_background_opacity_dark_use }}</div>
        <div class="col-dark" id="dark-related_modal_background_opacity">{{ form.related_modal_background_opacity_dark }}</div>
      </div>
      {% if form.related_modal_background_opacity.help_text %}<div class="help-row"><div class="col-help">{{ form.related_modal_background_opacity.help_text }}</div></div>{% endif %}
    </div>
    <div class="simple-row">
      <div class="col-label">{{ form.related_modal_rounded_corners.label }}</div>
      <div class="col-light">{{ form.related_modal_rounded_corners.errors }}{{ form.related_modal_rounded_corners }}</div>
    </div>
    {% if form.related_modal_rounded_corners.help_text %}<div class="help-row"><div class="col-help">{{ form.related_modal_rounded_corners.help_text }}</div></div>{% endif %}
    <div class="simple-row">
      <div class="col-label">{{ form.related_modal_close_button_visible.label }}</div>
      <div class="col-light">{{ form.related_modal_close_button_visible.errors }}{{ form.related_modal_close_button_visible }}</div>
    </div>
    {% if form.related_modal_close_button_visible.help_text %}<div class="help-row"><div class="col-help">{{ form.related_modal_close_button_visible.help_text }}</div></div>{% endif %}
  </div>
</fieldset>

{% elif fieldset.name == "Form Controls" %}
<input type="hidden" name="form_actions_sticky" value="on">
<input type="hidden" name="form_submit_sticky" value="on">
<input type="hidden" name="form_pagination_sticky" value="on">

{% elif fieldset.name == "List Filter" %}
<input type="hidden" name="list_filter_highlight" value="on">
<input type="hidden" name="list_filter_dropdown" value="on">
<input type="hidden" name="list_filter_sticky" value="on">
<input type="hidden" name="list_filter_removal_links" value="on">

{% elif fieldset.name == "Change Form" %}
<input type="hidden" name="show_fieldsets_as_tabs" value="false">
<input type="hidden" name="show_inlines_as_tabs" value="on">

{% elif fieldset.name == "Inlines" %}
<input type="hidden" name="collapsible_stacked_inlines" value="on">
<input type="hidden" name="collapsible_stacked_inlines_collapsed" value="on">
<input type="hidden" name="collapsible_tabular_inlines" value="on">
<input type="hidden" name="collapsible_tabular_inlines_collapsed" value="on">

{% elif fieldset.name == "Recent Actions" %}
<input type="hidden" name="recent_actions_visible" value="false">

<!-- Fallback for any future fieldsets not yet converted -->
{% else %}
  {% include "admin/includes/fieldset.html" %}
{% endif %}

{% endfor %}
{% endwith %}
{% endblock field_sets %}