<div
    x-data="{
        current_page: 1,
        total_pages: 0,
        wizard_id: '{% block wizard_id %}{% endblock %}',

        init() {
            this.total_pages = this.$refs.wizard_body.querySelectorAll('.wizard-page').length;
            this.current_page = Math.min(Math.max(this.current_page, 1), this.total_pages);
        },

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

        previous_page() {
            if (this.current_page > 1) {
                this.current_page--;
            }
        }
    }"
>
    <div class="wizard-body my-4" x-ref="wizard_body">
        {% block wizard_pages %}
        {% endblock %}
    </div>

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

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

            {% block wizard_next_button %}
                <template x-if="current_page < total_pages">
                    <button type="button" class="btn btn-app-primary" @click="next_page()">Next</button>
                </template>
            {% endblock %}

            {% block wizard_submit_button %}
                <template x-if="current_page === total_pages">
                    <button type="button" class="btn btn-app-success">Submit</button>
                </template>
            {% endblock %}
        </div>

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