{% extends "base.html" %}
{% block content %}

<div class="card" style="max-width:600px; margin:0 auto">
    <h2>New Project</h2>
    <p style="color:#94a3b8; font-size:0.85rem; margin-bottom:1rem">
        Upload a manuscript to start a brand-new book. Each project is created in
        its own isolated directory with its own database — nothing is shared with
        the currently-active project.
    </p>

    <form id="new-project-form" enctype="multipart/form-data">
        <label style="display:block; margin-bottom:0.25rem">Manuscript file (.docx, .epub, .txt, .md, .pdf)</label>
        <input type="file" name="file" accept=".docx,.epub,.txt,.md,.pdf" required
               style="width:100%; padding:0.5rem; border:1px solid #1f2937; border-radius:6px; background:#0b1220; color:#e2e8f0"/>

        <label style="display:block; margin:1rem 0 0.25rem">Project name (optional — defaults to the filename)</label>
        <input type="text" name="name" placeholder="My Second Book"
               style="width:100%; padding:0.5rem; border:1px solid #1f2937; border-radius:6px; background:#0b1220; color:#e2e8f0"/>

        <div style="margin-top:1rem; display:flex; gap:0.5rem; align-items:center">
            <button type="submit" class="btn btn-primary">Create Project</button>
            <a href="/projects" style="color:#94a3b8; font-size:0.85rem">Cancel</a>
        </div>
        <p id="new-proj-msg" style="color:#94a3b8; font-size:0.85rem; margin-top:0.75rem"></p>
    </form>
</div>

<script>
(function () {
    const form = document.getElementById('new-project-form');
    const msg = document.getElementById('new-proj-msg');
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        msg.textContent = 'Creating project...';
        try {
            const resp = await fetch('/api/projects', { method: 'POST', body: new FormData(form) });
            const d = await resp.json();
            if (!d.ok) {
                msg.style.color = '#ef4444';
                msg.textContent = d.error || 'Failed to create project.';
                return;
            }
            msg.style.color = '#10b981';
            msg.textContent = d.message || 'Project created.';
            setTimeout(() => { window.location.href = '/'; }, 700);
        } catch (err) {
            msg.style.color = '#ef4444';
            msg.textContent = 'Error: ' + err.message;
        }
    });
})();
</script>

{% endblock %}