{# Macro form_field
   Uso:
     {% from "core/components/form_field.html" import field %}
     {{ field("slug", label="Slug", required=true, hint="Solo minúsculas") }}
     {{ field("objetivo", label="Objetivo", type="textarea", rows=3) }}
     {{ field("stack", label="Stack", type="select", options=[
         {"value": "next", "label": "Next.js"},
         {"value": "fastapi", "label": "FastAPI"},
     ]) }}
#}

{% macro field(
  name,
  label="",
  type="text",
  value="",
  placeholder="",
  required=false,
  disabled=false,
  readonly=false,
  hint="",
  error="",
  pattern="",
  minlength="",
  maxlength="",
  rows=3,
  options=[],
  extra_attrs="",
  extra_class="",
  autocomplete=""
) %}
{%- set _field_id = "field-" ~ name -%}
{%- set _hint_id = "hint-" ~ name if hint else "" -%}
{%- set _err_id = "err-" ~ name if error else "" -%}
{%- set _desc = (_hint_id ~ " " ~ _err_id) | trim -%}
<div class="flex flex-col gap-1 {{ extra_class }}">
  {%- if label %}
  <label for="{{ _field_id }}" class="form-label">
    {{ label }}
    {%- if required %}<span class="text-semantic-danger ml-0.5" aria-hidden="true">*</span>{% endif %}
  </label>
  {%- endif %}

  {%- if type == "textarea" %}
  <textarea id="{{ _field_id }}"
            name="{{ name }}"
            rows="{{ rows }}"
            {% if required %}required{% endif %}
            {% if disabled %}disabled{% endif %}
            {% if readonly %}readonly{% endif %}
            {% if minlength %}minlength="{{ minlength }}"{% endif %}
            {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
            placeholder="{{ placeholder }}"
            class="form-input resize-none {% if error %}form-input-invalid{% endif %}"
            {% if _desc %}aria-describedby="{{ _desc }}"{% endif %}
            {% if error %}aria-invalid="true"{% endif %}
            {{ extra_attrs | safe }}>{{ value }}</textarea>

  {%- elif type == "select" %}
  <select id="{{ _field_id }}"
          name="{{ name }}"
          {% if required %}required{% endif %}
          {% if disabled %}disabled{% endif %}
          class="form-input {% if error %}form-input-invalid{% endif %}"
          {% if _desc %}aria-describedby="{{ _desc }}"{% endif %}
          {% if error %}aria-invalid="true"{% endif %}
          {{ extra_attrs | safe }}>
    {%- for opt in options %}
    <option value="{{ opt.value }}" {% if opt.value == value %}selected{% endif %}>{{ opt.label }}</option>
    {%- endfor %}
  </select>

  {%- else %}
  <input id="{{ _field_id }}"
         name="{{ name }}"
         type="{{ type }}"
         value="{{ value }}"
         placeholder="{{ placeholder }}"
         {% if required %}required{% endif %}
         {% if disabled %}disabled{% endif %}
         {% if readonly %}readonly{% endif %}
         {% if pattern %}pattern="{{ pattern }}"{% endif %}
         {% if minlength %}minlength="{{ minlength }}"{% endif %}
         {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
         {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
         class="form-input {% if type == 'text' and name == 'slug' %}form-input-mono{% endif %} {% if error %}form-input-invalid{% endif %}"
         {% if _desc %}aria-describedby="{{ _desc }}"{% endif %}
         {% if error %}aria-invalid="true"{% endif %}
         {{ extra_attrs | safe }} />
  {%- endif %}

  {%- if hint and not error %}
  <p id="{{ _hint_id }}" class="form-hint">{{ hint }}</p>
  {%- endif %}
  {%- if error %}
  <p id="{{ _err_id }}" class="form-error" role="alert">{{ error }}</p>
  {%- endif %}
</div>
{%- endmacro %}