{% extends "base.html" %}
{% from "model/_widgets.html" import
  checkbox_control,
  color_control,
  file_control,
  generic_control,
  geometry_control,
  keyvalue_control,
  nullboolean_control,
  password_control,
  range_control,
  readonly_control,
  relations_control,
  richtext_control,
  select_control,
  tags_control,
  textarea_control
%}

{% 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 %}
          {# The geometry kind decides width too -- a POLYGON's textarea earns
             the full row the way any other textarea does, but a POINT with no
             map configured is still a short text box next to nothing. Mirrors
             `geometry_control`'s own default: a missing `GeometrySpec` reads
             as POINT, which is what a `formfield_overrides = {"col": "point"}`
             on a plain column looks like once its name resolves to
             "geometry". #}
          {% set geometry_kind = (field.spec.geometry.kind if field.spec.geometry
                                   else "POINT") if field.widget == "geometry" else "" %}
          {# Long controls span both columns: a textarea squeezed into half a
             page is worse than a taller form. #}
          {% set wide = field.widget in ("textarea", "json", "relations", "keyvalue", "range")
                        or (field.widget == "geometry"
                            and (settings.ui.map_tile_url or geometry_kind != "POINT")) %}
          <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" %}
              {{ readonly_control(field) }}
            {% elif field.widget == "textarea" or field.widget == "json" %}
              {{ textarea_control(field) }}
            {% elif field.widget == "geometry" %}
              {{ geometry_control(field, settings.ui.map_tile_url, settings.ui.map_center,
                                   settings.ui.map_attribution, settings.ui.map_max_zoom) }}
            {% elif field.widget in ("file", "image") %}
              {{ file_control(field, media_url, settings.media.upload_limit, _) }}
            {% elif field.widget == "color" %}
              {{ color_control(field) }}
            {% elif field.widget == "richtext" %}
              {{ richtext_control(field) }}
            {% elif field.widget == "nullboolean" %}
              {{ nullboolean_control(field, _) }}
            {% elif field.widget == "checkbox" %}
              {{ checkbox_control(field, _) }}
            {% elif field.widget == "password" %}
              {{ password_control(field, _) }}
            {% elif field.widget == "select" or field.widget == "relation" %}
              {{ select_control(field, autocomplete_url, relation_links, _) }}
            {% elif field.widget == "relations" %}
              {{ relations_control(field, autocomplete_url, relation_links, _) }}
            {% elif field.widget == "tags" %}
              {{ tags_control(field) }}
            {% elif field.widget == "keyvalue" %}
              {{ keyvalue_control(field) }}
            {% elif field.widget == "range" %}
              {{ range_control(field, input_types, _) }}
            {% else %}
              {{ generic_control(field, input_types) }}
            {% 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 %}