{% extends "base.html" %}
{% block title %}Post a Job — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="container page-content">
    <h1>Post a Research Job</h1>
    <div id="jobError" class="alert alert-error" style="display:none;"></div>
    <form id="jobForm" class="form-card">
        <div class="form-group">
            <label for="title">Job Title *</label>
            <input type="text" id="title" required class="form-control" placeholder="e.g. Postdoctoral Researcher in Machine Learning">
        </div>
        <div class="form-group">
            <label for="description">Description *</label>
            <textarea id="description" required rows="8" class="form-control" placeholder="Job description, requirements, responsibilities..."></textarea>
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="institution">Institution *</label>
                <input type="text" id="institution" required class="form-control" placeholder="MIT, Stanford, etc.">
            </div>
            <div class="form-group flex-1">
                <label for="location">Location</label>
                <input type="text" id="location" class="form-control" placeholder="City, Country">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="job_type">Type</label>
                <select id="job_type" class="form-control">
                    <option value="full-time">Full-Time</option>
                    <option value="part-time">Part-Time</option>
                    <option value="postdoc">Postdoc</option>
                    <option value="phd">PhD Position</option>
                    <option value="internship">Internship</option>
                </select>
            </div>
            <div class="form-group flex-1">
                <label for="field_id">Field</label>
                <select id="field_id" class="form-control">
                    <option value="">Select field...</option>
                    {% for field in fields %}
                    <option value="{{ field.id }}">{{ field.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="salary_range">Salary Range</label>
                <input type="text" id="salary_range" class="form-control" placeholder="$60,000 - $80,000">
            </div>
            <div class="form-group flex-1">
                <label for="deadline">Application Deadline</label>
                <input type="date" id="deadline" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="application_url">Application URL</label>
            <input type="url" id="application_url" class="form-control" placeholder="https://...">
        </div>
        <button type="submit" class="btn btn-primary btn-lg">Post Job</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('jobForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const errEl = document.getElementById('jobError');
    errEl.style.display = 'none';
    const fieldId = document.getElementById('field_id').value;
    const deadline = document.getElementById('deadline').value;

    try {
        const res = await fetch('/api/jobs', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                title: document.getElementById('title').value,
                description: document.getElementById('description').value,
                institution: document.getElementById('institution').value,
                location: document.getElementById('location').value || null,
                job_type: document.getElementById('job_type').value,
                salary_range: document.getElementById('salary_range').value || null,
                application_url: document.getElementById('application_url').value || null,
                deadline: deadline ? deadline + 'T00:00:00' : null,
                field_id: fieldId ? parseInt(fieldId) : null,
            }),
        });
        if (!res.ok) {
            const data = await res.json();
            errEl.textContent = data.detail || 'Failed';
            errEl.style.display = 'block';
            return;
        }
        const data = await res.json();
        window.location.href = '/jobs/' + data.id;
    } catch(err) {
        errEl.textContent = 'Network error';
        errEl.style.display = 'block';
    }
});
</script>
{% endblock %}