{% extends "vantage/base.html" %}
{% load static i18n %}

{% block head %}
<link rel="stylesheet" href="{% static 'vantage/vantage-form.css' %}">
<link rel="stylesheet" href="{% static 'vantage/vantage-settings.css' %}">
{% endblock %}

{% block content %}
{% comment %}
  One form for the whole screen. The per-section "Reset" buttons are submit buttons in
  it rather than forms of their own: a form inside a form is not valid HTML, and the
  browser silently drops the inner one — which is how a reset button ends up saving.
{% endcomment %}
<form class="v-form v-settings" method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <div class="v-page-head">
    <div>
      <h1 class="v-page-title">{{ page_title }}</h1>
      <p class="v-page-description">{{ page_description }}</p>
    </div>
    <div class="v-page-actions">
      {% if config.updated_at %}
        <span class="v-muted v-settings-stamp">
          {% if config.updated_by %}
            {% blocktranslate with when=config.updated_at|date:"j M Y, H:i" who=config.updated_by %}Last changed {{ when }} by {{ who }}{% endblocktranslate %}
          {% else %}
            {% blocktranslate with when=config.updated_at|date:"j M Y, H:i" %}Last changed {{ when }}{% endblocktranslate %}
          {% endif %}
        </span>
      {% endif %}
    </div>
  </div>

  {% if form.errors %}
    <div class="v-form-alert" data-tone="error" role="alert">
      <p class="v-form-alert-title">{% translate "Nothing was saved." %}</p>
      <p>{% translate "Check the highlighted fields below." %}</p>
    </div>
  {% endif %}

  {% if not media_configured %}
    <div class="v-form-alert" data-tone="warning">
      <p class="v-form-alert-title">{% translate "Uploads have nowhere to go." %}</p>
      <p>
        {% blocktranslate trimmed %}
          This project has no <code class="v-mono">MEDIA_ROOT</code> and
          <code class="v-mono">MEDIA_URL</code>, so an uploaded logo cannot be stored or
          served. Everything else on this page works.
        {% endblocktranslate %}
      </p>
    </div>
  {% endif %}

  {% for section in sections %}
    <section class="v-card v-form-card" data-section="{{ section.key }}">
      <div class="v-card-head v-settings-head">
        <div>
          <h2 class="v-card-title">{{ section.title }}</h2>
          <p class="v-form-help">{{ section.description }}</p>
        </div>
        <button class="v-btn v-btn-ghost v-btn-sm" type="submit" name="reset"
                value="{{ section.key }}" formnovalidate>
          {% translate "Reset to code defaults" %}
        </button>
      </div>

      <div class="v-card-body v-form-grid">
        {% for entry in section.fields %}
          <div class="v-form-field{% if entry.wide %} v-form-field-wide{% endif %}"
               data-setting="{{ entry.setting }}">
            <label class="v-form-label" for="{{ entry.field.id_for_label }}">
              {{ entry.field.label }}
              {% if entry.overridden %}
                <span class="v-settings-flag" title="{% translate 'Set here, overriding settings.py' %}">
                  {% translate "overridden" %}
                </span>
              {% endif %}
            </label>

            {% if entry.setting == "BRAND_COLOR" %}
              <div class="v-settings-color">
                {{ entry.field }}
                <input type="color" class="v-settings-picker" data-vantage-color
                       value="{{ brand.color|default:'#6366f1' }}"
                       aria-label="{% translate 'Pick the brand colour' %}">
              </div>
            {% else %}
              {{ entry.field }}
            {% endif %}

            {% if entry.file %}
              <p class="v-settings-current">
                {% if entry.file_url %}
                  <a href="{{ entry.file_url }}" target="_blank" rel="noopener noreferrer">
                    {{ entry.file.name }}
                  </a>
                {% else %}
                  {{ entry.file.name }}
                {% endif %}
              </p>
            {% endif %}

            {% for error in entry.field.errors %}
              <p class="v-settings-error" role="alert">{{ error }}</p>
            {% endfor %}

            {% if entry.field.help_text %}
              <p class="v-form-help">{{ entry.field.help_text }}</p>
            {% endif %}

            {% if not entry.is_file %}
              <p class="v-form-help v-settings-inherited">
                {% translate "nothing" as inherited_default %}
                {% blocktranslate trimmed with inherited=entry.inherited|default_if_none:inherited_default %}
                  Empty means <code class="v-mono">{{ inherited }}</code>,
                  from <code class="v-mono">settings.py</code>.
                {% endblocktranslate %}
              </p>
            {% endif %}
          </div>
        {% endfor %}
      </div>

      {% if section.key == "appearance" %}
        <div class="v-card-body v-settings-preview" data-vantage-preview>
          <div class="v-settings-preview-head">
            <h3 class="v-settings-preview-title">{% translate "Derived palette" %}</h3>
            {% comment %}
              A live region: this number changes under the user's fingers as they type
              a brand colour, and it is the one thing on the page that says whether the
              colour they have chosen is legible. Announcing it is the difference
              between choosing a palette and guessing at one. Polite rather than
              assertive — it updates on every keystroke, and interrupting that often
              would make the field unusable.
            {% endcomment %}
            <span class="v-badge" data-preview-ratio
                  role="status" aria-live="polite" aria-atomic="true">
              {% if brand %}{% blocktranslate with ratio=brand.ratio|floatformat:1 %}{{ ratio }}:1 on button text{% endblocktranslate %}{% endif %}
            </span>
          </div>

          {% if brand %}
            <div class="v-settings-swatches">
              <span class="v-settings-swatch-label">{% translate "Light" %}</span>
              {% for swatch in brand.light %}
                <span class="v-settings-swatch" style="background: {{ swatch.value }}"
                      title="--{{ swatch.name }}: {{ swatch.value }}">
                  <span class="v-sr-only">{{ swatch.name }}</span>
                </span>
              {% endfor %}
            </div>
            <div class="v-settings-swatches">
              <span class="v-settings-swatch-label">{% translate "Dark" %}</span>
              {% for swatch in brand.dark %}
                <span class="v-settings-swatch" style="background: {{ swatch.value }}"
                      title="--{{ swatch.name }}: {{ swatch.value }}">
                  <span class="v-sr-only">{{ swatch.name }}</span>
                </span>
              {% endfor %}
            </div>
          {% endif %}

          <div class="v-settings-sample" {% if brand %}style="
               --preview-primary: {{ brand.light.0.value }};
               --preview-on-primary: {{ brand.light.2.value }}"{% endif %}>
            <span class="v-settings-sample-button">{% translate "Save changes" %}</span>
            <span class="v-settings-sample-link">{% translate "A link, a focus ring, a selected row" %}</span>
          </div>

          <p class="v-settings-warning" data-preview-warning
             {% if not brand.warning %}hidden{% endif %}>{{ brand.warning|default:"" }}</p>
        </div>
      {% endif %}
    </section>
  {% endfor %}

  <div class="v-card v-settings-note">
    <div class="v-card-body">
      {% comment %} The setting names are joined into one placeholder rather than looped
         inside the sentence: a {% templatetag openblock %} for {% templatetag closeblock %}
         cannot live inside a blocktranslate, and splitting the lead-in from the list would
         hand the translator a fragment ending in a colon. One <code> wraps the whole list
         instead of each name — the styling is identical and the sentence stays whole. {% endcomment %}
      <p class="v-form-help">
        {% blocktranslate with names=code_only|join:", " %}These settings live in code and are not editable here, because they decide what exists and who may reach it rather than how it looks: <code class="v-mono">{{ names }}</code>.{% endblocktranslate %}
      </p>
      <p class="v-form-help">
        {% blocktranslate with kilobytes=max_upload_kb %}Logos and favicons may be SVG, PNG, JPEG or WebP, up to {{ kilobytes }} KB. An SVG containing script or event handlers is refused: it would run on every page of this panel.{% endblocktranslate %}
      </p>
    </div>
  </div>

  <div class="v-form-bar">
    <button class="v-btn v-btn-primary" type="submit">{% translate "Save settings" %}</button>
  </div>
