{% extends 'base.html' %}
{% load static %}

{% block title %}Edit {{ project.title }} - Packs Site{% endblock %}

{% block content %}
<h1><i class="fas fa-pen"></i> Edit {{ project.title }} <span class="project-id-badge" title="Project ID">#{{ project.pk }}</span></h1>
<p><a href="{% url 'library:project_detail' project.slug %}">&larr; Back to project</a></p>

<form method="post" class="card project-form create-form" id="project-form">
    {% csrf_token %}

    <div class="create-grid">
        <section class="create-panel create-panel-main">
            <h2 class="form-section-title"><i class="fas fa-folder-open"></i> Project</h2>

            <div class="form-group">
                {{ project_form.title.errors }}
                <label for="{{ project_form.title.id_for_label }}">Title</label>
                {{ project_form.title }}
            </div>
            <div class="form-group">
                {{ project_form.summary.errors }}
                <label for="{{ project_form.summary.id_for_label }}">Summary</label>
                {{ project_form.summary }}
            </div>
            <div class="form-group">
                {{ project_form.category.errors }}
                <label for="{{ project_form.category.id_for_label }}">Category</label>
                {{ project_form.category }}
            </div>
            <div class="form-group" id="description-group">
                {{ project_form.description.errors }}
                <label for="{{ project_form.description.id_for_label }}">Description</label>
                {{ project_form.description }}
                <p class="bio-help"><i class="fas fa-info-circle"></i> Supports Markdown — headings, lists, links, code, tables and more. Guides don't use this field.</p>
            </div>
        </section>

        <section class="create-panel">
            <h2 class="form-section-title"><i class="fas fa-image"></i> Thumbnail</h2>
            <div class="upload-zone" data-upload="thumbnail">
                <div class="drop-zone" role="button" tabindex="0">
                    <div class="drop-zone-inner">
                        <i class="fas fa-cloud-upload-alt drop-zone-icon"></i>
                        <p class="drop-zone-text">Drag &amp; drop an image</p>
                        <p class="drop-zone-sub">or click to browse</p>
                    </div>
                </div>
                <input type="file" id="thumb-input" accept="image/*" hidden>
                <div class="upload-preview" id="thumb-preview"></div>
            </div>

            <h2 class="form-section-title" style="margin-top:16px;"><i class="fas fa-tags"></i> Tags</h2>
            <div class="tag-editor">
                <input type="text" id="tag-input" placeholder="Type a tag and press Enter… (e.g. content:threesome, species:dragon)" autocomplete="off">
                <div class="tag-suggestions" id="tag-suggestions" hidden></div>
                <div class="tag-chips" id="tag-chips"></div>
                {{ project_form.tags }}
            </div>
            <p class="bio-help"><i class="fas fa-info-circle"></i> Categories: loader, version, general, creator, content, species, non_version. Unprefixed tags go to General.</p>
        </section>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fas fa-check"></i> Save changes</button>
    </div>
</form>

{% if project.category == 'non_pack' %}
    <div class="card" style="margin-top: 20px;">
        <h2><i class="fas fa-film"></i> Animation Director ID</h2>
        <p class="bio-help">The <code>animationframework.id</code> that applications use to check for updates.</p>
        <form method="post" action="{% url 'library:regenerate_metadata' project.slug %}">
            {% csrf_token %}
            <div class="form-row">
                <div class="form-group">
                    <label for="edit_af_namespace">Namespace</label>
                    <input type="text" id="edit_af_namespace" name="af_namespace" value="{{ anim_edit.namespace }}" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="edit_af_pack_id">Pack ID</label>
                    <input type="text" id="edit_af_pack_id" name="af_pack_id" value="{{ anim_edit.pack_id }}" autocomplete="off">
                </div>
            </div>
            <p class="bio-help">
                Current ID:
                {% if anim_edit.current %}
                    <code>{{ anim_edit.current }}</code>
                {% else %}
                    <em>none</em>
                {% endif %}
                · Full ID: <code id="edit-af-preview">{{ anim_edit.namespace }}:{{ anim_edit.pack_id }}</code>
            </p>
            <div class="form-actions">
                <button type="submit" class="btn btn-secondary"><i class="fas fa-sync"></i> Regenerate metadata</button>
            </div>
        </form>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
{{ pending_uploads|json_script:'packs-pending-uploads' }}
{{ tag_categories|json_script:'packs-tag-categories' }}
<script src="{% static 'js/tags.js' %}"></script>
<script src="{% static 'js/uploads.js' %}"></script>
<script src="{% static 'js/edit.js' %}"></script>
<script>
(function () {
    const cat = document.getElementById('id_category');
    const group = document.getElementById('description-group');
    if (cat && group) {
        function toggle() { group.style.display = cat.value === 'guide' ? 'none' : ''; }
        cat.addEventListener('change', toggle);
        toggle();
    }
    const ns = document.getElementById('edit_af_namespace');
    const pid = document.getElementById('edit_af_pack_id');
    const preview = document.getElementById('edit-af-preview');
    if (ns && pid && preview) {
        function update() { preview.textContent = ns.value + ':' + pid.value; }
        ns.addEventListener('input', update);
        pid.addEventListener('input', update);
    }
})();
</script>
{% endblock %}