{% extends "public_base.html" %}
{% load static %}

{% block title %}Application Submitted{% endblock %}

{% block content %}
<div class="auth-wrapper">
    <div class="auth-card text-center" style="max-width: 600px;">
        <div class="mb-3">
            <i class="fa-solid fa-circle-check" style="font-size: 4rem; color: #28a745;"></i>
        </div>
        <h2 class="auth-title">Application Submitted!</h2>
        <p class="text-muted mb-4">
            Thank you, <strong>{{ application.full_name }}</strong>!
            Your application has been received and is currently under review.
            We have sent a confirmation email to <strong>{{ application.email }}</strong>.
        </p>

        <div class="reference-box mb-4">
            <p class="text-muted small mb-1">Your Reference Number</p>
            <h3 class="reference-number">{{ application.reference_number }}</h3>
            <p class="text-muted small">Save this number to track your application status.</p>
        </div>

        <div class="row text-start mb-4 g-3">
            <div class="col-sm-6">
                <div class="info-chip">
                    <i class="fa-solid fa-graduation-cap"></i>
                    <div>
                        <small class="text-muted">Program Applied</small>
                        <div class="fw-semibold">{{ application.program_applied }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="info-chip">
                    <i class="fa-solid fa-clock"></i>
                    <div>
                        <small class="text-muted">Status</small>
                        <div class="fw-semibold">
                            <span class="badge {{ application.get_status_badge_class }}">
                                {{ application.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2 justify-content-center flex-wrap">
            <a href="{% url 'admissions:application_status' %}" class="btn btn-primary">
                <i class="fa-solid fa-magnifying-glass me-1"></i> Track My Application
            </a>
            <a href="https://mlsfoundationug.org" class="btn btn-outline-secondary">
                Back to Website
            </a>
        </div>
    </div>
</div>
{% endblock %}