{% extends 'base.html' %}
{% load static django_bootstrap5 %}

{% block content %}
<div class="container py-5">
    <div class="card shadow-lg">
        <div class="card-header bg-success text-white text-center py-3">
            <h4 class="mb-0">Application Form
            </h4>
        </div>

        <div class="card-body">
            <!-- Progress Bar -->
            <div class="progress mb-4" style="height: 10px;">
                {% for i in '1234'|make_list %}
                    <div class="progress-bar {% if i|add:0 <= current_step %}bg-success{% else %}bg-secondary{% endif %}" 
                         style="width: 25%;"></div>
                {% endfor %}
            </div>

            <h4 class="text-center mb-4">{{ step_title }} — Step {{ current_step }} of {{ total_steps }}</h4>

            <form id="wizard-form" 
                  hx-post="{% url 'core:scholarship_wizard' current_step application.id %}" 
                  hx-swap="outerHTML"
                  class="needs-validation" novalidate>

                {% csrf_token %}
                {% bootstrap_form form layout='floating' %}

                <div class="d-flex justify-content-between mt-5">
                    <!-- Previous Button -->
                    {% if current_step > 1 %}
                        <a href="{% url 'core:scholarship_wizard' current_step|add:"-1" application.id %}" 
                           class="btn btn-outline-secondary btn-lg">
                            ← Previous
                        </a>
                    {% else %}
                        <div></div>
                    {% endif %}

                    <!-- Next / Submit Button -->
                    <button type="submit" class="btn btn-success btn-lg">
                        {% if current_step == total_steps %}
                            Submit Application
                        {% else %}
                            Save & Continue →
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}