<div class="collection dropzone {% if not widget.value %}collection--empty{% endif %}"
     data-create-collection-url="{{ create_collection_url }}"
     data-delete-collection-url="{{ delete_collection_url }}"
     data-upload-item-url="{{ upload_item_url }}"
     data-change-item-url="{{ change_item_url }}"
     data-delete-item-url="{{ delete_item_url }}"
     data-sort-items-url="{{ sort_items_url }}"
     data-paper-owner-app-label="{{ owner_app_label }}"
     data-paper-owner-model-name="{{ owner_model_name }}"
     data-paper-owner-fieldname="{{ owner_fieldname }}"
     data-paper-collection-content-type="{{ content_type.pk }}"
     data-configuration='{{ configuration|safe }}'>

  <input type="hidden" class="collection__input"
         name="{{ widget.name }}"
         value="{{ widget.value|default:'' }}"
         {% include "django/forms/widgets/attrs.html" %}/>

  <div class="collection__items">
    {% if widget.value %}
      {% for item in instance.get_items %}
        {% include item.template_name %}
      {% endfor %}
    {% endif %}
  </div>

  <button type="button" class="collection__create-button btn btn-success" {% if widget.value %}hidden{% endif %}
          data-toggle="tooltip" data-placement="top" data-trigger="hover"
          data-html="true" title="{{ _('Create collection') }}">
    <i class="fa fa-fw fa-plus"></i>
    {{ _('Create collection') }}
  </button>

  <button type="button" class="collection__upload-button btn btn-success" {% if not widget.value %}hidden{% endif %}
          data-toggle="tooltip" data-placement="top" data-trigger="hover"
          data-html="true" title="{{ _('Select files') }}">
    <i class="fa fa-fw fa-folder-open"></i>
    {{ _('Select files') }}
  </button>

  <button type="button" class="collection__delete-button btn btn-danger" {% if not widget.value %}hidden{% endif %}
          data-toggle="tooltip" data-placement="top" data-trigger="hover"
          data-html="true" title="{{ _('Delete collection') }}">
    <i class="fa fa-fw fa-trash"></i>
    {{ _('Delete collection') }}
  </button>

  <div class="collection__help-text">
    <small class="text-muted">
      <kbd class="collection__kbd">Ctrl+Click</kbd> to select multiple items.
      <kbd class="collection__kbd">Double-click</kbd> to open item
    </small>
  </div>

  {% if limitations %}
    <div class="image-uploader__limitations small text-muted mt-2">
      <span>{{ _('Please consider the following limitations') }}:</span>
      <ul class="pl-3 mb-0">
        {% for label, limits in limitations %}
          <li>{{ label }}: <em>{{ limits }}</em></li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="dropzone-overlay">
    <div class="dropzone-hint">
      <i class="fa fa-fw fa-upload"></i>
      {{ _('Drop files here to send') }}
    </div>
  </div>

  <template class="collection__preloader-item-template">
    {% include 'paper_uploads/collection_item/preloader.html' %}
  </template>

  {% for name, field in collection_cls.item_types.items %}
    <template class="collection__{{ name }}-item-template">
      {% include field.model.template_name %}
    </template>
  {% endfor %}
</div>
