{% load i18n displaypage_tags %}
{# One GalleryItem. Context: item, section, counter, total. #}
{% dp_link item.link_url as item_href %}
{% with image_url=item.image.get_absolute_url caption=item.caption alt=item.caption|default:item.image.title %}
<figure class="dp-gallery__item">
  {% if item_href %}
  <a class="dp-gallery__frame dp-gallery__frame--link" href="{{ item_href }}">
  {% else %}
  <a class="dp-gallery__frame" href="{{ image_url }}" data-dp-lightbox="gallery-{{ section.pk }}"{% if caption %} data-dp-caption="{{ caption }}"{% endif %}{% if item.file %} data-dp-download="{{ item.file.get_absolute_url }}" data-dp-download-label="{% translate 'Download' %} {{ item.file|dp_file_ext }}"{% endif %}>
  {% endif %}
    <img class="dp-gallery__image" src="{{ image_url }}" alt="{% if alt %}{{ alt }}{% else %}{% translate 'Image' %} {{ counter }} / {{ total }}{% endif %}" loading="lazy">
    {% if item_href %}<span class="dp-gallery__badge" aria-hidden="true"><svg class="dp-icon" viewBox="0 0 24 24" focusable="false"><path d="M14 5h5v5M19 5l-8 8M18 14v5H5V6h5"/></svg></span>{% endif %}
  </a>
  {% if section.show_captions and caption or item.file %}
  <figcaption class="dp-gallery__caption">
    {% if section.show_captions and caption %}<span class="dp-gallery__caption-text">{{ caption }}</span>{% endif %}
    {% if item.file %}<a class="dp-file-link" href="{{ item.file.get_absolute_url }}" download><svg class="dp-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14"/></svg>{% translate 'Download' %} {{ item.file|dp_file_ext }}<span class="dp-visually-hidden">: {{ caption|default:item.file|dp_media_label }}</span></a>{% endif %}
  </figcaption>
  {% endif %}
</figure>
{% endwith %}