<div
    x-data="{
        current_page: $persist(1).using(sessionStorage).as(generate_id()),
        total_pages: {% block total_pages %}{% endblock %},
        form: $persist({}).using(sessionStorage).as(generate_id()),

        initialize_persistence() {
            Array.from(this.$refs['wizard-form'].elements).forEach((element) => {
                if (element.name) {
                    this.form[element.name] = this.form[element.name] || element.value;
                }
            });
        },

        clear_persistence() {
            this.current_page = 1;
            this.form = {};
        },

        next_page() {
            if (this.current_page < this.total_pages) {
                this.current_page++;
            }
        },

        previous_page() {
            if (this.current_page > 1) {
                this.current_page--;
            }
        },

        submit_wizard() {
            this.clear_persistence();
            this.$refs['wizard-form'].submit();
        }
    }"
    x-init="
        current_page = Math.min(Math.max(current_page, 1), total_pages);
        initialize_persistence();
    "
>
    <div class="wizard-body my-4">
        <form id="wizard-form" x-ref="wizard-form" method="POST" action="{% block action %}{% endblock %}">
            {% csrf_token %}

            {% block pages %}
            {% endblock %}
        </form>
    </div>

    {% block pagination %}
        <div class="wizard-footer d-flex justify-content-between align-items-center pt-4">
            <button type="button" class="btn btn-secondary" @click="previous_page()" :disabled="current_page === 1">
                Back
            </button>

            <div class="page-indicator no-select text-muted">
                {% block page_indicator %}
                    Page <span x-text="current_page"></span> of <span x-text="total_pages"></span>
                {% endblock %}
            </div>

            <template x-if="current_page < total_pages">
                <button type="button" class="btn btn-primary" @click="next_page()">Next</button>
            </template>

            <template x-if="current_page === total_pages">
                <button type="button" class="btn btn-success" @click="submit_wizard()">Submit</button>
            </template>
        </div>

        {% block progress_bar %}
            <div class="progress my-2" style="height: 5px;">
                <div
                    class="progress-bar"
                    :style="{ width: (current_page / total_pages * 100) + '%' }"
                ></div>
            </div>
        {% endblock %}
    {% endblock %}
</div>
