{#- Each widget lives in widgets/, so a project can override one by
    dropping a file with the same name into its own template folder. -#}
{% import "adminsite/_icons.html" as icons %}
{%- set field_id = "field-" ~ (row.id_prefix ~ row.path)|replace(".", "-") -%}
{#- Ties the input to its name, and to its error or help, for screen readers. -#}
{%- set field_attrs -%}
  aria-labelledby="{{ field_id }}-label"
  {%- if row.error or row.note %} aria-describedby="{{ field_id }}-note"{% endif %}
  {%- if row.error %} aria-invalid="true"{% endif %}
{%- endset -%}
{#- An input as wide as what it holds: a number or a date short, a line of
    text longer, long text, files and many values the whole width. -#}
{%- set full = row.widget in ("textarea", "json", "file", "image", "list") or row.field.collection|default(false) or row.field.multiple|default(false) -%}
{%- set short = row.widget in ("number", "date", "time", "datetime") -%}
{#- A document drawn as a form switches between the form and its JSON. -#}
{%- set document = row.document if row.document is defined else none -%}
{#- A new record's document whose schema follows the rest of the form is
    drawn again when something outside it changes. -#}
<fieldset class="flex min-w-0 flex-col gap-1.5 {% if short %}max-w-xs{% elif not full %}max-w-md{% endif %}"
          {% if document is not none %}x-data="{ view: 'form' }"{% endif %}
          {% if row.redraw_url|default("") %}id="{{ field_id }}-part" hx-post="{{ row.redraw_url }}" hx-swap="outerHTML"
            hx-trigger="change[!target.closest('#{{ field_id }}-part')] from:closest form"{% endif %}>
  {#- A panel whose one field this is names it already, so the label is kept
      for screen readers only. -#}
  <legend class="mb-1.5 flex items-center gap-2 text-[13px] font-medium {% if document is not none %}w-full{% endif %} {% if hide_label|default(false) %}sr-only{% endif %}" id="{{ field_id }}-label">
    {{ row.label }}
    {% if row.readonly %}
      <span class="inline-flex items-center gap-1 text-xs font-normal text-muted">{{ icons.icon("lock", 12) }}{{ _('read only') }}</span>
    {% elif row.required %}
      <span class="text-xs font-normal text-muted">{{ _('required') }}</span>
    {% endif %}
    {% if document is not none %}
      <span class="ms-auto">
        {%- with switch_views = [("form", _("Form")), ("json", "JSON")], switch_label = row.label,
                 switch_json_url = urls.document(view, row.path, key|default("")), switch_json_target = "json-" ~ row.path -%}
          {% include "adminsite/_document_switch.html" %}
        {%- endwith -%}
      </span>
    {% endif %}
  </legend>

  {% if row.readonly %}
    {% include "adminsite/widgets/readonly.html" %}
  {% else %}
    {% include ["adminsite/widgets/" ~ row.widget ~ ".html", "adminsite/widgets/input.html"] %}
  {% endif %}

  {% if row.error %}
    <p class="flex items-start gap-1.5 text-[12.5px] leading-snug text-error" id="{{ field_id }}-note">
      <span class="mt-px">{{ icons.icon("alert", 14) }}</span>{{ row.error }}
    </p>
  {% elif row.note %}
    <p class="text-[12.5px] leading-snug text-muted" id="{{ field_id }}-note">{{ row.note }}</p>
  {% endif %}
</fieldset>