{% 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.

  Context:
    step_items, current_step, prev_step, is_first, is_final
    step_title, step_description
    informational  — no form, just a Next/Start button
    optional       — show a "Skip" button
    form           — None for informational steps
{% endcomment %}
{% include "conjunto/wizard/_stepper.html" %}

{% if step_title %}<h2 class="mb-1">{{ step_title }}</h2>{% endif %}
{% if step_description %}<p class="text-secondary">{{ step_description }}</p>{% endif %}

{% if informational %}
  <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 }}"
        class="wizard-step-form">
    {% csrf_token %}
    <div class="d-flex justify-content-between mt-3">
      <div>
        {% if prev_step %}
          <a href="{{ prev_step_url }}"
             hx-get="{{ prev_step_url }}"
             hx-target="#wizard-body"
             hx-swap="innerHTML"
             hx-push-url="{{ prev_step_url }}"
             class="btn btn-ghost-secondary">
            <i class="ti ti-arrow-left"></i> {% translate "Back" %}
          </a>
        {% endif %}
      </div>
      <div>
        <button type="submit" name="_action" value="next" class="btn btn-primary">
          {% if is_first %}{% translate "Start" %}{% else %}{% translate "Next" %}{% endif %}
          <i class="ti ti-arrow-right"></i>
        </button>
      </div>
    </div>
  </form>
{% else %}
  <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>
        {% comment %}
          Back is navigation, not a form submission — so it isn't the first
          submit button, which means Enter in a field triggers the primary
          action (Next/Finish) as expected. It re-renders the previous step
          via HTMX (href is the no-JS fallback).
        {% endcomment %}
        {% if prev_step %}
          <a href="{{ prev_step_url }}"
             hx-get="{{ prev_step_url }}"
             hx-target="#wizard-body"
             hx-swap="innerHTML"
             hx-push-url="{{ prev_step_url }}"
             class="btn btn-ghost-secondary">
            <i class="ti ti-arrow-left"></i> {% translate "Back" %}
          </a>
        {% endif %}
      </div>
      {# Primary button is first in DOM (so it's the Enter default); Skip is #}
      {# rendered to its left via flex `order`. #}
      <div class="d-flex gap-2">
        {% if is_final %}
          <button type="submit" name="_action" value="finish" class="btn btn-primary order-2">
            <i class="ti ti-check"></i> {% translate "Finish" %}
          </button>
        {% else %}
          <button type="submit" name="_action" value="next" class="btn btn-primary order-2">
            {% translate "Next" %} <i class="ti ti-arrow-right"></i>
          </button>
        {% endif %}
        {% if optional %}
          <button type="submit" name="_action" value="skip" class="btn btn-ghost-secondary order-1">
            {% translate "Skip" %}
          </button>
        {% endif %}
      </div>
    </div>
  </form>
{% endif %}