{% load css_tags %}{% block_css 'enap_designsystem/blocks/wizard.css' %}
{% if page.wizard %}
    <div class="wizard-container">
        {% with steps=page.wizard.steps.all current_step=1 wizard_id=page.wizard.id %}
            <div class="wizard">
                <div class="steps">
                    <div class="line"></div>
                    {% for step in steps %}
                        <div class="step {% if forloop.counter == current_step %}active{% elif forloop.counter < current_step %}completed{% else %}inactive{% endif %}" 
                             data-step="{{ forloop.counter0 }}">
                            {{ forloop.counter }}
                        </div>
                    {% endfor %}
                </div>
                
                {% for step in steps %}
                    <div class="step-text {% if forloop.counter == current_step %}active{% endif %}">
                        <h2 style="font-size: 16px; font-weight: 600; margin-bottom: 5px;" >{{ step.title }}</h2>
                        <p style="font-size: 14px; font-weight: 400;">{{ step.content|safe }}</p>
                        
                        {% if forloop.last %}
                            <button id="finishBtn-{{ wizard_id }}">Finalizar</button>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const steps = document.querySelectorAll('.wizard .step');
        const stepTexts = document.querySelectorAll('.wizard .step-text');
        const finishBtn = document.getElementById('finishBtn-{{ wizard_id }}');

        steps.forEach(step => {
            step.addEventListener('click', () => {
                const stepIndex = step.getAttribute('data-step');
                updateWizard(stepIndex);
            });
        });

        function updateWizard(stepIndex) {
            stepIndex = parseInt(stepIndex);
            steps.forEach((step, index) => {
                step.classList.toggle('active', index === stepIndex);
                step.classList.toggle('inactive', index !== stepIndex);
                step.classList.toggle('completed', index < stepIndex);
                stepTexts[index].classList.toggle('active', index === stepIndex);
            });
        }

        if (finishBtn) {
            finishBtn.addEventListener('click', () => {
                alert('Assistente concluído!');
            });
        }
    });
</script>
        {% endwith %}
    </div>
{% endif %}