{% extends "base.html" %}

{% block title %}Complete Your Profile | Warwick Connect{% endblock %}

{% block extra_css %}
<style>
    .profile-card {
        max-width: 650px;
        margin: 2rem auto;
        padding: 3rem;
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    
    .form-label {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border-radius: 12px;
        padding: 0.75rem 1rem;
        border: 1px solid #E2E8F0;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--warwick-navy);
        box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.1);
    }

    .profile-title {
        font-weight: 800;
        font-size: 2.25rem;
        margin-bottom: 0.5rem;
        color: var(--warwick-navy);
    }

    .profile-subtitle {
        color: var(--text-muted);
        margin-bottom: 2.5rem;
    }

    .btn-submit {
        margin-top: 2rem;
        padding: 1rem;
        font-weight: 700;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--text-dark);
        border-bottom: 2px solid var(--bg-light);
        padding-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-card">
    <h1 class="profile-title">Complete Your Profile</h1>
    <p class="profile-subtitle">Tell other students about yourself to find better connections.</p>
    
    <form method="post" novalidate>
        {% csrf_token %}
        
        <div class="row g-4">
            <div class="col-md-12">
                <h3 class="section-title">Academic & Location</h3>
            </div>
            
            <div class="col-md-6">
                <label for="{{ form.course.id_for_label }}" class="form-label">Course</label>
                {{ form.course }}
            </div>
            
            <div class="col-md-6">
                <label for="{{ form.year.id_for_label }}" class="form-label">Year of Study</label>
                {{ form.year }}
            </div>
            
            <div class="col-md-6">
                <label for="{{ form.location.id_for_label }}" class="form-label">Location</label>
                {{ form.location }}
            </div>
            
            <div class="col-md-6">
                <label for="{{ form.looking_for.id_for_label }}" class="form-label">Looking For</label>
                {{ form.looking_for }}
            </div>
            
            <div class="col-md-12 mt-4">
                <h3 class="section-title">About You</h3>
            </div>
            
            <div class="col-md-12">
                <label for="{{ form.bio.id_for_label }}" class="form-label">Bio (Optional)</label>
                {{ form.bio }}
            </div>
        </div>
        
        <button type="submit" class="btn btn-primary btn-submit w-100 mt-5">Save and Discover Students</button>
    </form>
</div>
{% endblock %}