{% extends "base.html" %}

{% block content %}
<div class="subject-container">
    <div class="subject-header">
        <h1 class="subject-title">{{ matiere.nom }}</h1>
        <div class="subject-header-decoration"></div>
    </div>

    <div class="subcategories-section">
        <h2 class="section-title">Sous-catégories</h2>
        
        <div class="subcategories-grid">
            {% for sous_categorie in sous_categories %}
            <a href="{{ url_for('main.sous_categorie', sous_categorie_id=sous_categorie.id) }}" class="subcategory-card">
                <div class="subcategory-content">
                    <span class="subcategory-name">{{ sous_categorie.nom }}</span>
                    <svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                    </svg>
                </div>
            </a>
            {% else %}
            <div class="no-subcategories">
                <svg class="empty-icon" viewBox="0 0 24 24">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
                </svg>
                <p>Aucune sous-catégorie disponible</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}