{% extends "layout.twig" %}

{% block title %}Tableau de bord – Médias{% endblock %}

{% block content %}
<h2>Gestion des médias</h2>

{% include 'partials/_admin_nav.twig' %}

{% if error %}
<div class="alert alert--danger">{{ error }}</div>
{% endif %}

{% if success %}
<div class="alert alert--success">{{ success }}</div>
{% endif %}

{% if media is not empty %}
<table class="admin-table">
    <thead>
        <tr>
            <th>Aperçu</th>
            <th>URL</th>
            <th>Usage</th>
            <th>Uploadé le</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for item in media %}
        {% set usage = mediaUsage[item.id] ?? {'count': 0, 'posts': []} %}
        <tr>
            <td data-label="Aperçu">
                <div class="upload">
                    <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="upload__thumb-link">
                        <img src="{{ item.url }}" alt="" class="upload__thumb">
                    </a>
                </div>
            </td>
            <td data-label="URL">
                <div class="upload">
                    <code class="upload__url">{{ item.url }}</code>
                    <div class="upload__actions">
                        <button type="button" class="btn btn--sm btn--secondary"
                            onclick="navigator.clipboard.writeText('{{ item.url }}').then(function() {
                                var btn = this; btn.textContent = 'Copié !';
                                setTimeout(function() { btn.textContent = 'Copier l\'URL'; }, 1500);
                            }.bind(this))">Copier l'URL</button>
                    </div>
                </div>
            </td>
            <td data-label="Usage">
                {% if usage.count > 0 %}
                    <strong>{{ usage.count }} article{{ usage.count > 1 ? 's' : '' }}</strong>
                    <ul>
                        {% for post in usage.posts %}
                        <li><a href="/admin/posts/edit/{{ post.id }}">{{ post.title }}</a></li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <span class="admin-table__muted">Aucun</span>
                {% endif %}
            </td>
            <td data-label="Uploadé le">{{ item.createdAt|date("d/m/Y H:i") }}</td>
            <td data-label="Actions">
                <div class="u-inline-actions">
                    <form method="post" action="/admin/media/delete/{{ item.id }}" class="u-inline-form">
                        <input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
                        <input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">
                        <button type="submit" class="btn btn--sm btn--danger"
                            {% if usage.count > 0 %}disabled title="Supprimez ou remplacez d'abord l'image dans les articles référencés"{% endif %}
                            onclick="return confirm('Supprimer ce fichier ?')">
                            Supprimer
                        </button>
                    </form>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% include 'partials/_pagination.twig' with { pagination: pagination } %}
{% else %}
<p><em>Aucun fichier uploadé.</em></p>
{% endif %}
{% endblock %}