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

{% block title %}Parcours Connect - Liste des parcours{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .parcours-header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        .parcours-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            padding: 1rem;
        }
        .parcours-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .parcours-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
            text-decoration: none;
            color: inherit;
        }
        .parcours-logo {
            height: 150px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .parcours-logo img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
        }
        .parcours-content {
            padding: 1.5rem;
        }
        .parcours-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
        .parcours-description {
            color: #666;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .parcours-stats {
            display: flex;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid #eee;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        .status-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .status-badge.online {
            background: rgba(46, 204, 113, 0.1);
            color: #27ae60;
        }
        .status-badge.offline {
            background: rgba(231, 76, 60, 0.1);
            color: #c0392b;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="parcours-header">
        <div class="container">
            <h1 class="display-4">Tous les parcours</h1>
            <p class="lead">Explorez nos différents parcours de soins</p>
        </div>
    </div>

    <div class="container">
        <div class="parcours-grid">
            {% for parcours in parcours %}
                <a href="{{ path('app_parcours_show', {'id': parcours.id}) }}" class="parcours-card position-relative">
                    {% if is_granted('ROLE_ADMIN') %}
                        <span class="status-badge {% if parcours.actif %}online{% else %}offline{% endif %}">
                            {{ parcours.actif ? 'En ligne' : 'Hors ligne' }}
                        </span>
                    {% endif %}
                    <div class="parcours-logo">
                        <img src="{{ asset(parcours.logo) }}" alt="Logo {{ parcours.nom }}">
                    </div>
                    <div class="parcours-content">
                        <h2 class="parcours-title">{{ parcours.nom }}</h2>
                        <p class="parcours-description">{{ parcours.description }}</p>
                        <div class="parcours-stats">
                            <span>{{ parcours.rubriques|length }} rubriques</span>
                            <span>{{ parcours.pratiques|length }} pratiques</span>
                            <span>{{ parcours.fichesOutils|length }} fiches</span>
                        </div>
                    </div>
                </a>
            {% else %}
                <div class="alert alert-info">
                    Aucun parcours n'est disponible pour le moment.
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}