</form>

{% comment %}
  Outside the form above, not inside it. The sidebar editor is a form of its own, and a
  form nested in a form is not valid HTML — the browser drops the inner one, which is
  how a Save button ends up saving somebody else's fields.
{% endcomment %}
{% include "vantage/settings_nav.html" %}
{% endblock %}

{% block scripts %}
<script src="{% static 'vantage/vantage-settings.js' %}" defer></script>
<script{{ csp_nonce_attr }}>
/* Live palette preview. The colour maths is not reimplemented here — the page asks the
 * same view that will render the panel, so the swatches cannot drift from the result.
 * Debounced, because a colour input fires continuously while dragging. */
(function () {
  var root = document.querySelector('[data-vantage-preview]');
  var input = document.querySelector('[data-vantage-brand]');
  var picker = document.querySelector('[data-vantage-color]');
  if (!root || !input) return;

  var ratio = root.querySelector('[data-preview-ratio]');
  var warning = root.querySelector('[data-preview-warning]');
  var rows = root.querySelectorAll('.v-settings-swatches');
  var sample = root.querySelector('.v-settings-sample');
  var timer = null;
  var inflight = null;

  function paint(row, swatches) {
    var cells = row.querySelectorAll('.v-settings-swatch');
    for (var i = 0; i < cells.length && i < swatches.length; i++) {
      cells[i].style.background = swatches[i].value;
      cells[i].title = '--' + swatches[i].name + ': ' + swatches[i].value;
    }
  }

  function apply(data) {
    if (rows.length > 1) {
      paint(rows[0], data.light);
      paint(rows[1], data.dark);
    }
    if (ratio) ratio.textContent = data.ratio.toFixed(1) + ':1 on button text';
    if (sample) {
      sample.style.setProperty('--preview-primary', data.light[0].value);
      sample.style.setProperty('--preview-on-primary', data.light[2].value);
    }
    if (warning) {
      warning.hidden = !data.warning;
      warning.textContent = data.warning || '';
    }
  }

  function request(value) {
    if (inflight) inflight.abort();
    inflight = new AbortController();
    fetch(window.location.pathname + '?preview=' + encodeURIComponent(value),
          { signal: inflight.signal, headers: { 'Accept': 'application/json' } })
      .then(function (response) { return response.ok ? response.json() : null; })
      .then(function (data) { if (data && data.ok) apply(data); })
      .catch(function () { /* an aborted or failed preview is not worth reporting */ });
  }

  function schedule() {
    var value = input.value.trim();
    if (!/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value)) return;
    window.clearTimeout(timer);
    timer = window.setTimeout(function () { request(value); }, 120);
  }

  input.addEventListener('input', schedule);
  if (picker) {
    picker.addEventListener('input', function () {
      input.value = picker.value;
      schedule();
    });
    input.addEventListener('change', function () {
      if (/^#[0-9a-fA-F]{6}$/.test(input.value.trim())) picker.value = input.value.trim();
    });
  }
})();
</script>
{% endblock %}