{% load i18n %}

<div id="wizard-root" class="space-y-4" x-data="{ wizardSubmitting: false }">
    <form
        method="post"
        enctype="multipart/form-data"
        hx-post="{{ request.path }}?{{ wizard_step_query_param }}={{ step_index }}"
        hx-encoding="multipart/form-data"
        hx-target="#wizard-root"
        hx-swap="outerHTML"
        class="space-y-4"
        x-on:htmx:before-request="wizardSubmitting = true"
        x-on:htmx:after-request="wizardSubmitting = false"
        x-on:htmx:response-error="wizardSubmitting = false"
    >
        {% csrf_token %}

        <div class="border-gray-200 ">
            <div class="grid grid-cols-1 md:grid-cols-3 items-center gap-3">
                <div class="justify-self-start">
                <c-ui.text.subtitle>{{ step_title }}</c-ui.text.subtitle>
                {% if step_description %}
                    <c-ui.text.muted>{{ step_description }}</c-ui.text.muted>
                {% endif %}
                </div>

                <div class="justify-self-center self-center">
                    <c-ui.text.muted>
                        {{ step_index|add:1 }} / {{ wizard_total_steps }}
                    </c-ui.text.muted>
                </div>

                <div class="justify-self-start md:justify-self-end flex items-center gap-2">
                    {% if wizard_has_data %}
                    <button 
                        class="btn btn-sm btn-danger"
                        hx-target="#wizard-root"
                        hx-swap="outerHTML"
                        hx-get="{{ request.path }}?reset_wizard=true"
                        >
                        <c-blocktrans>Reset</c-blocktrans>
                    </button>
                    {% endif %}
                    {% if step_index > 0 %}
                        <button
                            type="submit"
                            name="_wizard_action"
                            value="back"
                            class="btn btn-sm btn-secondary"
                            x-bind:disabled="wizardSubmitting"
                            x-bind:class="{ 'opacity-60 cursor-not-allowed': wizardSubmitting }"
                        >
                            {% trans "Back" %}
                        </button>
                    {% endif %}

                    <button
                        type="submit"
                        name="_wizard_action"
                        value="next"
                        class="btn btn-sm btn-primary"
                        x-bind:disabled="wizardSubmitting"
                        x-bind:class="{ 'opacity-60 cursor-not-allowed': wizardSubmitting }"
                    >
                        <span x-show="!wizardSubmitting">
                            {{ wizard_submit_label|default:_("Continue") }}
                        </span>
                        <span x-show="wizardSubmitting" class="inline-flex items-center gap-2">
                            <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                            {% trans "Processing..." %}
                        </span>
                    </button>
                </div>
            </div>
        </div>

        {% if wizard_error %}
            <div class="alert alert-danger">
                {% if wizard_error.title %}
                    <p class="font-medium">{{ wizard_error.title }}</p>
                {% endif %}
                <p class="text-sm">{{ wizard_error.message }}</p>
            </div>
        {% endif %}

        <div class="">
            {% if step_template_name %}
                {% include step_template_name %}
            {% endif %}
        </div>
    </form>
</div>