<div class="collection-item collection-item--ready collection-item--{% verbatim %}{{ itemType }}{% endverbatim %}"
     style="width: {{ preview_width }}px"
     tabindex="0"
     data-id="{% verbatim %}{{ id }}{% endverbatim %}"
     data-item-type="{% verbatim %}{{ itemType }}{% endverbatim %}"
     data-order="{% verbatim %}{{ order }}{% endverbatim %}">

  <div class="collection-item__header">
    {% block header %}
      <div class="collection-item__caption text-muted" title="{% verbatim %}{{ caption }}{% endverbatim %}">
        {% verbatim %}{{ caption }}{% endverbatim %}
      </div>
      <div>
        <button type="button" class="collection-item__delete-button"
                data-toggle="tooltip" data-placement="top" data-trigger="hover"
                data-html="true" title="{{ _("Delete item") }}">
          <i class="fa fa-fw fa-trash text-danger"></i>
        </button>
      </div>
    {% endblock header %}
  </div>

  <div class="collection-item__preview sortable-handler"
       style="width: {{ preview_width }}px; height: {{ preview_height }}px">
    {% block preview %}
      {% verbatim %}{{{ preview }}}{% endverbatim %}
    {% endblock preview %}
  </div>

  <div class="collection-item__footer">
    {% block footer %}
      <div class="btn-square-group d-flex align-items-center">
        {% block buttons %}
          <div class="collection-item__checkbox-holder btn btn-square btn-sm">
            <div class="custom-control custom-checkbox user-select-none" data-hook-unload="prevent">
              <input type="checkbox" name="{{ widget.name }}-check" id="item-{% verbatim %}{{ id }}{% endverbatim %}"
                     class="collection-item__checkbox custom-control-input">
              <label class="custom-control-label" for="item-{% verbatim %}{{ id }}{% endverbatim %}"></label>
            </div>
          </div>

          <a href="{% verbatim %}{{ url }}{% endverbatim %}"
             class="collection-item__view-button btn btn-square btn-sm btn-square--info"
             target="_blank" tabindex="0"
             data-toggle="tooltip" data-placement="top" data-trigger="hover"
             data-html="true" title="{{ _("Open file") }}">
            <i class="fa fa-fw fa-eye"></i>
          </a>

          <button type="button"
                  class="collection-item__change-button btn btn-square btn-sm btn-square--info"
                  data-toggle="tooltip" data-placement="top" data-trigger="hover"
                  data-html="true" title="{{ _("Edit file") }}">
            <i class="fa fa-fw fa-pencil"></i>
          </button>
        {% endblock buttons %}
      </div>
    {% endblock footer %}
  </div>
</div>

