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

  <div class="collection-item__header">
    <div class="collection-item__name text-muted"
         title="{{ item.get_caption }}">
      {{ item.get_caption }}
    </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">
      <div class="collection-item__checkbox-holder tool-item tool-item--transparent">
        <div class="custom-control user-select-none vCustomCheckbox" data-hook-unload="prevent">
          <input type="checkbox" name="{{ widget.name }}-check" id="item-{{ item.pk }}"
                 class="collection-item__checkbox custom-control-input">
          <label class="custom-control-label" for="item-{{ item.pk }}"></label>
        </div>
      </div>

      <a href="{{ item.get_file_url }}"
         class="collection-item__view-button tool-item tool-item--transparent text-info"
         target="_blank" tabindex="0"
         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 tool-item--transparent 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>
