{#- A JSON column drawn as a form from its schema. `row.document` holds the
    parts: a single value is drawn like any other field, an object's
    properties sit under its title, and a list of objects or a map is a table
    whose rows can be added and removed. Form and JSON switch between the form
    and the document it stands for, as Save would write it.

    Every input's name says where its value sits in the document, so the form
    is sent like any other: settings.free_shipping_over,
    settings.channels.0.id. -#}
{% import "adminsite/_icons.html" as icons %}
{%- set document = row.document -%}
{%- set json_id = "json-" ~ row.path -%}

{%- macro value_part(entry) -%}
  {%- set row = entry.row -%}
  {% include "adminsite/_field.html" %}
{%- endmacro -%}

{#- One line of a table: a cell for each value, then its remove button. The
    first cell carries the row's marker, so a row whose inputs are all empty
    is still sent, and read as a row left unused. -#}
{%- macro table_row(item, counted) -%}
  <tr class="border-t border-line align-top">
    {% for cell in item.cells %}
      <td class="{{ 'min-w-48' if cell.widget == 'select' or cell.field.multiple|default(false) else 'min-w-28' }} px-2 py-2">
        {% if loop.first %}<input type="hidden" name="{{ item.marker }}" value="">{% endif %}
        {%- set row = cell -%}
        {%- set note_id = cell.input_id ~ "-note" -%}
        {%- set field_attrs -%}aria-label="{{ cell.label }}"{% if cell.error %} aria-invalid="true" aria-describedby="{{ note_id }}"{% endif %}{%- endset -%}
        {% include ["adminsite/widgets/" ~ cell.widget ~ ".html", "adminsite/widgets/input.html"] %}
        {% if cell.error %}
          <p class="flex items-start gap-1.5 pt-1.5 text-[12.5px] leading-snug text-error" id="{{ note_id }}">
            <span class="mt-px">{{ icons.icon("alert", 14) }}</span>{{ cell.error }}
          </p>
        {% endif %}
      </td>
    {% endfor %}
    <td class="w-11 py-2 pe-1.5">
      <button type="button" class="btn btn-ghost btn-square btn-sm text-muted" aria-label="{{ _('Remove this row') }}"
              @click="$el.closest('tr').remove(){% if counted %}; count--{% endif %}">{{ icons.icon("trash", 16) }}</button>
    </td>
  </tr>
{%- endmacro -%}

{#- A list of objects, or a map: a table, with a button that copies the blank
    row in under the next free number. -#}
{%- macro table_part(entry) -%}
  {%- set pairs = entry.kind == "pairs" -%}
  <div class="flex min-w-0 flex-col gap-1.5 sm:col-span-2" role="group" id="{{ entry.anchor }}"
       aria-labelledby="{{ entry.anchor }}-label"
       {% if entry.error or entry.note %}aria-describedby="{{ entry.anchor }}-note"{% endif %}
       x-data="{ next: {{ entry.next_number }}, count: {{ entry.rows|length }} }">
    {% if entry.label %}
      <span id="{{ entry.anchor }}-label" class="text-[13px] font-medium">{{ entry.label }}</span>
    {% endif %}
    <div class="overflow-x-auto rounded-field border border-base-300 bg-base-100">
      <table class="w-full">
        <thead class="bg-subtle">
          <tr>
            {% if pairs %}
              <th class="h-8 px-2.5 text-start text-xs font-medium text-muted">{{ _('Key') }}</th>
              <th class="h-8 px-2.5 text-start text-xs font-medium text-muted">{{ _('Value') }}</th>
            {% else %}
              {% for column in entry.columns %}
                <th class="h-8 px-2.5 text-start text-xs font-medium text-muted">
                  {{ column.label }}{% if not column.field.required and column.widget != "checkbox" %} <span class="font-normal">{{ _('(optional)') }}</span>{% endif %}
                </th>
              {% endfor %}
            {% endif %}
            <th class="w-11"><span class="sr-only">{{ _('Remove') }}</span></th>
          </tr>
        </thead>
        <tbody x-ref="body">
          {% for item in entry.rows %}{{ table_row(item, pairs) }}{% endfor %}
        </tbody>
      </table>
      <div class="flex items-center gap-2 border-t border-line px-1.5 py-1">
        <button type="button" class="btn btn-ghost btn-sm font-medium text-link"
                {% if pairs and entry.key_count %}:disabled="count >= {{ entry.key_count }}"{% endif %}
                @click="
                  const blank = $refs.blank.innerHTML.replaceAll('__index__', next);
                  $refs.body.insertAdjacentHTML('beforeend', blank);
                  // So a search in the new row's picker reaches the server.
                  htmx.process($refs.body.lastElementChild);
                  next++;
                  count++;
                ">
          {{ icons.icon("plus", 14) }}{{ _('Add a row') }}
        </button>
        {% if pairs and entry.key_count %}
          <span class="text-[12.5px] text-muted" x-show="count >= {{ entry.key_count }}" x-cloak>{{ _('Each key has a row.') }}</span>
        {% endif %}
      </div>
    </div>
    {#- The row "add" copies. Inside a template its inputs are never sent. -#}
    <template x-ref="blank">{{ table_row(entry.blank, pairs) }}</template>
    {% if entry.error %}
      <p class="flex items-start gap-1.5 text-[12.5px] leading-snug text-error" id="{{ entry.anchor }}-note">
        <span class="mt-px">{{ icons.icon("alert", 14) }}</span>{{ entry.error }}
      </p>
    {% elif entry.note %}
      <p class="text-[12.5px] leading-snug text-muted" id="{{ entry.anchor }}-note">{{ entry.note }}</p>
    {% endif %}
  </div>
{%- endmacro -%}

{#- An object inside the document: its properties under its title. -#}
{%- macro group_part(entry) -%}
  <div class="flex min-w-0 flex-col gap-3 rounded-box border border-line p-4 sm:col-span-2" role="group" id="{{ entry.anchor }}"
       aria-labelledby="{{ entry.anchor }}-label"
       {% if entry.error or entry.note %}aria-describedby="{{ entry.anchor }}-note"{% endif %}>
    <div class="flex flex-col gap-0.5">
      <span id="{{ entry.anchor }}-label" class="text-[13px] font-medium">{{ entry.label }}</span>
      {% if entry.error %}
        <p class="flex items-start gap-1.5 text-[12.5px] leading-snug text-error" id="{{ entry.anchor }}-note">
          <span class="mt-px">{{ icons.icon("alert", 14) }}</span>{{ entry.error }}
        </p>
      {% elif entry.note %}
        <p class="text-[12.5px] leading-snug text-muted" id="{{ entry.anchor }}-note">{{ entry.note }}</p>
      {% endif %}
    </div>
    {{ parts(entry.entries) }}
  </div>
{%- endmacro -%}

{%- macro part(entry) -%}
  {%- if entry.kind == "group" -%}{{ group_part(entry) }}
  {%- elif entry.kind in ("rows", "pairs") -%}{{ table_part(entry) }}
  {%- elif entry.row is not none -%}{{ value_part(entry) }}
  {%- endif -%}
{%- endmacro -%}

{#- A field that may be left out of the document, drawn only while it is
    set. Unset, it is hidden and its inputs sit in a disabled fieldset, so
    none of them is sent; the box under the document adds it back, in its
    own place. -#}
{%- macro settable_part(entry) -%}
  <div class="flex min-w-0 items-start gap-3 sm:col-span-2" data-settable="{{ entry.name }}"
       x-show='holds({{ entry.name|tojson }})' {% if not entry.is_set %}x-cloak{% endif %}>
    <fieldset class="min-w-0 grow" :disabled='!holds({{ entry.name|tojson }})' {% if not entry.is_set %}disabled{% endif %}>
      <input type="hidden" name="{{ entry.name }}~set" value="1">
      <div class="grid gap-5 sm:grid-cols-2">{{ part(entry) }}</div>
    </fieldset>
    <button type="button" class="btn btn-ghost btn-sm mt-5 shrink-0 text-muted"
            @click='remove({{ entry.name|tojson }})'
            aria-label="{{ _('Remove {name}', name=entry.label) }}">{{ _('Remove') }}</button>
  </div>
{%- endmacro -%}

{%- macro parts(entries) -%}
  <div class="grid gap-x-5 gap-y-5 sm:grid-cols-2">
    {% for entry in entries %}
      {% if entry.settable %}{{ settable_part(entry) }}{% else %}{{ part(entry) }}{% endif %}
    {% endfor %}
  </div>
{%- endmacro -%}

{#- A document whose fields may each be left unset: the fields that are set,
    then a box that adds one of the others. The box is a picker whose list is
    the fields left out, in the schema's order, each with its description,
    and whose choices are the fields that are set. -#}
{%- macro partial_parts(entries, name) -%}
  {%- set settable = entries|selectattr("settable")|list -%}
  {%- set held = namespace(items=[]) -%}
  {%- for entry in settable if entry.is_set -%}
    {%- set held.items = held.items + [{"value": entry.name, "label": entry.label}] -%}
  {%- endfor -%}
  {%- set list_id = "unset-" ~ name|replace(".", "-") -%}
  <div class="flex flex-col gap-5 rounded-box border border-line bg-subtle p-4"
       x-data='fieldAdder({list: {{ list_id|tojson }}, hint: {{ _("Add a field")|tojson }}, search: {{ _("Search fields")|tojson }}, picked: {{ held.items|tojson }}})'>
    <div x-show="picked.length" {% if not held.items %}x-cloak{% endif %}>{{ parts(entries) }}</div>
    <p class="text-muted" x-show="!picked.length" {% if held.items %}x-cloak{% endif %}>{{ _('Nothing set.') }}</p>
    <div class="relative w-full max-w-sm" x-show="picked.length < {{ settable|length }}"
         {% if held.items|length == settable|length %}x-cloak{% endif %}>
      {#- A press anywhere in the box goes to the text in it, as in any input. -#}
      <div class="input h-10 w-full cursor-text gap-2 border-dashed" @mousedown="press($event)">
        <span class="text-link">{{ icons.icon("plus", 16) }}</span>
        <input type="text" x-ref="search" role="combobox" class="min-w-24 flex-1"
               autocomplete="off" spellcheck="false" aria-label="{{ _('Add a field') }}"
               aria-autocomplete="list" aria-controls="{{ list_id }}"
               :aria-expanded="open.toString()" :aria-activedescendant="activeId || null"
               x-model="query" :placeholder="placeholder"
               @focus="enter()" @click="enter()" @blur="close()" @input="typed()" @keydown="key($event)">
      </div>
      <div class="absolute z-30 mt-1 w-full overflow-hidden rounded-box border border-base-300 bg-base-100 shadow-lg"
           x-show="open" x-cloak @mousedown.prevent>
        <ul id="{{ list_id }}" x-ref="list" role="listbox" aria-label="{{ _('Fields not set') }}"
            class="max-h-72 overflow-auto p-1">
          {% for entry in settable %}
            {#- Found by its description as well as its name. -#}
            <li role="option" class="flex cursor-pointer flex-col rounded-field px-2.5 py-1.5 data-[active=true]:bg-base-200"
                data-value="{{ entry.name }}" aria-selected="false"
                x-show='offers({{ entry.name|tojson }}, {{ (entry.label ~ " " ~ entry.note)|tojson }})'
                @mousedown.prevent @mouseenter="hover($el)"
                @click='choose({{ entry.name|tojson }}, {{ entry.label|tojson }})'>
              <span class="min-w-0 break-words">{{ entry.label }}</span>
              {% if entry.note %}<span class="text-[12.5px] leading-snug text-muted">{{ entry.note }}</span>{% endif %}
            </li>
          {% endfor %}
        </ul>
        <p class="px-3.5 py-2.5 text-muted" x-show="empty" x-cloak>{{ _('Nothing found.') }}</p>
      </div>
    </div>
  </div>
{%- endmacro -%}

{#- The Form and JSON switch sits in the field's own title line. -#}
<input type="hidden" name="{{ row.path }}~form" value="1">
<div x-show="view === 'form'">
  {%- if document.kind == "group" and document.entries|selectattr("settable")|first -%}
    {{ partial_parts(document.entries, row.path) }}
  {%- elif document.kind == "group" -%}
    <div class="rounded-box border border-line bg-subtle p-4">{{ parts(document.entries) }}</div>
  {%- else -%}
    <div class="grid sm:grid-cols-2">{{ part(document) }}</div>
  {%- endif -%}
</div>
<div class="flex flex-col gap-1.5" x-show="view === 'json'" x-cloak>
  <div id="{{ json_id }}" aria-live="polite">
    <p class="flex h-10 items-center text-muted">{{ _('Reading the form…') }}</p>
  </div>
  <p class="text-[12.5px] text-muted">{{ _('What Save writes. Switch back to Form to change it.') }}</p>
</div>