{% 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">Abstract Submission</h1>
            <p class="text-muted fs-5">Upload your abstract document for review.</p>
        </div>

        <form method="post" action="{% url 'abstract' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="b-card 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;">description</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Document Upload</h4>
                        </div>
                        
                        {% if abstract.file %}
                            <div class="alert mb-4" style="background: rgba(106,142,97,0.1); border: 1px solid var(--highlight-sage); color: var(--text-main);">
                                <div class="d-flex align-items-center">
                                    <span class="material-icons text-success me-2">check_circle</span>
                                    <span>Current file: <strong>{{ abstract.file.name|slice:"10:" }}</strong></span>
                                </div>
                            </div>
                        {% endif %}
                        
                        <div class="form-dark-theme">
                            {{ form|crispy }}
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end mt-5 mb-5 fade-in-up" style="animation-delay: 0.1s;">
                        <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>
                </div>
            </div>
        </form>
    </main>
</div>
{% endblock %}