{% extends "wagtail_multiple_chooser_block/bulk_upload/base.html" %}
{% load i18n l10n wagtailadmin_tags %}
{% comment %}The contents of wagtailimages/multiple/add.html, without the success and description messages, as uploads have no edit form here{% endcomment %}

{% block bulk_upload %}
    <div
        class="drop-zone w-mt-8"
        data-controller="w-zone"
        data-action="dragover@document->w-zone#noop:prevent drop@document->w-zone#noop:prevent dragover->w-zone#activate drop->w-zone#deactivate dragleave->w-zone#deactivate dragend->w-zone#deactivate"
        data-w-zone-active-class="hovered"
        data-w-zone-delay-value="10"
    >
        <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
        <p>{{ bulk_upload.help_text }}</p>

        <form action="{{ bulk_upload_url }}" method="POST" enctype="multipart/form-data">
            <div class="replace-file-input">
                <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
                <input
                    id="fileupload"
                    multiple
                    accept="{{ bulk_upload.accept_attributes }}"
                    name="files[]"
                    type="file"
                    data-accept-file-types="/\.({{ bulk_upload.allowed_extensions|join:'|' }})$/i"
                    data-max-file-size="{{ bulk_upload.max_filesize|stringformat:'s'|default:'null' }}"
                    data-max-title-length="{{ bulk_upload.max_title_length|stringformat:'s'|default:'null' }}"
                    data-messages='{"maxFileSize": "{{ bulk_upload.error_max_file_size|escapejs }}", "acceptFileTypes": "{{ bulk_upload.error_accepted_file_types|escapejs }}"}'
                    data-url="{{ bulk_upload_url }}"
                >
            </div>
            {% csrf_token %}
            {% if bulk_upload.collections %}
                {% trans "Add to collection:" as label_text %}
                {% rawformattedfield label_text=label_text id_for_label="id_addimage_collection" classname="w-mx-auto w-mt-4 w-grid w-justify-center" %}
                    <select id="id_addimage_collection" name="collection">
                        {% for pk, display_name in bulk_upload.collections.get_indented_choices %}
                            <option value="{{ pk|unlocalize }}"{% if pk|unlocalize == bulk_upload.selected_collection_id %} selected{% endif %}>
                                {{ display_name }}
                            </option>
                        {% endfor %}
                    </select>
                {% endrawformattedfield %}
            {% endif %}
        </form>
    </div>

    <div id="overall-progress" class="progress progress-secondary">
        <div class="bar w-w-0">0%</div>
    </div>

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

    <template id="upload-list-item">
        <li class="row">
            <div class="left col3">
                <div class="preview">
                    <div class="thumb">
                        {% icon name="image" %}
                    </div>
                    <div class="progress">
                        <div class="bar w-w-0"></div>
                    </div>
                </div>
            </div>
            <div class="right col9">
                <p class="status-msg warning">
                    {% trans "Upload successful. However, your new image seems to be a duplicate of this existing image. You may delete it if it wasn't required." %}
                </p>
                <p class="status-msg failure">{% trans "Sorry, upload failed." %}</p>
                <p class="status-msg server-error">
                    <strong>{% trans "Server Error" %}</strong>
                    {% trans "Report this error to your website administrator with the following information:" %}
                    <br><span class="error-text"></span> - <span class="error-code"></span>
                </p>
                <p class="status-msg failure error_messages"></p>
            </div>
        </li>
    </template>
{% endblock %}

{% block scripts %}
    <script src="{% versioned_static 'wagtailimages/js/vendor/load-image.min.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.iframe-transport.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.fileupload.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.fileupload-process.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/vendor/jquery.fileupload-image.js' %}"></script>
    <script src="{% versioned_static fileupload_validate_js %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/tag-it.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/add-multiple.js' %}"></script>
{% endblock %}