{% extends "base.html" %}

{% block title %}Post a New Job - Codingo{% endblock %}

{#
   This template allows authenticated recruiters to create new job postings.  It
   follows the same card‑based design used throughout the platform to ensure
   visual consistency.  All fields are required, and any validation errors
   will be flashed by the corresponding view function.  Upon successful
   submission the recruiter is redirected back to the jobs listing.
#}

{% 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>Post Job</li>
    </ul> -->

    <div class="card">
        <div class="card-header">
            <h2>Post a New Job</h2>
            <p>Fill out the details below to create a new job listing.</p>
        </div>
        <div class="card-body">
            <form method="POST">
                <div class="form-group">
                    <label for="role">Job Title</label>
                    <input type="text" name="role" id="role" class="form-control" required placeholder="e.g. Senior Python Developer">
                </div>
                <div class="form-group">
                    <label for="company">Company</label>
                    <input type="text" name="company" id="company" class="form-control" required placeholder="e.g. TechCorp">
                </div>
                <div class="form-group">
                    <label for="seniority">Seniority</label>
                    <input type="text" name="seniority" id="seniority" class="form-control" required placeholder="e.g. Junior, Mid, Senior">
                </div>
                <div class="form-group">
                    <label for="skills">Required Skills</label>
                    <textarea name="skills" id="skills" class="form-control" rows="3" required placeholder="e.g. Python, Flask, SQL"></textarea>
                </div>
                <div class="form-group">
                    <label for="description">Job Description</label>
                    <textarea name="description" id="description" class="form-control" rows="5" required placeholder="Describe the responsibilities and requirements for this position"></textarea>
                </div>
                <div class="form-group">
                    <label for="num_questions">Number of Interview Questions</label>
                    <input type="number" name="num_questions" id="num_questions" class="form-control" min="1" value="4" required placeholder="e.g. 5">
                    <small style="color: #666; display: block; margin-top: 0.25rem;">Specify how many questions the AI interview should ask (minimum 1).</small>
                </div>
                <div class="application-actions" style="margin-top: 2rem; text-align: center;">
                    <button type="submit" class="btn btn-primary">Post Job</button>
                </div>
            </form>
        </div>
    </div>
</section>

<style>
/* Reuse form styling from other pages for consistency */
.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 %}