{% extends 'layout.html' %}

{% block title %}Créer une Catégorie | 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>
<a href="{{ url_for('admin.manage_categories') }}" class="hover:text-blue-600">Gérer les Catégories</a>
<span class="mx-2">/</span>
<span class="text-gray-700">Créer une Catégorie</span>
{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow-sm p-6">
    <h1 class="text-2xl font-bold mb-6">Créer une Nouvelle Catégorie</h1>
    
    <form method="post" action="{{ url_for('admin.create_category') }}" class="space-y-4">
        {{ form.hidden_tag() }}
        
        <div class="space-y-2">
            <label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700">
                Nom <span class="text-red-600">*</span>
            </label>
            {{ form.name(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500") }}
            {% if form.name.errors %}
            <div class="text-red-600 text-sm mt-1">
                {% for error in form.name.errors %}
                <p>{{ error }}</p>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        
        <div class="space-y-2">
            <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700">
                Description
            </label>
            {{ form.description(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", rows=4) }}
            {% if form.description.errors %}
            <div class="text-red-600 text-sm mt-1">
                {% for error in form.description.errors %}
                <p>{{ error }}</p>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        
        <div class="space-y-2">
            <label for="{{ form.order.id }}" class="block text-sm font-medium text-gray-700">
                Ordre d'Affichage <span class="text-red-600">*</span>
            </label>
            {{ form.order(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", type="number") }}
            {% if form.order.errors %}
            <div class="text-red-600 text-sm mt-1">
                {% for error in form.order.errors %}
                <p>{{ error }}</p>
                {% endfor %}
            </div>
            {% endif %}
            <p class="text-sm text-gray-500">Entrez un nombre pour définir l'ordre d'affichage (les plus petits nombres apparaissent en premier)</p>
        </div>
        
        <div class="flex justify-between pt-4">
            <a href="{{ url_for('admin.manage_categories') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
                Annuler
            </a>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
                Créer la Catégorie
            </button>
        </div>
    </form>
</div>
{% endblock %}