{# Form components — every field is a `.field` (studio-redesign.css): label,
   control, optional hint. Buttons use `.btn` variants from tusk-app.css.

   Plain macros render name/value for classic forms and HTMX; the alpine_*
   variants bind to Alpine state with x-model instead.

   Macros: text_input, textarea, select_input, checkbox, toggle, button,
           icon_button, alpine_input, alpine_select, alpine_textarea, form_group
#}

{% macro text_input(name, label="", value="", placeholder="", type="text", required=false, disabled=false, help="") %}
<div class="field">
    {% if label %}<label for="{{ name }}">{{ label }}</label>{% endif %}
    <input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ value }}" placeholder="{{ placeholder }}"
           {% if required %}required{% endif %} {% if disabled %}disabled{% endif %}>
    {% if help %}<span class="hint">{{ help }}</span>{% endif %}
</div>
{% endmacro %}


{% macro textarea(name, label="", value="", placeholder="", rows=4, required=false, disabled=false, mono=false) %}
<div class="field">
    {% if label %}<label for="{{ name }}">{{ label }}</label>{% endif %}
    <textarea id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" rows="{{ rows }}"
              {% if required %}required{% endif %} {% if disabled %}disabled{% endif %}
              class="resize-y {% if mono %}mono{% endif %}">{{ value }}</textarea>
</div>
{% endmacro %}


{% macro select_input(name, options, label="", selected="", required=false, disabled=false) %}
{# options: list of {value, label} dicts or plain strings #}
<div class="field">
    {% if label %}<label for="{{ name }}">{{ label }}</label>{% endif %}
    <select id="{{ name }}" name="{{ name }}" {% if required %}required{% endif %} {% if disabled %}disabled{% endif %}>
        {% for opt in options %}
        {% set opt_value = opt.value if opt.value is defined else opt %}
        {% set opt_label = opt.label if opt.label is defined else opt %}
        <option value="{{ opt_value }}" {% if opt_value == selected %}selected{% endif %}>{{ opt_label }}</option>
        {% endfor %}
    </select>
</div>
{% endmacro %}


{% macro checkbox(name, label, checked=false, disabled=false) %}
<label class="flex items-center gap-2 text-sm cursor-pointer {% if disabled %}opacity-50 cursor-not-allowed{% endif %}">
    <input type="checkbox" name="{{ name }}" class="accent-[var(--brand)]"
           {% if checked %}checked{% endif %} {% if disabled %}disabled{% endif %}>
    <span>{{ label }}</span>
</label>
{% endmacro %}


{% macro toggle(name, label, checked=false, disabled=false) %}
{# On/off switch (`.switch`). The input stays in the form as a normal checkbox. #}
<label class="flex items-center gap-3 text-sm cursor-pointer {% if disabled %}opacity-50 cursor-not-allowed{% endif %}">
    <input type="checkbox" name="{{ name }}" class="sr-only"
           {% if checked %}checked{% endif %} {% if disabled %}disabled{% endif %}>
    <span class="switch" aria-hidden="true"></span>
    <span>{{ label }}</span>
</label>
{% endmacro %}


{% macro button(text, type="button", variant="primary", icon="", disabled=false, size="md", full_width=false) %}
{# variant: primary (ink) | brand (coral) | secondary (outline) | danger | ghost #}
{% set variants = {"primary": "btn-primary", "brand": "btn-brand", "secondary": "", "danger": "btn-danger", "ghost": "btn-ghost"} %}
<button type="{{ type }}" {% if disabled %}disabled{% endif %}
        class="btn {{ variants[variant] | default('') }} {% if size == 'sm' %}btn-sm{% endif %} {% if full_width %}w-full justify-center{% endif %}">
    {% if icon %}<i data-lucide="{{ icon }}"></i>{% endif %}
    {{ text }}
</button>
{% endmacro %}


{% macro icon_button(icon, title="", variant="ghost", size="md", disabled=false) %}
{# Square icon-only button (`.icon-btn`). variant danger tints it red on hover. #}
<button type="button" {% if title %}title="{{ title }}" aria-label="{{ title }}"{% endif %} {% if disabled %}disabled{% endif %}
        class="icon-btn {% if variant == 'danger' %}icon-btn-danger{% endif %} {% if size == 'sm' %}icon-btn-sm{% endif %}">
    <i data-lucide="{{ icon }}"></i>
</button>
{% endmacro %}


{% macro alpine_input(model, label="", type="text", placeholder="", mono=false, help="") %}
{# Input bound to Alpine state: model is the x-model expression (e.g. "form.name"). #}
<div class="field">
    {% if label %}<label>{{ label }}</label>{% endif %}
    <input x-model="{{ model }}" type="{{ type }}" placeholder="{{ placeholder }}" class="{% if mono %}mono{% endif %}">
    {% if help %}<span class="hint">{{ help }}</span>{% endif %}
</div>
{% endmacro %}


{% macro alpine_select(model, options, label="") %}
<div class="field">
    {% if label %}<label>{{ label }}</label>{% endif %}
    <select x-model="{{ model }}">
        {% for opt in options %}
        {% set opt_value = opt.value if opt.value is defined else opt %}
        {% set opt_label = opt.label if opt.label is defined else opt %}
        <option value="{{ opt_value }}">{{ opt_label }}</option>
        {% endfor %}
    </select>
</div>
{% endmacro %}


{% macro alpine_textarea(model, label="", placeholder="", rows=4, mono=false) %}
<div class="field">
    {% if label %}<label>{{ label }}</label>{% endif %}
    <textarea x-model="{{ model }}" placeholder="{{ placeholder }}" rows="{{ rows }}" class="resize-y {% if mono %}mono{% endif %}"></textarea>
</div>
{% endmacro %}


{% macro form_group(label="", help="", error="") %}
{# Wrap a custom control so it lines up with the other fields. Use with {% call %}. #}
<div class="field">
    {% if label %}<label>{{ label }}</label>{% endif %}
    {{ caller() }}
    {% if error %}
    <span class="hint" style="color: var(--red)">{{ error }}</span>
    {% elif help %}
    <span class="hint">{{ help }}</span>
    {% endif %}
</div>
{% endmacro %}