{% load displaypage_tags %}
{# Media-browser picker writing a Media id into its hidden field (section-editor.js). Context: field, type (image / video / audio / pdf, or "" for any file), label; optional hint, show_if. #}
{% dp_field_media field as media %}
<div class="editor-form__field dp-media-field{% if field.errors %} dp-field--invalid{% endif %}"{% if show_if %} data-dp-show-if="{{ show_if }}"{% endif %}>
  <label for="{{ field.auto_id }}-choose">{{ label }}{% if hint %} <span class="editor-label-hint">{{ hint }}</span>{% endif %}</label>
  <div class="dp-media-picker dp-media-picker--{{ type|default:'file' }}{% if media %} has-media{% endif %}" data-dp-media-input="{{ field.html_name }}" data-dp-media-type="{{ type|default:'' }}">
    {{ field }}
    <div class="dp-media-picker__preview" data-dp-media-preview aria-live="polite">
      {% if media %}
        {% if media.media_type == 'image' %}<img class="dp-media-picker__thumb" src="{{ media.get_absolute_url }}" alt="">{% endif %}
        <span class="dp-media-picker__name">{{ media|dp_media_label }}{% if media|dp_file_ext %} <small>({{ media|dp_file_ext }})</small>{% endif %}</span>
      {% else %}
        <span class="dp-media-picker__empty">None chosen</span>
      {% endif %}
    </div>
    <span class="dp-media-picker__actions">
      <button type="button" class="button dp-media-picker__choose" id="{{ field.auto_id }}-choose" data-dp-media-choose>{% if type == 'image' %}Choose image{% elif type == 'video' %}Choose video{% elif type == 'audio' %}Choose audio{% elif type == 'pdf' %}Choose PDF{% else %}Choose file{% endif %}</button>
      <button type="button" class="button dp-media-picker__clear" data-dp-media-clear{% if not media %} hidden{% endif %}>Clear</button>
    </span>
  </div>
  {% if field.errors %}<div class="editor-form__errors dp-field__errors" role="alert">{{ field.errors }}</div>{% endif %}
</div>