{% extends "library/base.html" %}

{% block title %}Add Paper | clrnoise{% endblock %}

{% block content %}
<section class="view-header">
    <p class="eyebrow">New paper</p>
    <h1>Capture a structured reference</h1>
    <p class="lede">Fill in the fields manually, or enter a PDF path and click the <span class="ai-fill-hint-icon" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg></span> icon on any field to fill it with AI.</p>
</section>

<form method="post" class="editor-layout" data-paper-form data-prefill-url="{% url 'library:paper-ai-prefill' %}">
    {% csrf_token %}

    <section class="panel panel--wide">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Paper details</p>
                <h2>Core record</h2>
            </div>
        </div>

        {% if form.non_field_errors %}
            <div class="error-box">{{ form.non_field_errors }}</div>
        {% endif %}

        <div class="form-grid">
            {% for field in form %}
                <div class="field {% if field.name == 'summary' or field.name == 'what_they_did' or field.name == 'methodology_and_findings' %}field--full{% endif %}">
                    <div class="field-label-row">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {% if field.name != 'source_pdf_path' %}
                            <button type="button" class="ai-fill-btn" data-ai-fill-field="{{ field.name }}" title="Fill from PDF with AI" aria-label="Fill {{ field.label }} with AI">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
                            </button>
                        {% endif %}
                    </div>
                    {{ field }}
                    {% if field.help_text %}
                        <p class="help-text">{{ field.help_text }}</p>
                    {% endif %}
                    {% for error in field.errors %}
                        <p class="error-text">{{ error }}</p>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="panel">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Contributors</p>
                <h2>Authors and affiliations</h2>
            </div>
            <div class="section-heading__actions">
                <button class="ai-fill-btn ai-fill-btn--labeled" type="button" data-ai-fill-authors title="Fill authors from PDF with AI">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
                    Fill from PDF
                </button>
                <button class="button button--ghost" type="button" data-add-author>Add author</button>
            </div>
        </div>

        {{ formset.management_form }}
        {% if formset.non_form_errors %}
            <div class="error-box">{{ formset.non_form_errors }}</div>
        {% endif %}

        <div class="author-form-list" id="author-form-list">
            {% for author_form in formset %}
                <div class="author-form" data-author-form>
                    {{ author_form.id }}
                    <div class="field">
                        <label for="{{ author_form.name.id_for_label }}">{{ author_form.name.label }}</label>
                        {{ author_form.name }}
                        {% for error in author_form.name.errors %}
                            <p class="error-text">{{ error }}</p>
                        {% endfor %}
                    </div>
                    <div class="field">
                        <label for="{{ author_form.affiliation.id_for_label }}">{{ author_form.affiliation.label }}</label>
                        {{ author_form.affiliation }}
                        {% for error in author_form.affiliation.errors %}
                            <p class="error-text">{{ error }}</p>
                        {% endfor %}
                    </div>
                    <div class="field field--hidden">
                        {{ author_form.DELETE }}
                    </div>
                    <button class="button button--ghost button--small" type="button" data-remove-author>Remove</button>
                </div>
            {% endfor %}
        </div>

        <template id="empty-author-form-template">
            <div class="author-form" data-author-form>
                {{ formset.empty_form.id }}
                <div class="field">
                    <label for="{{ formset.empty_form.name.id_for_label }}">{{ formset.empty_form.name.label }}</label>
                    {{ formset.empty_form.name }}
                </div>
                <div class="field">
                    <label for="{{ formset.empty_form.affiliation.id_for_label }}">{{ formset.empty_form.affiliation.label }}</label>
                    {{ formset.empty_form.affiliation }}
                </div>
                <div class="field field--hidden">
                    {{ formset.empty_form.DELETE }}
                </div>
                <button class="button button--ghost button--small" type="button" data-remove-author>Remove</button>
            </div>
        </template>
    </section>

    <div class="form-actions">
        <a class="button button--ghost" href="{% url 'library:paper-list' %}">Cancel</a>
        <button class="button" type="submit">Save paper</button>
    </div>
</form>
{% endblock %}