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

{% block title %}New Version - {{ project.title }}{% endblock %}

{% block content %}
<h1><i class="fas fa-upload"></i> New version — {{ project.title }}</h1>
<p><a href="{% url 'library:project_detail' project.slug %}">&larr; Back to project</a></p>

<form method="post" class="card project-form" id="version-form">
    {% csrf_token %}
    {% if version_form.non_field_errors %}
        <div class="form-group">
            <ul class="messages">
                {% for error in version_form.non_field_errors %}<li class="error">{{ error }}</li>{% endfor %}
            </ul>
        </div>
    {% endif %}

    <div class="form-group">
        {{ version_form.version_name.errors }}
        <label for="{{ version_form.version_name.id_for_label }}">{{ version_form.version_name.label }}</label>
        {{ version_form.version_name }}
    </div>

    <div class="form-group">
        <label>Version files</label>
        <div class="upload-zone" data-upload="version">
            <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 the version files</p>
                    <p class="drop-zone-sub">or click to browse — several at once</p>
                </div>
            </div>
            <input type="file" id="version-input" multiple hidden>
            <div class="file-preview-grid" id="version-preview"></div>
        </div>
    </div>

    {% if anim_meta.show_fields %}
        <div class="form-group">
            <label>Animation Director ID</label>
            <p class="anim-warning"><i class="fas fa-exclamation-triangle"></i> This pack has no <code>animationframework.id</code>. One will be added to the downloadable pack so applications can check for updates.</p>
            <div class="form-row">
                <div class="form-group">
                    <label for="af_namespace">Namespace</label>
                    <input type="text" id="af_namespace" name="af_namespace" value="{{ anim_meta.namespace }}" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="af_pack_id">Pack ID</label>
                    <input type="text" id="af_pack_id" name="af_pack_id" value="{{ anim_meta.pack_id }}" autocomplete="off">
                </div>
            </div>
            <p class="bio-help">Full ID: <code id="af-preview">{{ anim_meta.namespace }}:{{ anim_meta.pack_id }}</code></p>
        </div>
    {% endif %}

    {% if anim_meta.show_confirm %}
        <div class="form-group">
            <label>
                <input type="checkbox" name="confirm_replace_identity" value="1">
                Replace pack identity (the uploaded pack has a different <code>animationframework.id</code> than this project)
            </label>
        </div>
    {% endif %}

    <div class="form-group">
        {{ version_form.changelog.errors }}
        <label for="{{ version_form.changelog.id_for_label }}">{{ version_form.changelog.label }}</label>
        {{ version_form.changelog }}
        <p class="bio-help"><i class="fas fa-info-circle"></i> Supports Markdown.</p>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> Upload version</button>
    </div>
</form>
{% endblock %}

{% block extra_js %}
{{ pending_uploads|json_script:'packs-pending-uploads' }}
<script src="{% static 'js/uploads.js' %}"></script>
<script src="{% static 'js/version_upload.js' %}"></script>
{% if anim_meta.show_fields %}
<script>
(function () {
    const ns = document.getElementById('af_namespace');
    const pid = document.getElementById('af_pack_id');
    const preview = document.getElementById('af-preview');
    if (!ns || !pid || !preview) return;
    function update() { preview.textContent = ns.value + ':' + pid.value; }
    ns.addEventListener('input', update);
    pid.addEventListener('input', update);
})();
</script>
{% endif %}
{% endblock %}