{% extends "wagtailadmin/base.html" %}
{% load wagtailimages_tags i18n compress static %}
{% block titletag %}{% trans "Add multiple images" %}{% endblock %}
{% block bodyclass %}menu-images{% endblock %}
{% block extra_css %}
    {% compress css %}
        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailimages/scss/add-multiple.scss" type="text/x-scss" />
    {% endcompress %}
    {% include "wagtailadmin/shared/tag_field_css.html" %}
{% endblock %}

{% block content %}
    {% trans "Add images" as add_str %}
    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}

    <div class="nice-padding">
        <div class="drop-zone">
            <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
            
            <form action="{% url 'wagtailimages_add_multiple' %}" method="POST" enctype="multipart/form-data">
                <div class="replace-file-input">
                    <button class="bicolor icon icon-plus">{% trans "Or choose from your computer" %}</button>
                    <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages_add_multiple' %}" multiple>
                </div>
                {% csrf_token %}
            </form>
        </div>

        <div id="overall-progress" class="progress progress-secondary">
            <div class="bar" style="width: 0%;">0%</div>
        </div>

        <ul id="upload-list" class="upload-list multiple"></ul>
    </div>

    <script id="upload-list-item" type="text/template">
        <li class="row">
            <div class="left col3">
                <div class="preview">
                    <div class="thumb icon icon-image"></div>
                    <div class="progress">
                        <div class="bar" style="width: 0%;"></div>
                    </div>
                </div>
            </div>
            <div class="right col9">
                <p class="status-msg success">{% trans "Upload successful. Please update this image with a more appropriate title, if necessary. You may also delete the image completely if the upload wasn't required." %}</p>
                <p class="status-msg failure">{% trans "Sorry, upload failed." %}</p>
                <p class="status-msg failure error_messages"></p>
            </div>            
        </li>
    </script>
{% endblock %}

{% block extra_js %}
    {% compress js %}
        <!-- this exact order of plugins is vital -->
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/load-image.min.js"></script>
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/canvas-to-blob.min.js"></script>
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/jquery.iframe-transport.js"></script>
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/jquery.fileupload.js"></script>
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/jquery.fileupload-process.js"></script>
        <script src="{{ STATIC_URL }}wagtailimages/js/vendor/jquery.fileupload-image.js"></script>
        <script src="{{ STATIC_URL }}wagtailadmin/js/vendor/tag-it.js"></script>

        <!-- Main script -->
        <script src="{{ STATIC_URL }}wagtailimages/js/add-multiple.js"></script>
    {% endcompress %}

    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
    <script>
        window.simple_upload_url = "{% url 'wagtailimages_add_image' %}";
        window.tagit_opts = {
            autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
        };
    </script>
{% endblock %}
