<div class="dam-item"
     draggable="true"
     data-media-id="{{ item.id }}"
     data-media-name="{{ item.name }}"
     data-media-type="{{ item.bundle_label }}"
     data-media-date="{{ item.created_formatted }}"
     data-media-thumbnail="{{ item.thumbnail_url }}"
     data-media-preview="{{ item.preview_url }}"
     data-media-file="{{ item.file_url }}"
     data-media-mime="{{ item.mime_type }}"
     data-media-filesize="{{ item.file_size }}"
     data-media-width="{{ item.image_width }}"
     data-media-height="{{ item.image_height }}"
     data-media-alt="{{ item.alt_text }}"
     data-media-styles="{{ item.image_styles|json_encode }}"
     data-media-edit="{{ item.edit_url }}">
  <label class="dam-item__checkbox">
    <input type="checkbox" class="dam-item__select" data-media-id="{{ item.id }}">
    <span class="dam-item__checkmark"></span>
  </label>
  <div class="dam-item__thumbnail dam-item__preview-btn">
    {% if item.thumbnail_url %}
      <img src="{{ item.thumbnail_url }}" alt="{{ item.name }}" loading="lazy" draggable="false">
    {% else %}
      <div class="dam-item__placeholder">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
          <polyline points="13 2 13 9 20 9"/>
        </svg>
      </div>
    {% endif %}
  </div>
  <div class="dam-item__info">
    <span class="dam-item__name" title="{{ item.name }}">{{ item.name }}</span>
    <span class="dam-item__meta">
      <span class="dam-item__type">{{ item.bundle_label }}{% if item.mime_type %} · <span class="dam-item__mime">{{ item.mime_type|lower }}</span>{% endif %}</span>
    </span>
  </div>
</div>
