{% extends 'base.html.twig' %}

{% block title %}Étapes du parcours{% endblock %}

{% block body %}
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item active">Étapes du parcours</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-8">
            <h1 class="mb-4">Étapes du parcours</h1>

            <div class="timeline">
                {% for etape in etapes %}
                    <div class="timeline-item">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h2 class="h4">{{ etape.titre }}</h2>
                                    <p class="text-muted mb-3">{{ etape.description }}</p>
                                    
                                    {% if etape.ressources|length > 0 %}
                                        <div class="mb-3">
                                            <small class="text-muted">
                                                <i class="fas fa-paperclip me-1"></i>
                                                {{ etape.ressources|length }} ressource{{ etape.ressources|length > 1 ? 's' : '' }}
                                            </small>
                                        </div>
                                    {% endif %}

                                    <a href="{{ path('app_etape_show', {'id': etape.id}) }}" 
                                       class="btn btn-primary">
                                        Voir le détail
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Aucune étape n'est disponible pour ce parcours.
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h2 class="h5 mb-0">Progression</h2>
                </div>
                <div class="card-body">
                    <div class="progress mb-3">
                        <div class="progress-bar" role="progressbar" style="width: 0%;" 
                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                    </div>
                    <p class="text-muted small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        La progression sera bientôt disponible
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .timeline {
        position: relative;
        padding: 20px 0;
    }
    .timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        height: 100%;
        width: 2px;
        background: var(--bs-primary);
    }
    .timeline-item {
        position: relative;
        margin-left: 40px;
    }
    .timeline-marker {
        position: absolute;
        left: -40px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--bs-primary);
        border: 3px solid white;
        box-shadow: 0 0 0 2px var(--bs-primary);
        margin-top: 12px;
    }
    .timeline-content {
        padding: 0 20px;
    }
</style>
{% endblock %}