{#- 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 -%}
{%- set wide = row.widget in ("textarea", "json", "file", "image") or row.field.collection|default(false) or row.field.multiple|default(false) -%}
<fieldset class="flex min-w-0 flex-col gap-1.5 {% if wide %}sm:col-span-2{% endif %}">
  <legend class="mb-1.5 flex items-center gap-2 text-[13px] font-medium" 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 %}
  </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>