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

{% block content %}
<div class="container page-content">
    <div id="jobDetail"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const jobId = {{ job_id }};
const currentUserId = {{ user.id if user else 'null' }};

async function loadJob() {
    const res = await fetch(`/api/jobs/${jobId}`);
    if (!res.ok) { document.getElementById('jobDetail').innerHTML = '<h2>Job not found</h2>'; return; }
    const j = await res.json();
    document.title = j.title + ' — {{ settings.APP_NAME }}';

    document.getElementById('jobDetail').innerHTML = `
        <div class="job-detail">
            <div class="job-detail-header">
                <span class="job-type-badge">${j.job_type}</span>
                ${j.field ? `<span class="pub-field-badge" style="background:${j.field.color}">${j.field.name}</span>` : ''}
            </div>
            <h1>${escapeHtml(j.title)}</h1>

            <div class="job-detail-meta">
                <div class="job-info-item">🏛️ <strong>${escapeHtml(j.institution)}</strong></div>
                ${j.location ? `<div class="job-info-item">📍 ${escapeHtml(j.location)}</div>` : ''}
                ${j.salary_range ? `<div class="job-info-item">💰 ${escapeHtml(j.salary_range)}</div>` : ''}
                ${j.deadline ? `<div class="job-info-item">⏰ Deadline: ${new Date(j.deadline).toLocaleDateString()}</div>` : ''}
                <div class="job-info-item">📅 Posted: ${new Date(j.created_at).toLocaleDateString()}</div>
            </div>

            <div class="job-posted-by">
                <span>Posted by:</span>
                <a href="/profile/${j.posted_by.id}" class="author-name">
                    ${escapeHtml(j.posted_by.full_name)}
                    ${j.posted_by.is_verified ? '<span class="verified-badge">✓</span>' : ''}
                </a>
                ${j.posted_by.affiliation ? `<span class="author-affiliation">${escapeHtml(j.posted_by.affiliation.designation)}, ${escapeHtml(j.posted_by.affiliation.institution)}</span>` : ''}
            </div>

            <div class="job-description">
                <h2>Description</h2>
                <div class="job-desc-text">${escapeHtml(j.description).replace(/\\n/g, '<br>')}</div>
            </div>

            <div class="job-actions">
                ${j.application_url ? `<a href="${escapeHtml(j.application_url)}" target="_blank" rel="noopener" class="btn btn-primary btn-lg">Apply Now</a>` : ''}
                ${currentUserId && currentUserId !== j.posted_by.id ? `<button class="btn btn-outline btn-lg" onclick="applyJob()">Apply Through ${escapeHtml('{{ settings.APP_NAME }}')}</button>` : ''}
            </div>
        </div>
    `;
}

async function applyJob() {
    const coverLetter = prompt('Cover letter (optional):');
    const res = await fetch(`/api/jobs/${jobId}/apply`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ cover_letter: coverLetter }),
    });
    if (res.ok) alert('Application submitted!');
    else {
        const data = await res.json();
        alert(data.detail || 'Failed to apply');
    }
}

loadJob();
</script>
{% endblock %}