{% comment %}
    Include template for bulkfileupload fields.

    Template context variables:

        hiddenfieldname (required)
            Name of the hidden field used to submit the collection ID.
        singlemode (optional)
            If this is ``True``, we only allow a single file to be added to
            the collection.
        accept (optional)
{% endcomment %}
{% load i18n %}
{% load cradmin_icon_tags %}

<div django-cradmin-bulkfileupload-overlay-controls
     class="django-cradmin-bulkfileupload-overlay-controls">
    <div django-cradmin-bulkfileupload-hide-overlay="{{ hiddenfieldname }}"
            class="django-cradmin-bulkfileupload-backdrop"></div>

    <button type="button"
            django-cradmin-bulkfileupload-hide-overlay="{{ hiddenfieldname }}"
            class="btn btn-link django-cradmin-bulkfileupload-hide-overlay-button"
            aria-label="{% trans 'close file upload window' %}">
        <span class="{% cradmin_icon 'x' %}"
              aria-hidden="true"
              title="{% trans 'close file upload window' %}"></span>
    </button>
    <div django-cradmin-bulkfileupload-overlay-uploadingmessage
            class="django-cradmin-bulkfileupload-overlay-uploadingmessage">
        <p class="django-cradmin-bulkfileupload-overlay-uploadingmessage-text">
            {% if overlaymode_autosubmit_uploading_message %}
                {{ overlaymode_autosubmit_uploading_message }}
            {% else %}
                {% if singlemode %}
                    {% trans "We are uploading your file. Please do not close the browser window." %}
                {% else %}
                    {% trans "We are uploading your files. Please do not close the browser window." %}
                {% endif %}
            {% endif %}
        </p>
    </div>
</div>


<div django-cradmin-bulkfileupload={{ angularjs_directive_options|safe }} {# NOTE: The missing quotes are correct - they are added by quoteattr #}
        class="django-cradmin-bulkfileupload">

    <div class="django-cradmin-bulkfileupload-content">

        <div django-cradmin-bulkfileupload-progress></div>
        <div django-cradmin-bulkfileupload-rejected-files={{ rejected_files_errormessage_map|safe }}></div>

        <div django-cradmin-bulkfileupload-advanced-widget>
            {% block droparea-advanced %}
                <div ng-file-drop
                        ng-model="cradminLastFilesSelectedByUser"
                        multiple="{% if singlemode %}false{% else %}true{% endif %}"
                        {% if accept %}
                            accept="{{ accept }}"
                        {% endif %}
                        allow-dir="false"
                        class="django-cradmin-bulkfileupload-dropbox"
                        ng-file-change="filesDropped($files, $event, $rejectedFiles)"
                        drag-over-class="{
                            accept:'django-cradmin-bulkfileupload-dropbox-dragover',
                            reject:'django-cradmin-bulkfileupload-dropbox-dragover-error',
                            delay:100}">
                    {% block droparea-advanced-content %}
                        <div class="django-cradmin-bulkfileupload-dropbox-text">
                            {% block django-cradmin-bulkfileupload-dropbox-text %}
                                <p>
                                    {% if dropbox_text %}
                                        {{ dropbox_text }}
                                    {% else %}
                                        {% if singlemode %}
                                            {% trans "Upload a file by dragging and dropping it here" %}
                                        {% else %}
                                            {% trans "Upload files by dragging and dropping them here" %}
                                        {% endif %}
                                    {% endif %}
                                </p>
                            {% endblock django-cradmin-bulkfileupload-dropbox-text %}
                            {% block fileselectbutton-advanced %}
                                <p class="django-cradmin-bulkfileupload-advanced-fileselectbutton-wrapper">
                                    <button ng-file-select
                                            type="button"
                                            ng-model="cradminLastFilesSelectedByUser"
                                            multiple="{% if singlemode %}false{% else %}true{% endif %}"
                                            {% if accept %}
                                                accept="{{ accept }}"
                                            {% endif %}
                                            class="btn-link django-cradmin-bulkfileupload-advanced-fileselectbutton">
                                        {% block fileselectbutton-advanced-content %}
                                            {% if advanced_fileselectbutton_text %}
                                                {{ advanced_fileselectbutton_text }}
                                            {% else %}
                                                {% if singlemode %}
                                                    {% trans "... or select a file" %}
                                                {% else %}
                                                    {% trans "... or select files" %}
                                                {% endif %}
                                            {% endif %}
                                        {% endblock fileselectbutton-advanced-content %}
                                    </button>
                                </p>
                            {% endblock fileselectbutton-advanced %}

                        </div>
                        <div class="django-cradmin-bulkfileupload-dropbox-invalid-filetype-errormessage">
                            {% block droparea-advanced-content-invalid-filetype-errormessage %}
                                {% if invalid_filetype_message %}
                                    {{ invalid_filetype_message }}
                                {% else %}
                                    {% trans "Invalid filetype" %}
                                {% endif %}
                            {% endblock droparea-advanced-content-invalid-filetype-errormessage %}
                        </div>
                    {% endblock droparea-advanced-content %}
                </div>
            {% endblock droparea-advanced %}
        </div>

        <div django-cradmin-bulkfileupload-simple-widget>
            {% block fileselectbutton-simple %}
                <p class="django-cradmin-bulkfileupload-simple-button-wrapper">
                    <button ng-file-select
                            type="button"
                            ng-model="cradminLastFilesSelectedByUser"
                            multiple="{% if singlemode %}false{% else %}true{% endif %}"
                            class="btn btn-default btn-block django-cradmin-bulkfileupload-simple-button">
                        {% block fileselectbutton-simple-content %}
                            {% if simple_fileselectbutton_text %}
                                {{ simple_fileselectbutton_text }}
                            {% else %}
                                {% if singlemode %}
                                    {% trans "Select a file ..." %}
                                {% else %}
                                    {% trans "Select files ..." %}
                                {% endif %}
                            {% endif %}
                        {% endblock fileselectbutton-simple-content %}
                    </button>
                </p>
            {% endblock fileselectbutton-simple %}
        </div>

        <input type="hidden" name="{{ hiddenfieldname }}" django-cradmin-bulkfileupload-collectionid-field>
    </div>
</div>
