{% extends 'base.html' %}

{% block title %}Accueil - Méthodologies{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2 class="mb-4">Bienvenue sur la plateforme de méthodologies</h2>
        <p class="lead mb-4">Sélectionnez une matière pour découvrir des méthodologies adaptées à vos besoins.</p>
    </div>
</div>

<!-- Subject Selection Section -->
<section id="matieres-section" class="mb-5 slide-in-up">
    <h3 class="mb-3">Matières</h3>
    <div class="row">
        {% for matiere in matieres %}
        <div class="col-md-4 mb-4">
            <div class="subject-card" data-matiere-id="{{ matiere.id }}">
                <div class="subject-indicator" style="background-color: {{ matiere.color_code }};"></div>
                <h3>{{ matiere.nom }}</h3>
                <p>Cliquez pour explorer les méthodologies dans cette matière</p>
                <div class="text-end">
                    <span class="btn btn-sm" style="background-color: {{ matiere.color_code }}; color: white;">
                        <i class="fas fa-arrow-right"></i>
                    </span>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="alert alert-info">
                Aucune matière n'est disponible pour le moment.
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Categories Section (initially hidden) -->
<section id="sous-categories-section" class="mb-5 d-none fade-in">
    <h3 class="mb-3">Types de méthodologies</h3>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="selection-container">
                <h4 class="selection-title">Sélectionnez un type</h4>
                <ul id="sous-categories-list" class="selection-list">
                    <!-- Sous catégories will be loaded here -->
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Texts Section (initially hidden) -->
<section id="textes-section" class="mb-5 d-none fade-in">
    <h3 class="mb-3">Méthodologies</h3>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="selection-container">
                <h4 class="selection-title">Sélectionnez une méthodologie</h4>
                <ul id="textes-list" class="selection-list">
                    <!-- Textes will be loaded here -->
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Content Display Section (initially hidden) -->
<section id="content-section" class="mb-5 d-none fade-in">
    <div class="content-viewer">
        <h2 id="content-title" class="content-title"><!-- Title will be populated here --></h2>
        <div id="content-blocks" class="content-blocks">
            <!-- Content blocks will be populated here -->
        </div>
    </div>
</section>
{% endblock %}