{#- One part of a form's layout: a field, or the fields a row, a column, a
    fieldset, a panel inside another or a set of tabs holds. `rows` maps a
    path to its form row, and `wrong` lists the paths with a mistake. -#}
{% macro part(piece, rows, wrong) -%}
  {%- if piece.kind == "field" -%}
    {%- set row = rows[piece.path] -%}
    {%- set hide_label = not piece.show_label -%}
    {% include "adminsite/_field.html" %}
  {%- elif piece.kind == "row" -%}
    {#- Side by side once there is room, one under the other on a phone. -#}
    <div class="grid gap-5 {{ {1: '', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3'}.get(piece.children|length, 'md:grid-cols-4') }}">
      {%- for child in piece.children %}{{ part(child, rows, wrong) }}{% endfor -%}
    </div>
  {%- elif piece.kind == "column" -%}
    <div class="flex min-w-0 flex-col gap-5">
      {%- for child in piece.children %}{{ part(child, rows, wrong) }}{% endfor -%}
    </div>
  {%- elif piece.kind == "fieldset" -%}
    <fieldset class="flex min-w-0 flex-col gap-5 rounded-box border border-line px-4 pt-2 pb-4">
      <legend class="px-1.5 text-label font-semibold">{{ piece.title }}</legend>
      {%- for child in piece.children %}{{ part(child, rows, wrong) }}{% endfor -%}
    </fieldset>
  {%- elif piece.kind == "panel" -%}
    {#- A panel inside another part reads as a titled stretch of it. -#}
    <section class="flex min-w-0 flex-col gap-5">
      <div>
        <h3 class="text-label font-semibold">{{ piece.title }}</h3>
        {%- if piece.description %}<p class="pt-0.5 text-label text-muted">{{ piece.description }}</p>{% endif -%}
      </div>
      {%- for child in piece.children %}{{ part(child, rows, wrong) }}{% endfor -%}
    </section>
  {%- elif piece.kind == "tabs" -%}
    {#- One tab at a time, opening on the first that holds a mistake, with a
        mark on each that does. The arrow keys move between them. The line
        under them is drawn inside the bar, as above a list. -#}
    {%- set tabs_id = "tabs-" ~ (piece.paths()|first)|replace(".", "-") -%}
    {%- set count = piece.children|length -%}
    {%- set start = namespace(index=0, found=false) -%}
    {#- No filter on the loop: a filtered loop counts only what it keeps. -#}
    {%- for tab in piece.children -%}
      {%- if not start.found and tab.paths()|select("in", wrong)|list -%}
        {%- set start.index = loop.index0 -%}{%- set start.found = true -%}
      {%- endif -%}
    {%- endfor -%}
    <div class="min-w-0" x-data="{ tab: {{ start.index }} }">
      <div role="tablist" class="relative -mt-1 flex gap-5 overflow-x-auto overflow-y-hidden shadow-[inset_0_-1px_var(--color-line)]">
        {%- for tab in piece.children %}
          {%- set index = loop.index0 %}
          <button role="tab" type="button" id="{{ tabs_id }}-{{ index }}" aria-controls="{{ tabs_id }}-panel-{{ index }}"
                  aria-selected="{{ 'true' if index == start.index else 'false' }}" :aria-selected="(tab === {{ index }}).toString()"
                  tabindex="{{ '0' if index == start.index else '-1' }}" :tabindex="tab === {{ index }} ? 0 : -1"
                  @click="tab = {{ index }}"
                  @keydown.arrow-right.prevent="tab = (tab + 1) % {{ count }}; $nextTick(() => document.getElementById('{{ tabs_id }}-' + tab).focus())"
                  @keydown.arrow-left.prevent="tab = (tab + {{ count - 1 }}) % {{ count }}; $nextTick(() => document.getElementById('{{ tabs_id }}-' + tab).focus())"
                  class="flex h-10 shrink-0 items-center gap-1.5 border-b-2 text-label font-medium"
                  :class="tab === {{ index }} ? 'border-base-content text-base-content' : 'border-transparent text-muted hover:text-base-content'">
            {{- tab.title -}}
            {%- if tab.paths()|select("in", wrong)|list -%}
              <span class="size-1.5 rounded-full bg-error" aria-hidden="true"></span><span class="sr-only">{{ _('Has mistakes') }}</span>
            {%- endif -%}
          </button>
        {%- endfor %}
      </div>
      {%- for tab in piece.children %}
        <div role="tabpanel" id="{{ tabs_id }}-panel-{{ loop.index0 }}" aria-labelledby="{{ tabs_id }}-{{ loop.index0 }}"
             x-show="tab === {{ loop.index0 }}" {% if loop.index0 != start.index %}x-cloak{% endif %}
             class="flex flex-col gap-5 pt-5">
          {%- for child in tab.children %}{{ part(child, rows, wrong) }}{% endfor -%}
        </div>
      {%- endfor %}
    </div>
  {%- endif -%}
{%- endmacro %}