{% extends 'base.html.twig' %}

{% block title %}Liste des Signalements{% endblock %}

{% block body %}
    <div class="min-h-screen bg-gray-100">
        {{ include('admin/_sidebar.html.twig') }}
        
        <div class="md:ml-64">
            <header class="bg-white shadow">
                <div class="px-4 sm:px-6 lg:px-8 py-4">
                    <h1 class="text-2xl font-bold text-gray-900">Signalements</h1>
                </div>
            </header>

            <main class="py-6 px-4 sm:px-6 lg:px-8">
            {% for message in app.flashes('success') %}
                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ message }}</span>
                </div>
            {% endfor %}
            <div class="px-4 py-6 sm:px-0">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for reporting in reportings %}
                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="p-4">
                                {% set baseUrl = app.request.schemeAndHttpHost %}
                                {% set imageUrl = reporting.image.thumbnailName ? baseUrl ~ '/api/images/' ~ reporting.image.imageName ~ '/thumbnail' : (reporting.image.imageName ? baseUrl ~ '/api/images/' ~ reporting.image.imageName ~ '/original' : null) %}
                                {% if imageUrl %}
                                    <a href="/admin/images/{{ reporting.image.imageName }}/original" target="_blank" class="block mb-4 relative">
                                        <img src="{{ imageUrl }}" alt="Image signalée" class="w-full h-48 object-cover rounded-md hover:opacity-75 transition-opacity {% if reporting.isActive %}opacity-50{% endif %}">
                                        {% if reporting.isActive %}
                                            <div class="absolute top-2 right-2 bg-red-500 rounded-full p-1">
                                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                                </svg>
                                            </div>
                                        {% endif %}
                                    </a>
                                {% else %}
                                    <div class="w-full h-48 bg-gray-200 flex items-center justify-center rounded-md mb-4">
                                        <span class="text-gray-500">Image non disponible</span>
                                    </div>
                                {% endif %}
                                <div class="mb-2">
                                    {% if reporting.isActive %}
                                        <span class="inline-flex items-center px-2.5 py-2 rounded-full text-xs font-medium bg-red-100 text-red-800">Signalement actif</span>
                                    {% else %}
                                        <span class="inline-flex items-center px-2.5 py-2 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Signalement annulé</span>
                                    {% endif %}
                                    {% if lastLogin and reporting.createdAt > lastLogin %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 ml-1">Nouveau</span>
                                    {% endif %}
                                </div>
                                <div class="text-sm text-gray-500">Date de création de l'image: {{ reporting.image.createdAt|date('d/m/Y H:i') }}</div>
                                <div class="text-sm text-gray-500">Auteur de l'image : {{ reporting.image.user.firstName }} {{ reporting.image.user.lastName }}</div>
                                <div class="text-sm text-gray-500">Commentaire de l'image : {{ reporting.image.commentaire }}</div>
                                <div class="text-sm text-gray-500 mb-1 border-t mt-2 pt-2">Signalé par: {{ reporting.user.firstName }} {{ reporting.user.lastName }}</div>
                                <div class="text-sm text-gray-500">Le: {{ reporting.createdAt|date('d/m/Y H:i') }}</div>
                                {% if reporting.reason %}
                                    <div class="text-sm text-gray-700 mt-1"><strong>Raison:</strong> {{ reporting.reason }}</div>
                                {% endif %}
                                {% if reporting.description %}
                                    <div class="text-sm text-gray-600 mt-1 italic">{{ reporting.description }}</div>
                                {% endif %}
                                <div class="flex space-x-2 mt-2 border-t pt-2">
                                    {% set action = reporting.isActive ? 'désactiver' : 'activer' %}
                                    <form method="post" action="{{ path('admin_image_delete', {image: reporting.image.imageName}) }}" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette image ?')">
                                        <button type="submit" class="px-3 py-1 rounded-md text-white font-bold bg-red-500 hover:bg-red-700 text-xs">Supprimer Image</button>
                                    </form>
                                    <form method="post" action="{{ path('admin_reporting_toggle', {id: reporting.id}) }}" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir {{ action }} ce signalement ?')">
                                        <button type="submit" class="px-3 py-1 rounded-md text-white font-bold 
                                            {% if reporting.isActive %}
                                                bg-yellow-500 hover:bg-yellow-700
                                            {% else %}
                                                bg-green-500 hover:bg-green-700
                                            {% endif %} text-xs">
                                            {% if reporting.isActive %}
                                                Désactiver Signalement
                                            {% else %}
                                                Activer Signalement
                                            {% endif %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                {{ include('admin/_pagination.html.twig') }}
            </main>
        </div>
    </div>
{% endblock %}