{% extends 'layout.html' %}

{% block title %}Gérer les Signalements | Forum Communautaire{% endblock %}

{% block breadcrumb %}
<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
<span class="mx-2">/</span>
<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
<span class="mx-2">/</span>
<span class="text-gray-700">Gérer les Signalements</span>
{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Gérer les Signalements</h1>
        
        <div class="flex space-x-2">
            {% if show_resolved %}
                <a href="{{ url_for('admin.manage_reports', show_resolved=0) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
                    Masquer les signalements résolus
                </a>
            {% else %}
                <a href="{{ url_for('admin.manage_reports', show_resolved=1) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
                    Afficher tous les signalements
                </a>
            {% endif %}
        </div>
    </div>
    
    {% if reports.items %}
    <div class="space-y-6">
        {% for report in reports.items %}
        <div class="border border-gray-200 rounded-lg p-4 {% if not report.is_resolved %}bg-red-50 border-red-100{% endif %}">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center">
                    <div class="bg-red-100 p-2 rounded-full mr-3">
                        <i data-feather="flag" class="w-5 h-5 text-red-600"></i>
                    </div>
                    <div>
                        <div class="font-medium">
                            {% if report.post_id %}
                                <span>Message signalé</span>
                            {% else %}
                                <span>Sujet signalé</span>
                            {% endif %}
                            <span class="text-gray-500">par</span>
                            <a href="{{ url_for('user.profile', username=report.reporter.username) }}" class="text-blue-600 hover:underline">
                                {{ report.reporter.username }}
                            </a>
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ report.created_at | format_datetime }}
                        </div>
                    </div>
                </div>
                <div>
                    {% if report.is_resolved %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i data-feather="check" class="w-3 h-3 mr-1"></i>
                            Résolu par {{ report.resolved_by.username }}
                        </span>
                    {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            <i data-feather="alert-circle" class="w-3 h-3 mr-1"></i>
                            En attente
                        </span>
                    {% endif %}
                </div>
            </div>
            
            <div class="mb-4">
                <h3 class="text-sm font-medium text-gray-700 mb-1">Raison du signalement:</h3>
                <div class="bg-white p-3 rounded border border-gray-200 text-sm">
                    {{ report.reason }}
                </div>
            </div>
            
            <div class="mb-4">
                <h3 class="text-sm font-medium text-gray-700 mb-1">Contenu signalé:</h3>
                <div class="bg-white p-3 rounded border border-gray-200 text-sm">
                    {% if report.post_id %}
                        <div class="flex items-start mb-2">
                            <img src="{{ url_for('static', filename='uploads/avatars/' + report.post.author.avatar) if report.post.author.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
                                 alt="{{ report.post.author.username }}" 
                                 class="w-8 h-8 rounded-full mr-2 object-cover">
                            <div>
                                <div class="font-medium">{{ report.post.author.username }}</div>
                                <div class="text-xs text-gray-500">{{ report.post.created_at | format_datetime }}</div>
                            </div>
                        </div>
                        <div>{{ report.post.content | safe }}</div>
                    {% else %}
                        <div class="flex items-start mb-2">
                            <img src="{{ url_for('static', filename='uploads/avatars/' + report.topic.author.avatar) if report.topic.author.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
                                 alt="{{ report.topic.author.username }}" 
                                 class="w-8 h-8 rounded-full mr-2 object-cover">
                            <div>
                                <div class="font-medium">{{ report.topic.author.username }}</div>
                                <div class="text-xs text-gray-500">{{ report.topic.created_at | format_datetime }}</div>
                            </div>
                        </div>
                        <div class="font-medium text-blue-600">{{ report.topic.title }}</div>
                        <div>{{ report.topic.posts[0].content | safe }}</div>
                    {% endif %}
                </div>
            </div>
            
            {% if not report.is_resolved %}
            <div class="flex space-x-2">
                <form action="{{ url_for('admin.resolve_report', id=report.id) }}" method="post">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 focus:outline-none focus:ring">
                        <i data-feather="check" class="w-4 h-4 mr-1 inline"></i>
                        Marquer comme résolu
                    </button>
                </form>
                <form action="{{ url_for('admin.delete_reported_content', id=report.id) }}" method="post" class="delete-content-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring">
                        <i data-feather="trash-2" class="w-4 h-4 mr-1 inline"></i>
                        Supprimer le contenu
                    </button>
                </form>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    
    <!-- Pagination -->
    {% if reports.pages > 1 %}
    <div class="mt-4 flex justify-center">
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if reports.has_prev %}
            <a href="{{ url_for('admin.manage_reports', page=reports.prev_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Précédent</span>
                <i data-feather="chevron-left" class="w-5 h-5"></i>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                <span class="sr-only">Précédent</span>
                <i data-feather="chevron-left" class="w-5 h-5"></i>
            </span>
            {% endif %}
            
            {% for page_num in reports.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                {% if page_num %}
                    {% if page_num == reports.page %}
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
                        {{ page_num }}
                    </span>
                    {% else %}
                    <a href="{{ url_for('admin.manage_reports', page=page_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                        {{ page_num }}
                    </a>
                    {% endif %}
                {% else %}
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                    ...
                </span>
                {% endif %}
            {% endfor %}
            
            {% if reports.has_next %}
            <a href="{{ url_for('admin.manage_reports', page=reports.next_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Suivant</span>
                <i data-feather="chevron-right" class="w-5 h-5"></i>
            </a>
            {% else %}
            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
                <span class="sr-only">Suivant</span>
                <i data-feather="chevron-right" class="w-5 h-5"></i>
            </span>
            {% endif %}
        </nav>
    </div>
    {% endif %}
    
    {% else %}
    <div class="bg-gray-50 p-6 text-center rounded-lg">
        <p class="text-gray-600">
            {% if show_resolved %}
                Aucun signalement trouvé.
            {% else %}
                Aucun signalement en attente. Tout est résolu!
            {% endif %}
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Confirmation pour supprimer le contenu signalé
        document.querySelectorAll('.delete-content-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                if (confirm('Êtes-vous sûr de vouloir supprimer ce contenu? Cette action est irréversible.')) {
                    this.submit();
                }
            });
        });
    });
</script>
{% endblock %}