<div class="collection__item collection-item collection-item--cloudinary-image"
     style="width: {{ preview_width }}px"
     tabindex="-1"
     data-pk="{% if item %}{{ item.pk }}{% endif %}"
     data-item-type="{% if item %}{{ item.item_type }}{% endif %}">

  <div class="collection-item__header">
    <div class="collection-item__name text-muted"
         title="{% if item %}{{ item.get_caption }}{% endif %}">
      {% if item %}{{ item.get_caption }}{% endif %}
    </div>
    <div>
      <button type="button" class="collection-item__delete-button text-danger"
              data-toggle="tooltip" data-placement="top" data-trigger="hover"
              data-html="true" title="{{ _('Delete item') }}">
        <i class="fa fa-fw fa-trash"></i>
      </button>
    </div>
  </div>

  <div class="collection-item__preview sortable-handler" style="width: {{ preview_width }}px; height: {{ preview_height }}px">
    {{ item.render_preview }}
  </div>

  <div class="collection-item__footer">
    <div class="tool-items d-flex align-items-center">
      <label class="collection-item__checkbox-holder tool-item">
        <input type="checkbox" name="{{ widget.name }}-check" class="collection-item__checkbox">
      </label>

      <a href="{% if item %}{{ item.get_file_url }}{% endif %}" class="collection-item__view-button tool-item text-info"
         target="_blank"
         data-toggle="tooltip" data-placement="top" data-trigger="hover"
         data-html="true" title="{{ _('View file') }}">
        <i class="fa fa-fw fa-eye"></i>
      </a>

      <button type="button" class="collection-item__edit-button tool-item text-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>
    </div>
  </div>
</div>
