{% extends "base.html" %}

{% block title %}Apply for {{ job.title }} - Codingo{% endblock %}

{% block hero %}
<section class="hero" style="padding: 3rem 1rem;">
    <div class="container">
        <div class="hero-content">
            <h1>Apply for {{ job.title }}</h1>
            <p>{{ job.company }} • {{ job.location }}</p>
        </div>
    </div>
</section>
{% endblock %}

{% block content %}
<section class="content-section">
    <ul class="breadcrumbs">
        <li><a href="{{ url_for('index') }}">Home</a></li>
        <li><a href="{{ url_for('jobs') }}">Jobs</a></li>
        <li><a href="{{ url_for('job_detail', job_id=job.id) }}">{{ job.title }}</a></li>
        <li>Apply</li>
    </ul>

    <div class="card">
        <div class="card-header">
            <h2>Submit Your Application</h2>
            <p>Please upload your resume (PDF, DOCX). Our system will extract your info automatically.</p>
        </div>

        <div class="card-body">
            <!-- Application Form -->
            <form method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="resume">Upload Resume</label>
                    <input type="file" name="resume" id="resume" class="form-control" required accept=".pdf,.doc,.docx">
                </div>

                <div class="application-actions" style="margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Submit Application</button>
                </div>
            </form>

            <div style="margin-top: 1.5rem; text-align: center;">
                <a href="{{ url_for('job_detail', job_id=job.id) }}" class="btn btn-outline">Back to Job Details</a>
            </div>
        </div>
    </div>
</section>

<style>
.form-group label {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
    display: block;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.application-actions {
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-primary:hover {
    opacity: 0.9;
}
</style>
{% endblock %}