{% extends 'admin/base_admin.html.twig' %}
{% block title %}Médiathèque{% endblock %}
{% block breadcrumb %}Médiathèque{% endblock %}
{% block content %}
    <div class="head-row">
        <div>
            <h1 class="page-title" style="font-size:26px">Médiathèque</h1>
            <p class="page-sub">{{ stats.count }} fichier(s) · {{ (stats.size / 1048576)|number_format(1, ',', ' ') }} Mo</p>
        </div>
        <input type="search" id="media-search" placeholder="Rechercher un média…" class="input" style="max-width:260px" autocomplete="off">
    </div>

    <div class="card card--pad" style="margin-bottom:20px">
        <input type="file" class="filepond" name="file" data-upload="{{ path('admin_media_upload') }}" multiple accept="image/*">
    </div>

    <div id="media-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px">
        {% for m in medias %}
            {% set url = m.webpPath ? '/uploads/' ~ m.webpPath : '/uploads/' ~ m.path %}
            <div class="card media-item" style="overflow:hidden" data-name="{{ (m.originalName ~ ' ' ~ (m.alt ?? ''))|lower }}">
                <a href="{{ url }}" target="_blank" rel="noopener"><img src="{{ url }}" alt="{{ m.alt }}" loading="lazy" style="width:100%;aspect-ratio:1;object-fit:cover;display:block"></a>
                <div style="padding:8px 10px;display:flex;flex-direction:column;gap:6px">
                    <span style="font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ m.originalName }}">{{ m.originalName }}</span>
                    <span style="font-size:10px;color:var(--muted)">{{ m.width ? m.width ~ '×' ~ m.height ~ ' px · ' }}{{ (m.size / 1024)|round }} Ko</span>
                    <input type="text" class="input input--sm" value="{{ m.alt }}" placeholder="Texte alternatif…"
                           data-alt-url="{{ path('admin_media_alt', {id: m.id}) }}" style="font-size:11px;padding:5px 7px">
                    <div style="display:flex;justify-content:space-between;align-items:center;gap:6px">
                        <button type="button" class="pill-btn" data-copy="{{ url }}" style="font-size:10px">Copier l’URL</button>
                        <form method="post" action="{{ path('admin_media_delete', {id: m.id}) }}" onsubmit="return confirm('Supprimer ce média ?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('delmedia' ~ m.id) }}">
                            <button class="pill-btn" style="color:var(--red);padding:3px 7px">✕</button>
                        </form>
                    </div>
                </div>
            </div>
        {% else %}
            <p class="page-sub">Aucun média. Déposez vos images ci-dessus.</p>
        {% endfor %}
    </div>

    <script>
    (function () {
        // Recherche instantanée
        var search = document.getElementById('media-search');
        search && search.addEventListener('input', function () {
            var q = this.value.trim().toLowerCase();
            document.querySelectorAll('#media-grid .media-item').forEach(function (el) {
                el.style.display = !q || el.dataset.name.indexOf(q) !== -1 ? '' : 'none';
            });
        });
        // Édition du texte alternatif (auto-save au blur)
        document.querySelectorAll('[data-alt-url]').forEach(function (input) {
            var initial = input.value;
            input.addEventListener('blur', function () {
                if (input.value === initial) return;
                var body = new FormData(); body.append('alt', input.value);
                fetch(input.dataset.altUrl, { method: 'POST', body: body })
                    .then(function (r) { return r.json(); })
                    .then(function () { initial = input.value; input.style.borderColor = '#3aa655'; setTimeout(function () { input.style.borderColor = ''; }, 900); })
                    .catch(function () { input.style.borderColor = 'var(--red)'; });
            });
        });
        // Copier l'URL
        document.querySelectorAll('[data-copy]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                navigator.clipboard && navigator.clipboard.writeText(btn.dataset.copy);
                var t = btn.textContent; btn.textContent = 'Copié ✓';
                setTimeout(function () { btn.textContent = t; }, 1200);
            });
        });
    })();
    </script>
{% endblock %}