{% from "admin/components/csrf-field.html" import csrf_field %}
{% from "admin/components/ui/field.html" import render_form_input with context %}
{% from "admin/components/inline.html" import render_inline_section with context %}
{% from "admin/components/icons.html" import icon %}
{# HTMX posts to itself and swaps its own outerHTML with the response,
   so a validation error redisplays the form in place; a plain POST to
   `action` works identically without JS.

   The swap targets #resource-form-wrapper -- this whole element -- not
   the <form> inside it, because the error response *is* this template.
   Targeting the <form> nested a fresh wrapper inside the old one on
   every failed save, duplicating the inline sections and the action bar
   each time.

   Layout comes from ui("page"): the record scrolls in a centred column
   while Save/Cancel stay pinned to the bottom of the viewport, so a
   long form never buries its own submit button. #}
<div id="resource-form-wrapper" class="{{ ui('page') }}">
  <div class="{{ ui('page', 'body-wide') if wide_body else ui('page', 'body') }}">
    <form id="resource-form" method="post" action="{{ form_action }}"
          {% if prepopulated %}data-prepopulated='{{ prepopulated | tojson }}'{% endif %}
          hx-post="{{ form_action }}" hx-target="#resource-form-wrapper" hx-swap="outerHTML"
          class="{{ ui('panel', 'form') }}">
      {{ csrf_field(csrf_token) }}
  {% if list_token %}<input type="hidden" name="_list" value="{{ list_token }}">{% endif %}
      {% if non_field_errors %}
      {# A tinted, outlined panel rather than a solid red block: solid
         destructive is reserved for buttons, so an error summary does
         not out-shout Save. #}
      <div role="alert" class="{{ ui('alert', 'destructive') }} mb-4">
        <h5 class="{{ ui('alert', 'title') }}">{{ _("Couldn't save %(name)s", name=_(model_admin.get_verbose_name())) }}</h5>
        <div class="{{ ui('alert', 'description') }}">
          {% for error in non_field_errors %}<p>{{ error }}</p>{% endfor %}
        </div>
      </div>
      {% endif %}
      {# An untitled group renders bare -- no header, no border -- so a
         form declaring none looks exactly like a flat form. A titled
         group is always collapsible; `collapsed` only decides whether
         it starts closed. #}
      {% for fieldset in fieldsets %}
      {% if fieldset.title %}
      <div class="{{ ui('fieldset') }}" x-data="{ open: {{ 'false' if fieldset.collapsed else 'true' }} }"
           x-id="['fieldset-body']">
        <button type="button" @click="open = !open"
                :aria-expanded="open ? 'true' : 'false'" :aria-controls="$id('fieldset-body')"
                class="{{ ui('fieldset', 'trigger') }}">
          <span class="{{ ui('fieldset', 'title') }}">{{ _(fieldset.title) }}</span>
          {{ icon("chevron-down", ui('fieldset', 'icon')) }}
        </button>
        {% if fieldset.description %}
        <p class="{{ ui('fieldset', 'description') }}">{{ _(fieldset.description) }}</p>
        {% endif %}
        <div x-show="open" x-collapse :id="$id('fieldset-body')" class="{{ ui('fieldset', 'body') }}">
          {% for name in fieldset.fields %}
          {% set field = model_admin.get_field(name) %}
          {% set value = data.get(name) if data is not none else (field.get_value(object) if object is not none else none) %}
          {{ render_form_input(field, value, errors.get(name), relation_options.get(name),
                               model_admin.is_readonly(name, object)) }}
          {% endfor %}
        </div>
      </div>
      {% else %}
      {% for name in fieldset.fields %}
      {% set field = model_admin.get_field(name) %}
      {% set value = data.get(name) if data is not none else (field.get_value(object) if object is not none else none) %}
      {{ render_form_input(field, value, errors.get(name), relation_options.get(name),
                           model_admin.is_readonly(name, object)) }}
      {% endfor %}
      {% endif %}
      {% endfor %}
    </form>
    {# Inline sections carry their own <form> elements, so they have to
       stay siblings of the record form -- HTML forbids nesting one form
       inside another. #}
    {% for inline in inlines %}{{ render_inline_section(inline) }}{% endfor %}
  </div>
  {# The buttons sit outside #resource-form so the bar can span the full
     content width rather than being trapped in the centred column.
     `form="resource-form"` re-associates them: the browser submits
     normally, and htmx resolves the same attribute, so the submitter
     value still reaches the handler over HTMX.

     An unclicked submit button's name never makes it into the form
     data, so `name="_continue"` rides along only when it was the button
     that submitted -- which is how the handler knows to come back here
     instead of the detail page. #}
  <div class="{{ ui('page', 'actions') }}">
    <div class="{{ ui('page', 'actions-inner-wide') if wide_body else ui('page', 'actions-inner') }}">
      {# Delete lives on the edit form and nowhere else: there is
         nothing to delete while creating, and the detail page
         deliberately no longer offers it. Kept alone on the left, so it
         is never adjacent to the button people click by reflex. #}
      {% if object is not none and permissions.can_delete %}
      <a href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ model_admin.get_pk(object) }}/delete"
         class="{{ ui('button', 'destructive-outline') }}">
        {{ icon("delete", "w-4 h-4") }} {{ _("Delete") }}
      </a>
      {% endif %}
      <div class="{{ ui('page', 'actions-primary') }}">
        <button type="submit" form="resource-form" class="{{ ui('button') }}">
          {{ icon("check", "w-4 h-4") }} {{ _("Save") }}
        </button>
        <button type="submit" form="resource-form" name="_continue" value="1"
                class="{{ ui('button', 'outline') }}">
          {{ icon("edit", "w-4 h-4") }} {{ _("Save and continue editing") }}
        </button>
        {# Only where adding another makes sense -- offering it on a form
           the principal may not create from would be a button that
           403s. #}
        {% if permissions.can_create %}
        <button type="submit" form="resource-form" name="_addanother" value="1"
                class="{{ ui('button', 'outline') }}">
          {{ icon("plus", "w-4 h-4") }} {{ _("Save and add another") }}
        </button>
        {# save_as: only on an existing record, since there is nothing to
           copy from on a create form. #}
        {% if allow_save_as %}
        <button type="submit" form="resource-form" name="_saveasnew" value="1"
                class="{{ ui('button', 'outline') }}">
          {{ icon("copy", "w-4 h-4") }} {{ _("Save as new") }}
        </button>
        {% endif %}
        {% endif %}
        <a href="{{ base_path }}/{{ model_admin.get_slug() }}" class="{{ ui('button', 'ghost-muted') }}">
          {{ _("Cancel") }}
        </a>
      </div>
    </div>
  </div>
</div>