{% extends 'admin/base.html' %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-tags me-2"></i> Gestion des catégories</h1>
        <a href="{{ url_for('admin.add_category') }}" class="btn btn-primary">
            <i class="fas fa-plus-circle me-2"></i> Ajouter une catégorie
        </a>
    </div>
    
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nom</th>
                            <th>Description</th>
                            <th>Catégorie parente</th>
                            <th>Nombre de produits</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if categories %}
                            {% for category in categories %}
                                <tr>
                                    <td>{{ category.id }}</td>
                                    <td>
                                        {% if category.parent %}
                                            <span class="ms-3">&#8627; {{ category.name }}</span>
                                        {% else %}
                                            <strong>{{ category.name }}</strong>
                                        {% endif %}
                                    </td>
                                    <td>{{ category.description|truncate(50) if category.description else "Aucune description" }}</td>
                                    <td>
                                        {% if category.parent %}
                                            {{ category.parent.name }}
                                        {% else %}
                                            <span class="text-muted">Catégorie principale</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ category.products|length }}</td>
                                    <td class="text-end">
                                        <a href="{{ url_for('admin.edit_category', id=category.id) }}" class="btn btn-sm btn-info me-1" data-bs-toggle="tooltip" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ category.id }}" data-name="{{ category.name }}" data-type="la catégorie" data-action="{{ url_for('admin.delete_category', id=category.id) }}" data-bs-toggle="tooltip" title="Supprimer" {{ 'disabled' if category.products or category.subcategories else '' }}>
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="6" class="text-center">Aucune catégorie disponible</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize DataTable
        $('.datatable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            },
            order: [[0, 'asc']], // Sort by ID ascending by default
            responsive: true
        });
    });
</script>
{% endblock %}
