{% extends "adminsite/base.html" %}
{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_form_layout.html" as layout_of with context %}

{#- Every problem in one place at the top, each a link to its field, so a
    mistake at the bottom of a long form is never missed. -#}
{%- set problems = [] -%}
{%- for row in rows -%}
  {%- for problem in row.problems -%}
    {%- set ignored = problems.append(problem) -%}
  {%- endfor -%}
{%- endfor -%}
{%- for table in inlines -%}
  {%- for item in table.rows -%}
    {%- set number = loop.index -%}
    {%- for cell in item.cells if cell.error -%}
      {%- set ignored = problems.append(("field-" ~ cell.path, _("{thing}, row {number}, {field}", thing=table.label, number=number, field=cell.label|in_sentence), cell.error)) -%}
    {%- endfor -%}
  {%- endfor -%}
{%- endfor -%}

{#- The title says so first, so a screen reader hears it as the page loads. -#}
{% block page_title %}{% if form_error or problems %}{{ _('Error:') }} {% endif %}{{ heading }} · {{ title }}{% endblock %}

{% block breadcrumb %}
  <nav aria-label="{{ _('Breadcrumb') }}" class="flex h-11 items-end gap-1.5 px-4 text-label text-muted lg:px-7">
    <a class="hover:text-base-content" href="{{ urls.list(view) }}">{{ view.label_plural }}</a>
    {{ icons.icon("chevron-right", 14) }}
    {% if record is not none %}
      <a class="truncate hover:text-base-content" href="{{ cancel_url }}">{{ heading }}</a>
      {{ icons.icon("chevron-right", 14) }}
      <span aria-current="page" class="text-base-content">{{ _('Edit') }}</span>
    {% else %}
      <span aria-current="page" class="truncate text-base-content">{{ heading }}</span>
    {% endif %}
  </nav>
{% endblock %}

{% block header_class %}border-b border-base-300 lg:pt-2 lg:pb-5{% endblock %}

{% block header %}
  <h1 class="text-[22px] font-semibold leading-tight tracking-tight break-words sm:truncate sm:text-[26px]">
    {{ _('Edit {name}', name=heading) if record is not none else heading }}
  </h1>
{% endblock %}

{% block content %}
<div class="flex-1 bg-subtle px-4 pt-6 lg:px-7">
  {#- novalidate: the browser's own checks speak its language and look like
      nothing else here, so every mistake is told by the admin instead. -#}
  <form id="record-form" class="flex max-w-3xl flex-col gap-5" method="post" action="{{ action }}" novalidate
        {% if rows|selectattr("widget", "in", ["file", "image"])|list %}enctype="multipart/form-data"{% endif %}>
    {{ csrf_input | safe if csrf_input }}

    {% if form_error or problems %}
      <div role="alert" tabindex="-1" x-init="$el.focus()"
           class="flex gap-3 rounded-box border border-error/30 bg-error/5 px-4 py-3.5 focus:outline-2 focus:outline-error/40">
        <span class="mt-0.5 text-error">{{ icons.icon("alert", 18) }}</span>
        <div class="flex min-w-0 flex-col gap-1.5">
          <p class="font-semibold">{{ form_error or _('Some fields need another look.') }}</p>
          {% if problems %}
            <ul class="list-disc space-y-0.5 ps-4 text-label">
              {% for anchor, label, error in problems %}
                {% set link %}<a class="text-error underline underline-offset-3" href="#{{ anchor }}">{{ label }}</a>{% endset %}
                <li>{{ _('{field}: {problem}', field=link, problem=error) }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {#- A card for each panel and each set of tabs the view's layout has, and
        one for each run of fields outside them: with no layout, one card of
        every field, one to a line, in the order of the view's fields. -#}
    {% set by_path = {} %}
    {% for one in rows %}{% set ignored = by_path.update({one.path: one}) %}{% endfor %}
    {#- A field with a mistake, its own or one inside the document it holds. -#}
    {% set wrong = rows|selectattr("problems")|map(attribute="path")|list %}
    {% for card in layout %}
      {% if card.kind == "panel" and card.collapsible %}
        {#- Open where it holds a mistake, so the mistake is never folded away. -#}
        <details class="group rounded-box border border-base-300 bg-base-100 shadow-quiet"
                 {% if not card.collapsed or card.paths()|select("in", wrong)|list %}open{% endif %}>
          <summary class="flex cursor-pointer list-none items-center gap-3 px-5 py-3.5">
            <span class="min-w-0 flex-1">
              <span class="block text-body font-semibold">{{ card.title }}</span>
              {% if card.description %}<span class="block pt-0.5 text-label text-muted">{{ card.description }}</span>{% endif %}
            </span>
            <span class="text-muted transition-transform group-open:rotate-90 rtl:rotate-180 rtl:group-open:rotate-90">{{ icons.icon("chevron-right", 16) }}</span>
          </summary>
          <div class="flex flex-col gap-5 border-t border-line p-5">
            {% for piece in card.children %}{{ layout_of.part(piece, by_path, wrong) }}{% endfor %}
          </div>
        </details>
      {% elif card.kind == "panel" %}
        <section class="rounded-box border border-base-300 bg-base-100 shadow-quiet" aria-labelledby="panel-{{ loop.index }}">
          <div class="border-b border-line px-5 py-3.5">
            <h2 id="panel-{{ loop.index }}" class="text-body font-semibold">{{ card.title }}</h2>
            {% if card.description %}<p class="pt-0.5 text-label text-muted">{{ card.description }}</p>{% endif %}
          </div>
          <div class="flex flex-col gap-5 p-5">
            {% for piece in card.children %}{{ layout_of.part(piece, by_path, wrong) }}{% endfor %}
          </div>
        </section>
      {% elif card.kind == "tabs" %}
        <section class="rounded-box border border-base-300 bg-base-100 px-5 pt-3 pb-5 shadow-quiet" aria-label="{{ view.label }}">
          {{ layout_of.part(card, by_path, wrong) }}
        </section>
      {% else %}
        <section class="rounded-box border border-base-300 bg-base-100 shadow-quiet"
                 {% if loop.first %}aria-labelledby="form-title"{% else %}aria-label="{{ view.label }}"{% endif %}>
          {% if loop.first %}
            <h2 id="form-title" class="border-b border-line px-5 py-3.5 text-body font-semibold">{{ view.label }}</h2>
          {% endif %}
          <div class="flex flex-col gap-5 p-5">
            {% for piece in card.children %}{{ layout_of.part(piece, by_path, wrong) }}{% endfor %}
          </div>
        </section>
      {% endif %}
    {% endfor %}

    {% include "adminsite/_inlines.html" %}

    {#- The one place to save: it stays at the foot of the screen while a long
        form scrolls, and sits just under a short one. -#}
    <div class="sticky bottom-0 z-10 -mx-4 bg-subtle px-4 pt-1 pb-4 sm:mx-0 sm:px-0">
      <div class="flex flex-wrap items-center gap-2 rounded-box border border-base-300 bg-base-100 px-3 py-3 shadow-float sm:px-4">
        <button class="btn btn-primary max-sm:flex-1" type="submit">{{ submit_label }}</button>
        <a class="btn btn-ghost" href="{{ cancel_url }}">{{ _('Cancel') }}</a>
        <span class="hidden flex-1 sm:block"></span>
        {% if can_delete and record is not none %}
          <button class="btn btn-ghost text-error hover:bg-error/10" type="button"
                  onclick="document.getElementById('confirm-delete').showModal()">
            {{ icons.icon("trash") }}{{ _('Delete') }}
          </button>
        {% endif %}
      </div>
    </div>
  </form>
</div>

{% if can_delete and record is not none %}
  <dialog id="confirm-delete" class="modal">
    <form class="modal-box max-w-md rounded-box border border-base-300 shadow-float" method="post" action="{{ urls.delete(view, key) }}">
      {{ csrf_input | safe if csrf_input }}
      <h3 class="text-base font-semibold">{{ _('Delete {name}?', name=heading) }}</h3>
      <p class="pt-2 text-base-content/80">{{ _('This cannot be undone.') }}</p>
      <div class="modal-action">
        <button type="button" class="btn btn-ghost btn-sm"
                onclick="this.closest('dialog').close()">{{ _('Cancel') }}</button>
        <button type="submit" class="btn btn-error btn-sm">{{ _('Delete') }}</button>
      </div>
    </form>
    <div class="modal-backdrop" onclick="this.closest('dialog').close()"></div>
  </dialog>
{% endif %}
{% endblock %}