{% 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 file</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 pack file</p>
                    <p class="drop-zone-sub">or click to browse</p>
                </div>
            </div>
            <input type="file" id="version-input" hidden>
            <div class="upload-preview" id="version-preview"></div>
        </div>
    </div>

    <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>
{% endblock %}