{% load displaypage_tags %}
{# Several images in order, written as comma-separated Media ids into the hidden field (section-editor.js). Context: field, label; optional hint, show_if. #}
{% dp_field_media_list field as images %}
<div class="editor-form__field dp-media-field"{% if show_if %} data-dp-show-if="{{ show_if }}"{% endif %}>
  <label for="{{ field.auto_id }}-add">{{ label }}{% if hint %} <span class="editor-label-hint">{{ hint }}</span>{% endif %}</label>
  <div class="dp-gallery-picker" data-dp-gallery-input="{{ field.html_name }}">
    {{ field }}
    <ul class="dp-gallery-picker__list" data-dp-gallery-list>
      {% for image in images %}
      <li class="dp-gallery-picker__item" data-dp-media-id="{{ image.pk }}">
        <img src="{{ image.get_absolute_url }}" alt="{{ image|dp_media_label }}">
        <span class="dp-gallery-picker__tools">
          <button type="button" class="dp-gallery-picker__tool" data-dp-gallery-move="up" aria-label="Move earlier" title="Move earlier">&larr;</button>
          <button type="button" class="dp-gallery-picker__tool" data-dp-gallery-move="down" aria-label="Move later" title="Move later">&rarr;</button>
          <button type="button" class="dp-gallery-picker__tool" data-dp-gallery-remove aria-label="Remove image" title="Remove">&times;</button>
        </span>
      </li>
      {% endfor %}
    </ul>
    <p class="dp-gallery-picker__empty" data-dp-gallery-empty{% if images %} hidden{% endif %}>No images yet.</p>
    <span class="dp-media-picker__actions">
      <button type="button" class="button" id="{{ field.auto_id }}-add" data-dp-gallery-add>Add image</button>
      <button type="button" class="button" data-dp-gallery-clear{% if not images %} hidden{% endif %}>Remove all</button>
    </span>
  </div>
</div>