backend/templates/apply.html

{% extends "base.html" %}

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

{% block hero %}
<section class="hero" style="padding: 3rem 1rem;">
    <div class="container">
        <div class="hero-content">
            <h1>Apply for {{ job.role }}</h1>
            <p>{{ job.company }}{% if job.seniority %} • {{ job.seniority }}{% endif %}</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.role }}</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). Your file will be saved securely for recruiters to review.</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>
                    <!-- Resume upload remains mandatory. The file will be stored for recruiter review but is no longer parsed automatically. -->
                    <input type="file" name="resume" id="resume" class="form-control" required accept=".pdf,.doc,.docx">
                </div>

                <!--
                    Collect the candidate's skills, experience and education manually.
                    These fields allow applicants to highlight their background even when resume
                    parsing is disabled. Entries can be separated by commas, semicolons or newlines;
                    the backend will normalise them into lists.
                -->
                <div class="form-group">
                    <label for="skills">Skills</label>
                    <textarea name="skills" id="skills" class="form-control" rows="3" placeholder="e.g. Python, Data Analysis, Project Management" required></textarea>
                </div>
                <div class="form-group">
                    <label for="experience">Experience</label>
                    <textarea name="experience" id="experience" class="form-control" rows="3" placeholder="e.g. 3 years at TechCorp as a Backend Developer" required></textarea>
                </div>
                <div class="form-group">
                    <label for="education">Education</label>
                    <textarea name="education" id="education" class="form-control" rows="3" placeholder="e.g. B.Sc. in Computer Science, M.Sc. in Data Science" required></textarea>
                </div>

                <!-- Interview guidelines displayed directly above the submit button.  These
                     instructions help applicants prepare for the AI interview.  They are
                     intentionally placed within the form so that they appear close to
                     the submit action, ensuring visibility without disrupting the flow
                     of the application fields. -->
                <div class="interview-guidelines" style="background-color: #f8f9fa; border-left: 4px solid var(--primary); padding: 1rem; margin-top: 1.5rem; border-radius: 6px;">
                    <h3 style="margin-top: 0; color: var(--primary); margin-bottom: 0.75rem;">Important Interview Guidelines</h3>
                    <ul style="margin-left: 1rem; padding-left: 1rem; list-style-type: disc; line-height: 1.5;">
                        <li>The interview can be taken only once, so please be prepared.</li>
                        <li>Make sure you are in a quiet environment with a stable internet connection.</li>
                        <li>This is not a final job interview, but it helps the company shortlist the most relevant candidates.</li>
                        <li>The interview is customized based on your CV and the job requirements.</li>
                        <li>It takes 10 to 15 minutes and includes both general and skill-based questions.</li>
                    </ul>
                </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 %}