{# Form component — HTMX form submission, Alpine dzWizard for multi-step #}
{% from 'macros/form_field.html' import render_field %}

{% if form %}
<div class="max-w-2xl">
  {# Header #}
  {% block form_header %}
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold">{{ form.title }}</h2>
  </div>
  {% endblock form_header %}

  {# Stepper indicator for multi-section forms #}
  {% if form.sections %}
    {% include 'fragments/form_stepper.html' %}
  {% endif %}

  {# Form #}
  <form data-dazzle-form="{{ form.entity_name }}" data-dazzle-form-mode="{{ form.mode }}"
        {% if form.sections %}x-data="dzWizard({{ form.sections | length }})"{% endif %}
        hx-{{ "put" if form.method == "put" else "post" }}="{{ form.action_url }}"
        hx-target="body"
        hx-swap="innerHTML"
        hx-target-422="#form-errors"
        hx-target-5*="#form-errors"
        hx-headers='{"Content-Type": "application/json"}'
        hx-ext="json-enc"
        class="space-y-4">

    {# Form errors area (swapped by HTMX on validation failure) #}
    <div id="form-errors">
      {% include 'fragments/form_errors.html' %}
    </div>

    {# Fields — sectioned (wizard) or flat #}
    {% block form_fields %}
    {% if form.sections %}
      {% for section in form.sections %}
      <div data-dz-stage="{{ loop.index0 }}"
           x-show="isCurrent({{ loop.index0 }})">
        <h3 class="text-lg font-semibold mb-3">{{ section.title }}</h3>
        {% for field in section.fields %}
          {{ render_field(field, form.initial_values) }}
        {% endfor %}
      </div>
      {% endfor %}
    {% else %}
      {% for field in form.fields %}
        {{ render_field(field, form.initial_values) }}
      {% endfor %}
    {% endif %}
    {% endblock form_fields %}

    {# Actions — wizard nav or standard submit #}
    {% block form_actions %}
    {% if form.sections %}
    <div class="flex gap-3 pt-4">
      <button type="button" class="btn btn-ghost" x-show="step > 0" @click="prev()">
        Back
      </button>
      <button type="button" class="btn btn-primary" x-show="step < total - 1" @click="next()">
        Next
      </button>
      <button type="submit" class="btn btn-primary" x-show="step === total - 1"
              data-dazzle-action="{{ form.entity_name }}.save"
              data-loading-class="loading"
              data-loading-disable>
        {% if form.mode == "edit" %}Save{% else %}Create{% endif %}
      </button>
      <a href="{{ form.cancel_url }}" class="btn btn-ghost">Cancel</a>
    </div>
    {% else %}
    <div class="flex gap-3 pt-4">
      <button type="submit" class="btn btn-primary"
              data-dazzle-action="{{ form.entity_name }}.save"
              data-loading-class="loading"
              data-loading-disable>
        {% if form.mode == "edit" %}Save{% else %}Create{% endif %}
      </button>
      <a href="{{ form.cancel_url }}" class="btn btn-ghost">Cancel</a>
    </div>
    {% endif %}
    {% endblock form_actions %}
  </form>
</div>
{% endif %}
