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

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% get_admin_interface_static 'admin_interface/css/theme-editor.css' %}">
<script src="{% get_admin_interface_static 'admin_interface/colorfield/colorfield-swatch.js' %}"></script>
{% endblock %}

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

{% if fieldset.name == "Server Identity" %}
<fieldset class="module wide" id="fieldset-server-identity">
  <h2>{{ fieldset.name }}</h2>
  {% if fieldset.description %}<div class="description">{{ fieldset.description }}</div>{% endif %}
  {% if form.title.errors %}<div class="field-error-row">{{ form.title.errors }}</div>{% endif %}
  <div class="form-row field-title">
    {{ form.title.label_tag }}
    {{ form.title }}
    {% if form.title.help_text %}<div class="col-help">{{ form.title.help_text }}</div>{% endif %}
  </div>
  <div class="form-row field-title_visible">
    <div class="flex-container checkbox-row">
      {{ form.title_visible }}
      <label for="{{ form.title_visible.id_for_label }}" class="vCheckboxLabel">{{ form.title_visible.label }}</label>
    </div>
    {% if form.title_visible.help_text %}<div class="col-help">{{ form.title_visible.help_text }}</div>{% endif %}
  </div>
  {% if active_theme %}{% url 'admin:admin_interface_theme_change' active_theme.pk as theme_change_url %}<div class="admin-settings-cross-link">{% trans "Theme:" %} <a href="{{ theme_change_url }}#section-header-logo">{% trans "Header &amp; Logo" %} →</a></div>{% endif %}
</fieldset>

{% elif fieldset.name == "Environment" %}
<fieldset class="module aligned wide">
  <h2>{{ fieldset.name }}</h2>
  {% if fieldset.description %}<div class="description">{{ fieldset.description }}</div>{% endif %}

  {% if form.env_name.errors %}<div class="field-error-row">{{ form.env_name.errors }}</div>{% endif %}
  <div class="form-row field-env_name field-env_visible_in_header">
    <div>
      {{ form.env_name.label_tag }}
      <div style="display:flex; align-items:center; gap:16px;">
        {{ form.env_name }}
        <div class="flex-container checkbox-row">
          {{ form.env_visible_in_header }}
          <label for="{{ form.env_visible_in_header.id_for_label }}" class="vCheckboxLabel">{% trans "Visible in header" %}</label>
        </div>
      </div>
      {% if form.env_name.help_text %}<div class="col-help">{{ form.env_name.help_text }}</div>{% endif %}
    </div>
  </div>

  <div class="color-table" style="margin-top: 12px; margin-bottom: 8px;">
    <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.env_color.errors or form.env_color_dark.errors %}<div class="field-error-row">{{ form.env_color.errors }}{{ form.env_color_dark.errors }}</div>{% endif %}
    <div class="color-row">
      <div class="col-label">{% trans "Badge color" %}</div>
      <div class="col-light">{{ form.env_color }}</div>
      <div class="col-toggle">{{ form.env_color_dark_use }}</div>
      <div class="col-dark" id="dark-env_color">{{ form.env_color_dark }}</div>
    </div>
    {% if form.env_color.help_text %}<div class="help-row"><div class="col-help">{{ form.env_color.help_text }}</div></div>{% endif %}
    {% if form.env_text_color.errors or form.env_text_color_dark.errors %}<div class="field-error-row">{{ form.env_text_color.errors }}{{ form.env_text_color_dark.errors }}</div>{% endif %}
    <div class="color-row">
      <div class="col-label">{% trans "Badge text color" %}</div>
      <div class="col-light">{{ form.env_text_color }}</div>
      <div class="col-toggle">{{ form.env_text_color_dark_use }}</div>
      <div class="col-dark" id="dark-env_text_color">{{ form.env_text_color_dark }}</div>
    </div>
    {% if form.env_text_color.help_text %}<div class="help-row"><div class="col-help">{{ form.env_text_color.help_text }}</div></div>{% endif %}
  </div>
</fieldset>

{% elif fieldset.name == "Notifications" %}
<fieldset class="module wide" id="fieldset-notifications">
  <h2>{{ fieldset.name }}</h2>
  {% if fieldset.description %}<div class="description">{{ fieldset.description }}</div>{% endif %}
  <div class="form-row field-message_autohide_enabled">
    <div class="flex-container checkbox-row">
      {{ form.message_autohide_enabled }}
      <label for="{{ form.message_autohide_enabled.id_for_label }}" class="vCheckboxLabel">{{ form.message_autohide_enabled.label }}</label>
    </div>
    {% if form.message_autohide_enabled.help_text %}<div class="col-help">{{ form.message_autohide_enabled.help_text }}</div>{% endif %}
  </div>
  {% if form.message_autohide_delay.errors %}<div class="field-error-row">{{ form.message_autohide_delay.errors }}</div>{% endif %}
  <div class="form-row field-message_autohide_delay">
    {{ form.message_autohide_delay.label_tag }}
    {{ form.message_autohide_delay }}
    {% if form.message_autohide_delay.help_text %}<div class="col-help">{{ form.message_autohide_delay.help_text }}</div>{% endif %}
  </div>
  {% if active_theme %}{% url 'admin:admin_interface_theme_change' active_theme.pk as theme_change_url %}<div class="admin-settings-cross-link">{% trans "Theme:" %} <a href="{{ theme_change_url }}#section-notification-colors">{% trans "Notification Colors" %} →</a></div>{% endif %}
</fieldset>

{% else %}
{% include "admin/includes/fieldset.html" %}
{% endif %}

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