{# Ein Bild aus der Mediathek als Formularfeld: Vorschau, Wählen oder Hochladen im Dialog,
   Entfernen. Die Kennung steht nur im versteckten Feld - niemand soll sie abtippen müssen.
   Erwartet: id, name, label, value, help (optional). #}
{% set item = value ? kant_media(value) : null %}
<div class="media-field" data-media-field role="group" aria-labelledby="{{ id }}-label">
    <span class="media-field-label" id="{{ id }}-label">{{ label }}</span>
    <input type="hidden" id="{{ id }}" name="{{ name }}" value="{{ value }}">
    <div class="media-field-current">
        <img class="media-field-thumb" alt="" width="96" height="64"{% if item %} src="{{ (item.variants|first).src }}"{% else %} hidden{% endif %}>
        <span class="media-field-name" aria-live="polite">{{ item ? item.title : (value ? 'Bild nicht gefunden' : 'Kein Bild gewählt') }}</span>
    </div>
    <div class="media-field-actions">
        <button type="button" class="secondary" data-media-choose>{{ value ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen' }}</button>
        <button type="button" class="text-button danger-text" data-media-remove{{ value ? '' : ' hidden' }}>Entfernen</button>
    </div>
    {% if help|default('') %}<p class="field-help">{{ help }}</p>{% endif %}
</div>