{% comment %}
Component: Form Field (c-field, c-input)
Accessible form control with label, help text, error message, and character counter.
{% endcomment %}
<div class="c-field w-full">
    {% if label %}
    <label for="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}" class="c-label flex items-center justify-between">
        <span>{{ label }}{% if required %}<span class="text-danger ml-0.5">*</span>{% endif %}</span>
        {% if counter %}
        <span class="text-xs text-subtle font-mono" id="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_counter">{{ counter }}</span>
        {% endif %}
    </label>
    {% endif %}

    {% if prefix or suffix %}
    <div class="relative flex items-center w-full">
        {% if prefix %}<span class="absolute left-3 text-subtle text-sm pointer-events-none">{{ prefix }}</span>{% endif %}
    {% endif %}

    {% if type == "textarea" %}
    <textarea id="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}"
              name="{{ name }}"
              class="c-input min-h-[80px] py-2 w-full{% if prefix %} pl-8{% endif %}{% if suffix %} pr-8{% endif %}{% if error %} border-danger{% endif %}"
              {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
              {% if disabled %}disabled{% endif %}
              {% if readonly %}readonly{% endif %}
              {% if required %}required{% endif %}
              {% if error %}aria-invalid="true" aria-describedby="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_error"{% elif help_text %}aria-describedby="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_help"{% endif %}
              {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>{{ value|default_if_none:"" }}</textarea>
    {% else %}
    <input id="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}"
           type="{{ type|default:'text' }}"
           name="{{ name }}"
           value="{{ value|default_if_none:'' }}"
           class="c-input w-full{% if prefix %} pl-8{% endif %}{% if suffix %} pr-8{% endif %}{% if error %} border-danger{% endif %}"
           {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
           {% if disabled %}disabled{% endif %}
           {% if readonly %}readonly{% endif %}
           {% if required %}required{% endif %}
           {% if error %}aria-invalid="true" aria-describedby="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_error"{% elif help_text %}aria-describedby="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_help"{% endif %}
           {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
    {% endif %}

    {% if prefix or suffix %}
        {% if suffix %}<span class="absolute right-3 text-subtle text-sm pointer-events-none">{{ suffix }}</span>{% endif %}
    </div>
    {% endif %}

    {% if error %}
    <div id="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_error" role="alert" class="text-xs text-danger mt-1 flex items-center gap-1">
        <svg class="w-3 h-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        <span>{{ error }}</span>
    </div>
    {% elif help_text %}
    <p id="{% if id %}{{ id }}{% else %}id_{{ name }}{% endif %}_help" class="text-xs text-subtle mt-1">{{ help_text }}</p>
    {% endif %}
</div>