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

{% block content %}
<div class="container page-content">
    <h1>Add Publication</h1>
    <div id="pubError" class="alert alert-error" style="display:none;"></div>
    <form id="pubForm" enctype="multipart/form-data" class="form-card">
        <div class="form-group">
            <label for="title">Title *</label>
            <input type="text" id="title" name="title" required class="form-control" placeholder="Publication title">
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="publication_type">Type</label>
                <select id="publication_type" name="publication_type" class="form-control">
                    <option value="article">Article</option>
                    <option value="preprint">Preprint</option>
                    <option value="thesis">Thesis</option>
                    <option value="book">Book</option>
                    <option value="conference">Conference Paper</option>
                </select>
            </div>
            <div class="form-group flex-1">
                <label for="field_id">Field</label>
                <select id="field_id" name="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-group">
            <label for="abstract">Abstract</label>
            <textarea id="abstract" name="abstract" rows="5" class="form-control" placeholder="Publication abstract..."></textarea>
        </div>
        <div class="form-group">
            <label for="content">Full Text / Description</label>
            <textarea id="content" name="content" rows="8" class="form-control" placeholder="Full content or detailed description..."></textarea>
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="doi">DOI</label>
                <input type="text" id="doi" name="doi" class="form-control" placeholder="10.xxxx/xxxxx">
            </div>
            <div class="form-group flex-1">
                <label for="journal">Journal / Conference</label>
                <input type="text" id="journal" name="journal" class="form-control" placeholder="Journal name">
            </div>
            <div class="form-group flex-1">
                <label for="year">Year</label>
                <input type="number" id="year" name="year" class="form-control" placeholder="2026">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group flex-1">
                <label for="git_repo_url">Git Repository URL</label>
                <input type="url" id="git_repo_url" name="git_repo_url" class="form-control" placeholder="https://github.com/...">
            </div>
            <div class="form-group flex-1">
                <label for="video_url">Video URL</label>
                <input type="url" id="video_url" name="video_url" class="form-control" placeholder="https://youtube.com/...">
            </div>
        </div>
        <div class="form-group">
            <label for="tags">Tags (comma-separated)</label>
            <input type="text" id="tags" name="tags" class="form-control" placeholder="machine learning, neural networks, NLP">
        </div>
        <div class="form-group">
            <label for="citations">Citations (one per line)</label>
            <textarea id="citations" name="citations" rows="4" class="form-control" placeholder="Author et al. (2025). Title. Journal.&#10;Another citation..."></textarea>
        </div>
        <div class="form-group">
            <label for="files">Attach Files (PDF, Images, etc.)</label>
            <input type="file" id="files" name="files" multiple class="form-control" accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm">
        </div>
        <button type="submit" class="btn btn-primary btn-lg">Publish</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('pubForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const errEl = document.getElementById('pubError');
    errEl.style.display = 'none';

    const form = new FormData(e.target);
    try {
        const res = await fetch('/api/publications', { method: 'POST', body: form });
        if (!res.ok) {
            const data = await res.json();
            errEl.textContent = data.detail || 'Failed to create publication';
            errEl.style.display = 'block';
            return;
        }
        const data = await res.json();
        window.location.href = '/publications/' + data.id;
    } catch(err) {
        errEl.textContent = 'Network error';
        errEl.style.display = 'block';
    }
});
</script>
{% endblock %}