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

{% block content %}
<div class="field-hero" style="border-top: 6px solid {{ field.color }}">
    <div class="container">
        <span class="field-hero-icon">{{ field.icon or '📚' }}</span>
        <h1>{{ field.name }}</h1>
        {% if field.description %}
        <p>{{ field.description }}</p>
        {% endif %}
    </div>
</div>

<div class="container page-content">
    <div class="field-tabs">
        <button class="tab-btn active" onclick="showFieldTab('pubs')">Publications</button>
        <button class="tab-btn" onclick="showFieldTab('questions')">Questions</button>
        <button class="tab-btn" onclick="showFieldTab('jobs')">Jobs</button>
    </div>

    <div id="ftab-pubs" class="tab-content">
        <div id="fieldPubs"></div>
    </div>
    <div id="ftab-questions" class="tab-content" style="display:none;">
        <div id="fieldQuestions"></div>
    </div>
    <div id="ftab-jobs" class="tab-content" style="display:none;">
        <div id="fieldJobs"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const fieldId = {{ field.id }};

function showFieldTab(tab) {
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
    document.getElementById('ftab-' + tab).style.display = 'block';
    event.target.classList.add('active');
}

async function loadFieldData() {
    const pubRes = await fetch(`/api/publications?field_id=${fieldId}`);
    const pubData = await pubRes.json();
    document.getElementById('fieldPubs').innerHTML = pubData.results.length
        ? pubData.results.map(p => `
            <div class="pub-list-item">
                <div class="pub-list-type">${p.publication_type}</div>
                <div class="pub-list-content">
                    <h3><a href="/publications/${p.id}">${escapeHtml(p.title)}</a></h3>
                    <div class="pub-list-meta">
                        <span>${p.author ? p.author.full_name : ''}</span>
                        <span>${p.year || ''}</span>
                    </div>
                </div>
            </div>
        `).join('')
        : '<p class="empty-state">No publications in this field yet.</p>';

    const qRes = await fetch(`/api/questions?field_id=${fieldId}`);
    const qData = await qRes.json();
    document.getElementById('fieldQuestions').innerHTML = qData.results.length
        ? qData.results.map(q => `
            <div class="question-card">
                <div class="q-votes"><span class="q-vote-count">${q.vote_count}</span><span class="q-vote-label">votes</span></div>
                <div class="q-answers ${q.answer_count > 0 ? 'has-answers' : ''}"><span class="q-answer-count">${q.answer_count}</span><span class="q-answer-label">answers</span></div>
                <div class="q-content"><h3><a href="/questions/${q.id}">${escapeHtml(q.title)}</a></h3></div>
            </div>
        `).join('')
        : '<p class="empty-state">No questions in this field yet.</p>';

    const jRes = await fetch(`/api/jobs?field_id=${fieldId}`);
    const jData = await jRes.json();
    document.getElementById('fieldJobs').innerHTML = jData.results.length
        ? jData.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>🏛️ ${escapeHtml(j.institution)}</span>
                        ${j.location ? `<span>📍 ${escapeHtml(j.location)}</span>` : ''}
                        <span class="job-type-badge">${j.job_type}</span>
                    </div>
                </div>
            </div>
        `).join('')
        : '<p class="empty-state">No jobs in this field yet.</p>';
}
loadFieldData();
</script>
{% endblock %}