{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container py-5 mt-4" style="min-height: calc(100vh - 80px);">
    
    {% include 'dashboard/_wizard_nav.html' %}

    <main class="col-12 mt-2">
        <div class="text-center mb-5 fade-in-up">
            <h1 class="serif-heading display-5 text-white mb-2">Complete Your Profile</h1>
            <p class="text-muted fs-5">Please provide your personal and academic details.</p>
        </div>

        <form method="post" action="{% url 'my_profile' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row g-4">
                <!-- Personal Info Card -->
                <div class="col-lg-6">
                    <div class="b-card h-100 fade-in-up">
                        <div class="d-flex align-items-center mb-4 pb-3 border-bottom" style="border-color: rgba(255,255,255,0.05) !important;">
                            <span class="material-icons me-3" style="color: var(--primary-gold); font-size: 28px;">badge</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Personal Information</h4>
                        </div>
                        <div class="form-dark-theme">
                            {{ personal_form|crispy }}
                        </div>
                    </div>
                </div>

                <!-- Academic Info Card -->
                <div class="col-lg-6">
                    <div class="b-card h-100 fade-in-up" style="animation-delay: 0.1s;">
                        <div class="d-flex align-items-center mb-4 pb-3 border-bottom" style="border-color: rgba(255,255,255,0.05) !important;">
                            <span class="material-icons me-3" style="color: var(--highlight-sage); font-size: 28px;">account_balance</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Academic Details</h4>
                        </div>
                        <div class="form-dark-theme">
                            {{ academic_form|crispy }}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="d-flex justify-content-end mt-5 mb-5 fade-in-up" style="animation-delay: 0.2s;">
                <button type="submit" class="btn b-btn-primary px-3 px-md-5 py-3 shadow-lg d-flex align-items-center rounded-pill">
                    <span class="fw-bold me-2">Save & Continue</span>
                    <span class="material-icons">arrow_forward</span>
                </button>
            </div>
        </form>
    </main>
</div>
{% endblock %}