{# @description A single presentational form field: control plus optional label, help text, and errors. #}
{# @prop type:text | default:"text" | description:"Any text-like input type, or textarea, select, file, checkbox, radio, toggle." #}
{# @prop label:text | description:"Field label; also accepts a named slot of the same name for rich content." #}
{# @prop hide-label:boolean | description:"Visually hide the label while keeping it accessible." #}
{# @prop help-text:text | description:"Help text shown below the control; also accepts a named slot." #}
{# @prop errors:text | description:"A string or list of errors; switches the control to its error style. Also accepts a named slot." #}
{# @prop prelabel:text | description:"Inline label before the control (select/text inputs)." #}
{# @prop postlabel:text | description:"Inline label after the control (select/text inputs)." #}
{# @prop class:text | description:"Extra classes on the control element." #}
{# @prop wrapper-class:text | description:"Extra classes on the fieldset wrapper." #}
{# @slot Extra control content — Fills the textarea value, select options, or extra inline content. #}
{# @slot:label Rich label markup — Alternative to label for rich content, e.g. a badge. #}
{# @slot:help_text Rich help text markup — Alternative to help-text. #}
{# @slot:errors Rich error markup — Alternative to errors. #}

<c-vars type="text"
        label
        hide-label
        help-text
        errors
        prelabel
        postlabel
        class
        wrapper-class />
{% comment %}
  The fieldset wrapper only renders when there is something to put in it, so a
  bare field stays a single control that composes inside joins and toolbars.
  Check-style controls carry their label inline, so they never need a legend.
{% endcomment %}
{% if type == "checkbox" or type == "radio" or type == "toggle" %}
  {% firstof help_text errors as wrapped %}
  {% firstof "" as legend %}
{% else %}
  {% firstof label help_text errors as wrapped %}
  {% firstof label as legend %}
{% endif %}
{# djlint:off #}
{% if wrapped %}
  <div class="fieldset {{ wrapper_class }}">
  {% if legend %}
    <label class="fieldset-legend{% if hide_label %} sr-only{% endif %}" {% if id %}for="{{ id }}"{% endif %}>
      {{ legend }}{% if required %}<span class="text-error" aria-hidden="true">*</span>{% endif %}
    </label>
  {% endif %}
{% endif %}
{% if type == "textarea" %}
  <textarea class="textarea w-full{% if errors %} textarea-error{% endif %} {{ class }}"{% if errors %} aria-invalid="true"{% endif %} {{ attrs }}>{{ slot }}</textarea>
{% elif type == "select" %}
  <label class="select w-full{% if errors %} select-error{% endif %} {{ class }}">
    {% if prelabel %}<span class="label">{{ prelabel }}</span>{% endif %}
    <select{% if errors %} aria-invalid="true"{% endif %} {{ attrs }}>{{ slot }}</select>
    {% if postlabel %}<span class="label">{{ postlabel }}</span>{% endif %}
  </label>
{% elif type == "file" %}
  <input type="file" class="file-input w-full{% if errors %} file-input-error{% endif %} {{ class }}"{% if errors %} aria-invalid="true"{% endif %} {{ attrs }} />
{% elif type == "checkbox" or type == "radio" or type == "toggle" %}
  <label class="label gap-2">
    <input type="{% if type == 'radio' %}radio{% else %}checkbox{% endif %}"
           class="{{ type }}{% if errors %} {{ type }}-error{% endif %} {{ class }}"{% if errors %} aria-invalid="true"{% endif %} {{ attrs }} />
    {% if label %}<span{% if hide_label %} class="sr-only"{% endif %}>{{ label }}{% if required %}<span class="text-error" aria-hidden="true">*</span>{% endif %}</span>{% endif %}
    {{ slot }}
  </label>
{% else %}
  <label class="input w-full{% if errors %} input-error{% endif %} {{ class }}">
    {% if prelabel %}<span class="label">{{ prelabel }}</span>{% endif %}
    <input type="{{ type }}" class="grow"{% if errors %} aria-invalid="true"{% endif %} {{ attrs }} />
    {{ slot }}
    {% if postlabel %}<span class="label">{{ postlabel }}</span>{% endif %}
  </label>
{% endif %}
{% if wrapped %}
  {% if help_text %}<p class="label">{{ help_text }}</p>{% endif %}
  {% if errors %}
    <p class="label text-error">
      {% if errors == errors|stringformat:"s" %}
        {{ errors }}
      {% else %}
        {% for error in errors %}{{ error }}{% if not forloop.last %}<br />{% endif %}{% endfor %}
      {% endif %}
    </p>
  {% endif %}
  </div>
{% endif %}
{# djlint:on #}