{% extends "base.html" %}

{% block content %}
  <div class="ff-page-header">
    <div class="ff-page-header__text">
      <h1 class="ff-h1">{{ heading }}</h1>
      {% if subheading %}
        <p class="ff-muted ff-mt-2">{{ subheading }}</p>
      {% endif %}
    </div>
    <div class="ff-page-header__actions">
      <a class="ff-btn ff-btn--ghost" href="{{ list_url }}">
        {{ ff_icon("arrow-left", size=15) }}
        {{ _("Back to {name}", name=model_title|lower) }}
      </a>
      {% if delete_url %}
        {# Red, because it is the one action on this page that cannot be undone.
           Ghost rather than solid: it is not what the page is for, and a slab of
           red beside "Save changes" competes with it. #}
        <a
          class="ff-btn ff-btn--ghost ff-btn--danger"
          href="{{ delete_url }}"
          data-ff-method="post"
          data-ff-confirm="{{ _("Delete {name}?", name=object_label) }}"
          data-ff-confirm-body="{{ _("This action cannot be undone.") }}"
          {% if cascades %}
            data-ff-confirm-detail="{{ _("These will be deleted too:") }} {{ cascades|join(", ") }}"
          {% endif %}
          data-ff-confirm-label="{{ _("Delete") }}"
        >
          {{ ff_icon("trash", size=15) }}
          {{ _("Delete") }}
        </a>
      {% endif %}
    </div>
  </div>

  {% if form.non_field_errors %}
    <div class="ff-alert ff-alert--danger" role="alert">
      <div>
        <div class="ff-alert__title">{{ _("This could not be saved") }}</div>
        <ul class="ff-mt-2">
          {% for message in form.non_field_errors %}
            <li>{{ message }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% elif form.error_count %}
    <div class="ff-alert ff-alert--danger" role="alert">
      <div class="ff-alert__title">
        {{ _("{count} field needs attention", count=form.error_count) if form.error_count == 1
           else _("{count} fields need attention", count=form.error_count) }}
      </div>
    </div>
  {% endif %}

  <form
    class="ff-mt-4"
    method="post"
    action="{{ action_url }}"
    {% if form.needs_multipart %}enctype="multipart/form-data"{% endif %}
    novalidate
  >
    <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}" />
    {% if version_token %}
      {# Carries the row's state at load time, so a save that would silently
         overwrite someone else's edit can be detected instead. #}
      <input type="hidden" name="_version" value="{{ version_token }}" />
    {% endif %}

    <div class="ff-card">
      <div class="ff-card__body ff-form-grid">
        {% for field in form.fields %}
          {# Long controls span both columns: a textarea squeezed into half a
             page is worse than a taller form. A map earns the width only when
             there is one -- without a tile URL the field is a short text box
             and a full-width row of nothing beside it. #}
          {% set wide = field.widget in ('textarea', 'json', 'relations')
                        or (field.widget == 'point' and settings.ui.map_tile_url) %}
          <div
            class="ff-field{% if wide %} ff-field--wide{% endif %}"
            {% if field.errors %}data-invalid="true"{% endif %}
          >
            <label class="ff-label" for="ff-{{ field.name }}">
              {{ _(field.label) }}
              {% if field.required %}
                <span class="ff-required" aria-hidden="true">*</span>
                <span class="ff-sr-only">{{ _("(required)") }}</span>
              {% endif %}
            </label>

            {% if field.widget == "readonly" %}
              <div class="ff-readonly" id="ff-{{ field.name }}">{{ field.value|ff_display }}</div>

            {% elif field.widget == "textarea" or field.widget == "json" %}
              <textarea
                class="ff-textarea {% if field.widget == 'json' %}ff-mono{% endif %}"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                rows="{{ 10 if field.widget == 'json' else 4 }}"
                {% if field.required %}required{% endif %}
                {% if field.errors %}aria-invalid="true"{% endif %}
              >{{ field.raw }}</textarea>

            {% elif field.widget == "point" %}
              {# The pair of coordinates stays the control that holds and submits
                 the value; the map only writes into it. Typing "41.2995,
                 69.2401" still works, pasting from anywhere still works, and
                 with script off or no tile URL configured this is exactly the
                 text box it has always been. #}
              <input
                class="ff-input ff-mono"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                type="text"
                value="{{ field.raw }}"
                spellcheck="false"
                placeholder="41.2995, 69.2401"
                {% if field.required %}required{% endif %}
                {% if field.errors %}aria-invalid="true"{% endif %}
                {% if settings.ui.map_tile_url %}
                  data-ff-map="{{ settings.ui.map_tile_url }}"
                  data-ff-map-center="{{ settings.ui.map_center }}"
                  {# Drawn on the map itself, where every other map puts its
                     credit and where it stays attached to the tiles it is
                     crediting. Under the field it read as help text for the
                     input rather than as a notice about the pictures. #}
                  data-ff-map-credit="{{ settings.ui.map_attribution }}"
                {% endif %}
              />

            {% elif field.widget in ("file", "image") %}
              {# A native file input cannot be prefilled -- browsers refuse, for
                 good reason -- so a stored value is shown as a link (or a
                 thumbnail, for an image) beside the input rather than inside
                 it. Choosing a new file replaces it on save; the "Clear"
                 checkbox removes it without replacing it, and only appears when
                 there is something to remove.

                 This is also the whole control with script off. With it, the
                 uploader reads this block for the stored value and the clear
                 checkbox, adopts both, and replaces the pair with a drop target
                 that previews what is there and what is about to replace it. #}
              {% if field.value %}
                <div class="ff-file-current">
                  {% if field.widget == "image" %}
                    <img class="ff-file-current__thumb" src="{{ media_url }}/{{ field.value }}" alt="" />
                  {% endif %}
                  <a
                    class="ff-file-current__link"
                    href="{{ media_url }}/{{ field.value }}"
                    target="_blank"
                    rel="noopener"
                  >{{ field.value.rsplit("/", 1)[-1] }}</a>
                  <label class="ff-checkbox ff-file-current__clear">
                    <input type="checkbox" name="{{ field.clear_name }}" value="1" />
                    <span>{{ _("Clear") }}</span>
                  </label>
                </div>
              {% endif %}
              <input
                class="ff-input"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                type="file"
                accept="{{ 'image/*' if field.widget == 'image' else '' }}"
                data-ff-file="{{ field.widget }}"
                {# The server enforces this either way; saying it up front is the
                   difference between a rejected upload and one nobody started. #}
                data-ff-file-limit="{{ settings.media.upload_limit }}"
                {% if field.errors %}aria-invalid="true"{% endif %}
              />

            {% elif field.widget == "color" %}
              {# A swatch and the hex beside it, kept in step. The native picker
                 alone cannot be typed into and cannot be read aloud; the text
                 box alone cannot be pointed at. Both, bound together, is the
                 only version that serves everyone. #}
              <div class="ff-color" data-ff-color>
                <input
                  class="ff-color__swatch"
                  type="color"
                  value="{{ field.raw or "#000000" }}"
                  aria-hidden="true"
                  tabindex="-1"
                />
                <input
                  class="ff-input ff-color__hex ff-mono"
                  id="ff-{{ field.name }}"
                  name="{{ field.name }}"
                  type="text"
                  value="{{ field.raw }}"
                  placeholder="#000000"
                  spellcheck="false"
                  {% if field.errors %}aria-invalid="true"{% endif %}
                />
              </div>

            {% elif field.widget == "richtext" %}
              {# The editor is the project's to choose. FastFort renders the
                 textarea and marks it; `UISettings.richtext_url` names a script
                 that upgrades it -- CKEditor, TinyMCE, whatever the project
                 already licences. Without one this is a textarea, which is a
                 working control rather than a broken editor. #}
              <textarea
                class="ff-textarea"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                rows="10"
                data-ff-richtext
                {% if field.required %}required{% endif %}
                {% if field.errors %}aria-invalid="true"{% endif %}
              >{{ field.raw }}</textarea>

            {% elif field.widget == "nullboolean" %}
              {# Three states, because the column has three. A checkbox would
                 turn "not answered yet" into "answered no" the first time
                 anyone pressed Save. #}
              <select
                class="ff-select"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                data-ff-combo
                data-ff-clearable="false"
                {% if field.errors %}aria-invalid="true"{% endif %}
              >
                <option value="" {% if field.raw == "" %}selected{% endif %}>{{ _("Unknown") }}</option>
                <option value="1" {% if field.raw == "1" %}selected{% endif %}>{{ _("Yes") }}</option>
                <option value="0" {% if field.raw == "0" %}selected{% endif %}>{{ _("No") }}</option>
              </select>

            {% elif field.widget == "checkbox" %}
              <label class="ff-checkbox">
                <input
                  type="checkbox"
                  id="ff-{{ field.name }}"
                  name="{{ field.name }}"
                  value="1"
                  {% if field.value %}checked{% endif %}
                />
                <span>{{ field.help_text or _("Enabled") }}</span>
              </label>

            {% elif field.widget == "password" %}
              {# Two boxes, both empty. The stored hash is never sent to the
                 browser, so there is nothing to prefill and nothing to leak. #}
              <input
                class="ff-input"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                type="password"
                autocomplete="new-password"
                {% if field.errors %}aria-invalid="true"{% endif %}
              />
              <input
                class="ff-input ff-mt-2"
                name="{{ field.confirm_name }}"
                type="password"
                autocomplete="new-password"
                placeholder="{{ _("Confirm {name}", name=_(field.label)|lower) }}"
                aria-label="{{ _("Confirm {name}", name=_(field.label)|lower) }}"
              />

            {% elif field.widget == "select" or field.widget == "relation" %}
              <div class="ff-with-related">
              {# A real <select>, upgraded in place to a searchable listbox.
                 `data-ff-url` is set when the target table has more rows than
                 can be sent to the browser, and the control then searches the
                 server as you type instead of listing everything. #}
              <select
                class="ff-select"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                data-ff-combo
                {# Relations always get a search box, whatever the count. The
                   target table is the one that grows, and a picker that offers
                   search only past some threshold is one people learn is not
                   searchable. #}
                {% if field.spec.is_relation %}data-ff-search="always"{% endif %}
                data-ff-placeholder="{{ _("Choose…") }}"
                data-ff-clearable="{{ "false" if field.required else "true" }}"
                {% if field.remote %}data-ff-url="{{ autocomplete_url }}?field={{ field.name }}"{% endif %}
                {% if field.errors %}aria-invalid="true"{% endif %}
              >
                {% if not field.required %}
                  <option value="">{{ _("— none —") }}</option>
                {% endif %}
                {% for choice in field.choices %}
                  <option
                    value="{{ choice.value }}"
                    {% if field.raw == choice.value|string %}selected{% endif %}
                  >{{ choice.label }}</option>
                {% endfor %}
              </select>

              {% if relation_links.get(field.name) %}
                {# The buttons Django puts beside a foreign key. `add` opens the
                   target's own form in a popup and drops the row it creates into
                   this control; `change` and `view` open whatever is selected.
                   Script-only: a popup that hands its result back has no
                   meaning without one, and the picker works fine without them. #}
                <div
                  class="ff-related ff-js-only"
                  data-ff-related="{{ field.name }}"
                  data-ff-related-add="{{ relation_links[field.name].add }}"
                  data-ff-related-base="{{ relation_links[field.name].base }}"
                >
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="change"
                    data-ff-tip="{{ _("Edit") }}"
                    disabled
                  >{{ ff_icon("edit", size=15) }}</button>
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="add"
                    data-ff-tip="{{ _("Add") }}"
                  >{{ ff_icon("plus", size=15) }}</button>
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="view"
                    data-ff-tip="{{ _("View") }}"
                    data-ff-tip-align="end"
                    disabled
                  >{{ ff_icon("eye", size=15) }}</button>
                </div>
              {% endif %}
              </div>

            {% elif field.widget == "relations" %}
              <div class="ff-with-related">
              {# Many-to-many, drawn as removable chips. The native control this
                 replaces asked people to hold Ctrl to attach three tags to a
                 product, which is not a thing anyone should have to know. #}
              <select
                class="ff-select"
                id="ff-{{ field.name }}"
                name="{{ field.name }}[]"
                multiple
                size="{{ [field.choices|length, 6]|min if field.choices else 3 }}"
                data-ff-combo
                data-ff-search="always"
                data-ff-placeholder="{{ _("Choose…") }}"
                {% if field.remote %}data-ff-url="{{ autocomplete_url }}?field={{ field.name }}"{% endif %}
              >
                {% for choice in field.choices %}
                  <option
                    value="{{ choice.value }}"
                    {% if choice.value|string in field.selected %}selected{% endif %}
                  >{{ choice.label }}</option>
                {% endfor %}
              </select>

              {% if relation_links.get(field.name) %}
                {# The buttons Django puts beside a foreign key. `add` opens the
                   target's own form in a popup and drops the row it creates into
                   this control; `change` and `view` open whatever is selected.
                   Script-only: a popup that hands its result back has no
                   meaning without one, and the picker works fine without them. #}
                <div
                  class="ff-related ff-js-only"
                  data-ff-related="{{ field.name }}"
                  data-ff-related-add="{{ relation_links[field.name].add }}"
                  data-ff-related-base="{{ relation_links[field.name].base }}"
                >
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="change"
                    data-ff-tip="{{ _("Edit") }}"
                    disabled
                  >{{ ff_icon("edit", size=15) }}</button>
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="add"
                    data-ff-tip="{{ _("Add") }}"
                  >{{ ff_icon("plus", size=15) }}</button>
                  <button
                    class="ff-action"
                    type="button"
                    data-ff-related-action="view"
                    data-ff-tip="{{ _("View") }}"
                    data-ff-tip-align="end"
                    disabled
                  >{{ ff_icon("eye", size=15) }}</button>
                </div>
              {% endif %}
              </div>
              <span class="ff-help ff-no-js">{{ _("Hold Ctrl (or Cmd) to select more than one.") }}</span>

            {% else %}
              <input
                class="ff-input"
                id="ff-{{ field.name }}"
                name="{{ field.name }}"
                type="{{ input_types[field.widget] }}"
                value="{{ field.raw }}"
                {# Upgraded in place to a calendar drawn in the page. The native
                   input stays the element that holds and submits the value, so
                   without script it is exactly the control it has always been --
                   only the picker is replaced. #}
                {% if field.widget in ("date", "datetime") %}data-ff-date{% endif %}
                {# Likewise: split into days/hours/minutes/seconds boxes, which
                   is the format the text box was asking people to type out. #}
                {% if field.widget == "duration" %}data-ff-duration{% endif %}
                {% if field.widget == "decimal" %}step="{{ field.spec.decimal_places|step }}"{% endif %}
                {% if field.spec.max_length %}maxlength="{{ field.spec.max_length }}"{% endif %}
                {% if field.spec.placeholder %}placeholder="{{ field.spec.placeholder }}"{% endif %}
                {% if field.required %}required{% endif %}
                {% if field.errors %}aria-invalid="true"{% endif %}
                {% if field.widget == "password" %}autocomplete="new-password"{% endif %}
              />
            {% endif %}

            {% if field.help_text and field.widget != "checkbox" %}
              <span class="ff-help{% if field.help_is_for_no_script %} ff-no-js{% endif %}">{{ field.help_text }}</span>
            {% endif %}
            {% for message in field.errors %}
              <span class="ff-error" role="alert">{{ message }}</span>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>

    <div class="ff-form-actions">
      <button class="ff-btn ff-btn--primary" type="submit">
        {{ ff_icon("check", size=15) }}
        {{ submit_label }}
      </button>
      <a
        class="ff-btn ff-btn--ghost"
        href="{{ list_url }}"
        {# In a popup, "Cancel" should close the window it was opened as, not
           navigate that same window to the parent's list -- which is what a
           plain link does, leaving a popup open on a page nothing points back
           to. Script-only: without it, closing a window from a click needs
           `window.close()` regardless, so the link is the best available
           fallback and simply shows the list in the popup instead. #}
        {% if popup %}data-ff-popup-cancel{% endif %}
      >{{ _("Cancel") }}</a>
    </div>
  </form>
{% endblock %}