{% extends "base.html" %}
{% block title %}Jobs — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="container page-content">
    <div class="page-header-row">
        <h1>Research Jobs</h1>
        {% if user %}
        <a href="/jobs/new" class="btn btn-primary">Post a Job</a>
        {% endif %}
    </div>

    <div class="filter-bar">
        <input type="text" id="searchQ" placeholder="Search jobs..." class="form-control filter-input">
        <select id="filterField" class="form-control filter-select">
            <option value="">All Fields</option>
            {% for field in fields %}
            <option value="{{ field.id }}">{{ field.name }}</option>
            {% endfor %}
        </select>
        <select id="filterType" class="form-control filter-select">
            <option value="">All Types</option>
            <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>
        <input type="text" id="filterLocation" placeholder="Location..." class="form-control filter-input-sm">
        <button class="btn btn-outline" onclick="loadJobs()">Filter</button>
    </div>

    <div id="jobResults" class="job-list"></div>
    <div id="jobPagination" class="pagination"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
async function loadJobs(page = 1) {
    const params = new URLSearchParams();
    const q = document.getElementById('searchQ').value;
    const fieldId = document.getElementById('filterField').value;
    const jobType = document.getElementById('filterType').value;
    const location = document.getElementById('filterLocation').value;
    if (q) params.set('q', q);
    if (fieldId) params.set('field_id', fieldId);
    if (jobType) params.set('job_type', jobType);
    if (location) params.set('location', location);
    params.set('page', page);

    const res = await fetch('/api/jobs?' + params.toString());
    const data = await res.json();
    const container = document.getElementById('jobResults');

    if (data.results.length === 0) {
        container.innerHTML = '<p class="empty-state">No jobs found.</p>';
    } else {
        container.innerHTML = data.results.map(j => `
            <div class="job-card">
                <div class="job-card-main">
                    <h3><a href="/jobs/${j.id}">${escapeHtml(j.title)}</a></h3>
                    <div class="job-meta">
                        <span class="job-institution">🏛️ ${escapeHtml(j.institution)}</span>
                        ${j.location ? `<span class="job-location">📍 ${escapeHtml(j.location)}</span>` : ''}
                        <span class="job-type-badge">${j.job_type}</span>
                        ${j.field ? `<span style="color:${j.field.color}">${j.field.name}</span>` : ''}
                    </div>
                    ${j.salary_range ? `<div class="job-salary">💰 ${escapeHtml(j.salary_range)}</div>` : ''}
                </div>
                <div class="job-card-side">
                    <div class="job-posted">Posted ${new Date(j.created_at).toLocaleDateString()}</div>
                    ${j.deadline ? `<div class="job-deadline">Deadline: ${new Date(j.deadline).toLocaleDateString()}</div>` : ''}
                </div>
            </div>
        `).join('');
    }

    const totalPages = Math.ceil(data.total / data.per_page);
    const pagEl = document.getElementById('jobPagination');
    if (totalPages > 1) {
        let html = '';
        for (let i = 1; i <= totalPages; i++) {
            html += `<button class="page-btn ${i === page ? 'active' : ''}" onclick="loadJobs(${i})">${i}</button>`;
        }
        pagEl.innerHTML = html;
    } else { pagEl.innerHTML = ''; }
}
loadJobs();
</script>
{% endblock %}