{% extends 'layout.html' %}

{% block title %}Gérer les Catégories | 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 Catégories</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 Catégories</h1>
        <a href="{{ url_for('admin.create_category') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring flex items-center">
            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
            Nouvelle Catégorie
        </a>
    </div>
    
    {% if categories %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Ordre
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Nom
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Description
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Sujets
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for category in categories %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ category.order }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">
                            <a href="{{ url_for('forum.category_view', id=category.id) }}" class="hover:text-blue-600">
                                {{ category.name }}
                            </a>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-gray-500 line-clamp-2">
                            {{ category.description or "Aucune description" }}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ category.topic_count() }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <a href="{{ url_for('admin.edit_category', id=category.id) }}" class="text-blue-600 hover:text-blue-900">
                                <i data-feather="edit" class="w-4 h-4"></i>
                                <span class="sr-only">Modifier</span>
                            </a>
                            <form action="{{ url_for('admin.delete_category', id=category.id) }}" method="post" class="delete-form inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-red-600 hover:text-red-900 bg-transparent border-none p-0 cursor-pointer"
                                        data-confirm="Êtes-vous sûr de vouloir supprimer cette catégorie ? Cette action est irréversible et supprimera également tous les sujets associés.">
                                    <i data-feather="trash-2" class="w-4 h-4"></i>
                                    <span class="sr-only">Supprimer</span>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="bg-gray-50 p-6 text-center rounded-lg">
        <p class="text-gray-600">Aucune catégorie n'a été créée.</p>
        <a href="{{ url_for('admin.create_category') }}" class="mt-2 inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
            Créer votre première catégorie
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Configuration des confirmations de suppression
        document.querySelectorAll('.delete-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const confirmMessage = this.querySelector('button').getAttribute('data-confirm');
                if (confirm(confirmMessage)) {
                    this.submit();
                }
            });
        });
    });
</script>
{% endblock %}