{% extends 'admin/shell.html.twig' %}
{% set nav = 'media' %}
{% block title %}Mediathek{% endblock %}
{% block scripts %}<script type="module" src="/assets/media-drop.js?v={{ kant_version() }}"></script><script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script>{% endblock %}
{% block heading %}Mediathek{% endblock %}
{% block lead %}Alle Bilder, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus.{% endblock %}
{% block content %}

{% if is_granted('ROLE_EDITOR') %}
<form action="{{ path('admin_media_upload') }}" method="post" enctype="multipart/form-data" class="card card-body">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
    <input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
    <input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
    {# A drop area rather than the browser's file widget. The input stays a real file input and
       stays focusable, so the form works by keyboard and without JavaScript; the script only adds
       dragging and the list of chosen files. No "required": the input is visually hidden, and a
       browser cannot show its validation bubble on something invisible. The server refuses an
       empty upload with a readable message instead. #}
    <div class="dropzone" data-dropzone>
        <label class="dropzone-label" for="files">
            <span class="dropzone-icon" aria-hidden="true">▩</span>
            <strong>Bilder hierher ziehen</strong>
            <span class="dropzone-hint">oder klicken, um Dateien zu wählen</span>
        </label>
        <input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp" multiple class="dropzone-input">
    </div>
    <p class="dropzone-chosen" data-chosen role="status">Noch keine Datei gewählt.</p>
    <p class="field-help">JPEG, PNG oder WebP, höchstens 8 MB je Bild. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen.</p>
    <button class="primary" type="submit">Hochladen</button>
</form>
{% endif %}

<form method="get" action="{{ path('admin_media') }}" class="list-toolbar" role="search" data-live-search>
    <div class="list-search"><label for="media-list-search">Bilder durchsuchen</label><input id="media-list-search" type="search" name="q" maxlength="160" value="{{ query }}" placeholder="Titel oder Alternativtext …"></div>
    <div><label for="media-list-archive">Status</label><select id="media-list-archive" name="archiv" data-search-default="0"><option value="0"{{ not archived ? ' selected' : '' }}>Aktive Bilder</option><option value="1"{{ archived ? ' selected' : '' }}>Mit archivierten Bildern</option></select></div>
    <button class="secondary search-submit" type="submit">Anwenden</button>
    <a class="text-button" data-search-reset href="{{ path('admin_media') }}"{{ not query and not archived ? ' hidden' : '' }}>Zurücksetzen</a>
</form>
{% include 'admin/search-feedback.html.twig' %}
<div id="list-results" class="stack" role="region" aria-label="Suchergebnisse" tabindex="-1">{% include 'admin/media-results.html.twig' %}</div>
{% endblock %}