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

{% block title %}Parcours Connect - Accueil{% endblock %}

{% block body %}
    <div class="hero-section">
        <div class="container text-center">
            <h1 class="hero-title">Bienvenue sur Parcours Connect</h1>
            <p class="hero-subtitle">Découvrez nos parcours de soins interactifs</p>
        </div>
    </div>

    <div class="container">
        {% if is_granted('ROLE_ADMIN') %}
            {# Sépare les parcours en ligne et hors ligne pour l'administrateur #}
            {% set onlineParcours = [] %}
            {% set offlineParcours = [] %}
            {% for parcours in parcours %}
                {% if parcours.isOnline %}
                    {% set onlineParcours = onlineParcours|merge([parcours]) %}
                {% else %}
                    {% set offlineParcours = offlineParcours|merge([parcours]) %}
                {% endif %}
            {% endfor %}

            <div class="section-header">
                <i class="fas fa-globe text-success"></i>
                <h2>Parcours en ligne</h2>
                <span class="badge bg-success">{{ onlineParcours|length }}</span>
            </div>
            <div class="parcours-grid">
                {% for parcours in onlineParcours %}
                    <a href="{{ path('app_parcours_show', {'id': parcours.id}) }}" class="parcours-card">
                        <span class="status-badge online">En ligne</span>
                        <div class="parcours-logo">
                            {% if parcours.logo %}
                                <img src="/{{ parcours.logo }}" alt="Logo {{ parcours.nom }}" style="max-width: 100%; max-height: 170px; object-fit: scale-down;">
                            {% else %}
                                <i class="fas fa-folder-open fa-4x text-success"></i>
                            {% endif %}
                        </div>
                        <div class="parcours-content">
                            <h2 class="parcours-title">{{ parcours.nom }}</h2>
                            <p class="parcours-description">{{ parcours.description }}</p>
                        </div>
                        <div class="parcours-footer">
                            <div class="parcours-stats">
                                <div class="parcours-stat">
                                    <i class="fas fa-book"></i>
                                </div>
                                <div class="parcours-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>Mis à jour {{ parcours.updatedAt ? parcours.updatedAt|date('d/m/Y') : parcours.createdAt|date('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                {% endfor %}
            </div>

            <div class="section-header mt-5">
                <i class="fas fa-eye-slash text-secondary"></i>
                <h2>Parcours hors ligne</h2>
                <span class="badge bg-secondary">{{ offlineParcours|length }}</span>
            </div>
            <div class="parcours-grid">
                {% for parcours in offlineParcours %}
                    <a href="{{ path('app_parcours_show', {'id': parcours.id}) }}" class="parcours-card">
                        <span class="status-badge offline">Hors ligne</span>
                        <div class="parcours-logo">
                            {% if parcours.logo %}
                                <img src="/{{ parcours.logo }}" alt="Logo {{ parcours.nom }}" style="max-width: 100%; max-height: 170px; object-fit: scale-down;">
                            {% else %}
                                <i class="fas fa-folder-open fa-4x text-secondary"></i>
                            {% endif %}
                        </div>
                        <div class="parcours-content">
                            <h2 class="parcours-title">{{ parcours.nom }}</h2>
                            <p class="parcours-description">{{ parcours.description }}</p>
                        </div>
                        <div class="parcours-footer">
                            <div class="parcours-stats">
                                <div class="parcours-stat">
                                    <i class="fas fa-book"></i>
                                </div>
                                <div class="parcours-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>Mis à jour {{ parcours.updatedAt ? parcours.updatedAt|date('d/m/Y') : parcours.createdAt|date('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <div class="parcours-grid">
                {% for parcours in parcours %}
                    <a href="{{ path('app_parcours_show', {'id': parcours.id}) }}" class="parcours-card">
                        <div class="parcours-logo">
                            {% if parcours.logo %}
                                <img src="/{{ parcours.logo }}" alt="Logo {{ parcours.nom }}" style="max-width: 100%; max-height: 170px; object-fit: scale-down;">
                            {% else %}
                                <i class="fas fa-folder-open fa-4x text-primary"></i>
                            {% endif %}
                        </div>
                        <div class="parcours-content">
                            <h2 class="parcours-title">{{ parcours.nom }}</h2>
                            <p class="parcours-description">{{ parcours.description }}</p>
                        </div>
                        <div class="parcours-footer">
                            <div class="parcours-stats">
                                <div class="parcours-stat">
                                    <i class="fas fa-book"></i>
                                </div>
                                <div class="parcours-stat">
                                    <i class="fas fa-clock"></i>
                                    <span>Mis à jour {{ parcours.updatedAt ? parcours.updatedAt|date('d/m/Y') : parcours.createdAt|date('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                {% else %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Aucun parcours n'est disponible pour le moment.
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endblock %}