backend/templates/apply.html

{% 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>Complete Your Application</h2>
            <p>Upload your resume to auto-fill fields or complete the form manually</p>
        </div>

        <div class="card-body">
            <form id="resumeForm" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="resume">Upload Resume</label>
                    <input type="file" id="resume" name="resume" class="form-control" required>
                </div>
            </form>

            <form method="POST" enctype="multipart/form-data">
                {{ form.hidden_tag() }}
                {{ form.job_id }}

                <div class="form-group">
                    {{ form.name.label }}
                    {{ form.name(class="form-control", id="name", placeholder="Enter your full name") }}
                </div>

                <div class="form-group">
                    {{ form.email.label }}
                    {{ form.email(class="form-control", id="email", placeholder="Enter your email address") }}
                </div>

                <div class="form-group">
                    <label for="phone">Phone Number</label>
                    <input type="text" id="phone" class="form-control" placeholder="Enter your phone number">
                </div>

                <div class="form-group">
                    <label for="skills">Skills</label>
                    <textarea id="skills" class="form-control" placeholder="Skills extracted from your resume..."></textarea>
                </div>

                <div class="form-group">
                    <label for="experience">Previous Experience</label>
                    <textarea id="experience" class="form-control" placeholder="Experience extracted from your resume..."></textarea>
                </div>

                <div class="form-group">
                    {{ form.cover_letter.label }}
                    {{ form.cover_letter(class="form-control", placeholder="Enter your cover letter here...") }}
                </div>

                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem;">
                    <a href="{{ url_for('job_detail', job_id=job.id) }}" class="btn btn-outline">Cancel</a>
                    {{ form.submit(class="btn btn-primary") }}
                </div>
            </form>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#resume").on("change", function () {
            var formData = new FormData();
            formData.append("resume", $("#resume")[0].files[0]);
            
            $.ajax({
                url: "{{ url_for('parse_resume') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $("#name").val(data.name);
                    $("#email").val(data.email);
                    $("#phone").val(data.mobile_number);
                    $("#skills").val(data.skills.join(", "));
                    $("#experience").val(data.experience.join("\n"));
                },
                error: function () {
                    alert("Error parsing the resume. Please try again.");
                }
            });
        });
    });
</script>
{% endblock %}