{% load i18n crispy_forms_tags %}
{% comment %}
  Step form partial. HTMX swaps this whole block into #wizard-body.
  The stepper is re-included at the top so visited/active states update
  in lock-step with the form below.
{% endcomment %}
{% include "conjunto/wizard/_stepper.html" %}

<form method="post"
      action="{{ wizard_step_url }}"
      hx-post="{{ wizard_step_url }}"
      hx-target="#wizard-body"
      hx-swap="innerHTML"
      hx-push-url="{{ wizard_step_url }}"
      enctype="multipart/form-data"
      class="wizard-step-form"
      novalidate>
  {% csrf_token %}

  {% if form.non_field_errors %}
    <div class="alert alert-danger">{{ form.non_field_errors }}</div>
  {% endif %}

  {{ form|crispy }}

  <div class="d-flex justify-content-between mt-3">
    <div>
      {% if prev_step %}
        <button type="submit" name="_action" value="prev" class="btn btn-ghost-secondary">
          <i class="ti ti-arrow-left"></i> {% translate "Back" %}
        </button>
      {% endif %}
    </div>
    <div>
      {% if is_final %}
        <button type="submit" name="_action" value="finish" class="btn btn-primary">
          <i class="ti ti-check"></i> {% translate "Finish" %}
        </button>
      {% else %}
        <button type="submit" name="_action" value="next" class="btn btn-primary">
          {% translate "Next" %} <i class="ti ti-arrow-right"></i>
        </button>
      {% endif %}
    </div>
  </div>
</form>