{% extends 'App::V2/base.html.twig' %}

{% set site_name = site_name|default('RueduProf') %}
{% set nav_items = nav_items|default([
    {'label': 'Cours particuliers', 'href': app.request.getSchemeAndHttpHost() ~ path('app_home_page')},
    {'label': 'Toutes les matières', 'href': '#matieres'},
    {'label': 'Devenir prof', 'href': app.request.getSchemeAndHttpHost() ~ path('homepage')},
    {'label': 'FAQ', 'href': '#faq'},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')},

]) %}


{# =========================
   Variables SEO
   ========================= #}
{% set locationName = location.city ?? location.name %}
{% set firstLetter = locationName|first|lower %}
{% set needsApostrophe = firstLetter in ['a', 'e', 'i', 'o', 'u', 'h', 'é', 'è', 'ê', 'ë'] %}


{% set dePrefix = location.slug == 'en-ligne' ? '' : (needsApostrophe ? "à " : "à ") %}

{% set seoTitle %}
    {%- if location.slug == 'en-ligne' -%}
        Cours particuliers en ligne avec des professeurs qualifiés
    {%- else -%}
        Cours particuliers {{ dePrefix ~ locationName }} avec des professeurs qualifiés
    {%- endif -%}
{% endset %}

{% set seoDescription %}
    {%- if location.slug == 'en-ligne' -%}
        Recherchez les meilleurs cours particuliers en ligne avec des professeurs qualifié
    {%- else -%}
        Recherchez les meilleurs cours particuliers {{ dePrefix ~ locationName }} avec des professeurs qualifiés
    {%- endif -%}
{% endset %}

{% set seoUrl = "https://www.rueduprof.com/cours-particuliers/" ~ location.citySlug %}

{% set meta_h1 %}Cours particuliers {% if location.slug == 'en-ligne' %}{% else %} {{dePrefix}}{% endif %}{{ location.city ?? location.name }} avec des professeurs qualifiés{% endset %}
{% set meta_p %}RueduProf vous met en relation avec des professeurs expérimentés pour des cours particuliers personnalisés {% if location.slug == 'en-ligne' %}{% else %} {% if (location.city ?? location.name)|first|lower in ['a','e','i','o','u','h','é', 'è', 'ê', 'ë'] %}d'{% else %}de {% endif %}{% endif %}{{ location.city ?? location.name }}, du primaire aux études supérieures.{% endset %}

{% block meta_title %}{{ seoTitle }}{% endblock %}
{% block meta_description %}{{ seoDescription }}{% endblock %}
{% block og_url %}{{ seoUrl }}{% endblock %}
{% block subtitle %}Homepage{% endblock %}
{% block canonical %}{{ seoUrl }}{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{seoTitle}} - RueduProf" />
    <meta
        property="og:description"
        content="{{seoDescription}}"
    />
    <meta property="og:url" content="{{ seoUrl }}" />
    <meta property="og:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}
{% block twitter_card %}
    <meta name="twitter:title" content="{{seoTitle}} - RueduProf" />
    <meta
        name="twitter:description"
        content="{{seoDescription}}"
    />
    <meta name="twitter:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}


{% block snippet_json_breadcrumb %}
{% endblock %}

{% set listing = listing|default({
    'subject': 'Maths',
    'city': locationName,
    'count': 248,
    'avg_rating': 4.8,
    'response_rate': 97,
    'online_share': 64,
    'sort': 'Les mieux notés',
    'active_filters': ['Lycée', 'En ligne', 'Réponse rapide'],

}) %}

    {% set faq = faq|default([
        {
            'q': 'Quel est le tarif moyen d’un cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
            'a': 'Les tarifs des cours particuliers ' ~ dePrefix ~ locationName ~ ' varient selon le niveau de l’élève et l’expérience du professeur. En primaire, comptez généralement de 5 € à 30 € par heure. Au collège, les prix se situent le plus souvent entre 8 € et 35 € par heure. Pour le lycée, les tarifs vont en moyenne de 12 € à 50 € par heure. Enfin, pour les cours ' ~ dePrefix ~ locationName ~ ' dans le supérieur, les prix observés sont généralement compris entre 15 € et 55 € par heure.'
        },
    {
        'q': 'Comment trouver des cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Vous pouvez comparer les annonces de cours particuliers selon le niveau de l’élève, le format du cours, le budget et la localisation. La plateforme permet de rechercher des professeurs particuliers ' ~ dePrefix ~ locationName ~ ' ainsi que dans le reste du ' ~ location.name ~ ', pour un accompagnement ponctuel ou régulier.'
    },
    {
        'q': 'Quels niveaux sont proposés pour les cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Les cours particuliers ' ~ dePrefix ~ locationName ~ ' s’adressent aux élèves du primaire, du collège, du lycée et du supérieur. Selon les profils, il est possible de trouver un accompagnement adapté au niveau de l’élève et à ses objectifs.'
    },
    {
        'q': 'Peut-on suivre des cours particuliers à domicile ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Oui, il est possible de suivre des cours particuliers à domicile ' ~ dePrefix ~ locationName ~ '. Ce format permet à l’élève de travailler dans un cadre familier avec un accompagnement personnalisé et un suivi régulier.'
    },
    {
        'q': 'Peut-on prendre des cours particuliers en ligne ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Oui, des cours particuliers en ligne peuvent également être suivis ' ~ dePrefix ~ locationName ~ '. Ce format offre plus de souplesse dans l’organisation et permet de trouver plus facilement un professeur disponible, même à distance.'
    },
    {
        'q': 'Quel est le prix d’un cours particulier ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Le prix d’un cours particulier ' ~ dePrefix ~ locationName ~ ' dépend généralement du niveau de l’élève, de l’expérience du professeur, de la durée du cours et du format choisi, à domicile ou en ligne. Les tarifs peuvent donc varier selon le profil recherché et les objectifs visés.'
    },
    {
        'q': 'Comment choisir un bon professeur particulier ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Pour choisir un bon professeur particulier ' ~ dePrefix ~ locationName ~ ', il est conseillé de regarder le niveau enseigné, l’expérience, la pédagogie, les disponibilités et le format de cours proposé. L’important est de trouver un accompagnement adapté aux besoins de l’élève et à son rythme.'
    },
    {
        'q': 'Comment se déroule un premier cours particulier ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Le premier cours particulier permet généralement d’évaluer le niveau de l’élève, d’identifier ses besoins et de définir des objectifs clairs. Le professeur peut ensuite proposer une méthode de travail et un rythme adaptés pour favoriser une progression durable.'
    },
    {
        'q': 'Comment prendre des cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Pour prendre des cours particuliers ' ~ dePrefix ~ locationName ~ ', il suffit de rechercher les professeurs correspondant à votre besoin puis de les contacter gratuitement. Vous pouvez ensuite choisir le format de cours le plus adapté à votre emploi du temps et à vos objectifs.'
    },
    {
        'q': 'Peut-on contacter gratuitement un professeur particulier ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Oui, vous pouvez contacter gratuitement des professeurs particuliers ' ~ dePrefix ~ locationName ~ ' afin d’échanger sur le niveau de l’élève, les disponibilités, le format de cours souhaité et les objectifs à atteindre.'
    },
    {
        'q': 'Les cours particuliers sont-ils disponibles uniquement ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Non, les cours particuliers ne sont pas disponibles uniquement ' ~ dePrefix ~ locationName ~ '. Vous pouvez également trouver des professeurs dans d’autres communes du ' ~ location.name ~ ', ce qui élargit le choix pour des cours à domicile ou en ligne.'
    },
    {
        'q': 'À quelle fréquence prendre des cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'La fréquence des cours particuliers dépend du niveau de l’élève, de ses besoins et de ses objectifs. En général, un à deux cours par semaine permettent d’installer une progression régulière et un meilleur suivi dans le temps.'
    },
    {
        'q': 'Les cours particuliers ' ~ dePrefix ~ locationName ~ ' donnent-ils droit à un crédit d’impôt ?',
        'a': 'Sous certaines conditions, les cours particuliers à domicile peuvent ouvrir droit à un crédit d’impôt dans le cadre des services à la personne. Il est recommandé de vérifier l’éligibilité du dispositif proposé ainsi que les mentions figurant sur le devis et la facture.'
    },
    {
        'q': 'Comment donner des cours particuliers ' ~ dePrefix ~ locationName ~ ' ?',
        'a': 'Si vous souhaitez donner des cours particuliers ' ~ dePrefix ~ locationName ~ ', vous pouvez déposer une annonce pour présenter votre expérience, vos niveaux d’enseignement, vos disponibilités et vos modalités de cours. Cela permet d’être contacté par des élèves ou des familles recherchant un accompagnement dans le ' ~ location.name ~ '.'
    }
]) %}

{% block snippet_json %}
    {% if location.slug == 'en-ligne' %}
        {% include 'App::schema/cours_particuliers_online.html.twig' with {
            categoryArray: categoryArray,
            tutors: tutors,
            seo: seo,
            faq: faq
        } only %}
    {% else %}
        {% include 'App::schema/cours_particuliers_city.html.twig' with {
            arrLocs: arrLocs,
            tutors: tutors,
            location: location,
            seo: seo,
            faq: faq
        } only %}
    {% endif %}
{% endblock %}


{% block body %}
<section class="listing-hero-black py-4 py-lg-5" id="listing-search">
    <div class="container-xxl">

        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Accueil</a>
                </li>

                <li class="breadcrumb-item">
                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_home_page') }}">Cours particuliers</a>
                </li>

                <li class="breadcrumb-item active" aria-current="page">
                    {% if location.slug == 'en-ligne' %}
                        En ligne
                    {% else %}
                        {{ listing.city }}
                    {% endif %}
                </li>
            </ol>
        </nav>

        <div class="listing-hero-box">
            <div class="row g-4 align-items-center">

                <div class="col-lg-7">
                    <div class="mb-3">

                        {% if location.slug == 'en-ligne' %}
                            <span class="listing-badge ms-2">
                                <i class="bi bi-laptop"></i>
                                Cours en ligne
                            </span>
                        {% elseif listing.city %}
                            <span class="listing-badge ms-2">
                                <i class="bi bi-geo-alt-fill"></i>
                                {{ listing.city }}
                            </span>
                        {% endif %}
                    </div>

                    <h1 class="listing-title">
                        {{ meta_h1 }}
                    </h1>

                    <p class="listing-text">
                        {{ meta_p }}
                    </p>
                    <ul class="landing-benefits">
                        <li>🎯 Comparez les profils et les tarifs</li>
                        <li>⚡ Trouvez un professeur adapté à votre niveau</li>
                        <li>💬 Contactez gratuitement sans commission</li>
                        {% if location.slug == 'en-ligne' %}
                            <li>💻 Cours en ligne par webcam ou visioconférence</li>
                        {% else %}
                            <li>🏠 Cours à domicile avec un professeur proche de chez vous</li>
                        {% endif %}
                    </ul>
                </div>

                <div class="col-lg-5">
                    <div class="listing-search-card">

                        {{ render(controller('App:Search:searchBar', {
                            'form': form_search,
                            'location': location
                        })) }}
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>



<section class="section-white  pb-4 pb-lg-5 pt-4" id="itemlist">
    <div class="container-xxl">
        <div class="row g-4 g-xl-5 align-items-start">


            <div class="col-xl-12">
                <div class="results-toolbar mb-4">
                    <div>
                        <h2 class="h3 mb-2">{{ countProfiles }} Profs disponibles pour des cours particuliers {{ dePrefix }}{{ location.city ?? location.name }}</h2>
                        <p class="text-secondary mb-0">{{ meta_h1 }}</p>
                    </div>

                </div>

                <div class="row g-4">

                   {% for key, item in tutors %}
              
                        {% set profile = item.profile %}
                        {% set user = profile.user %}
                        {% set avatar = profile.avatar %}
                        {% set isAndroid = user.device == 'ANDROID' %}
                        {% set displayName = (profile.firstname and profile.lastname and not isAndroid)
                            ? profile.firstname ~ ' ' ~ profile.lastname|first ~ '.'
                            : profile.lastname ~ ' ' ~ profile.firstname|first ~ '.'
                        %}
                        {% set profileUrl = path('app_profile_user_show', {
                            id: profile.id,
                            slug: 'professeur-' ~ profile.department ~ '-' ~ profile.firstname|myslugify ~ '-' ~ profile.lastname|first|myslugify
                        }) %}
                        
                        {% set lastActivityDate = user.lastLogin ? user.lastLogin : user.created %}

                        {% set hourlyPrice = item.price_from|default(item.price|default(null)) %}

                        {% set bio %}
                        {% if profile.content %}
                            {{ profile.content|length > 150 ? profile.content|slice(0, 150) ~ '...' : profile.content   }}
                        {% else %}
                            {% set content = item.content|default('')|striptags %}
                            {{ content|length > 150 ? content|slice(0, 150) ~ '...' : content  }}
                        {% endif %}
                        {% endset %}

                        {% set teaches = item.teaches|default([]) %}
                        {% set teaches = item.profile.categories|default([]) %}

                        {% set levels = item.levels|default([]) %}
                        {% set modes = item.modes|default([]) %}
                        {% set isVerified = profile.verified|default(user.verified|default(false)) %}

                        {% set cityDisplay %}
                            {% if location is defined and location.slug == 'en-ligne' %}
                                Cours Particuliers {% if item.category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}
                                <b>{{ item.category.name }} en ligne</b>
                            {% elseif profile.city %}
                                Cours Particuliers {% if item.category.name|first|lower in ['a','e','i','o','u','h'] %}d'{% else %}de {% endif %}
                                <b>{{ item.category.name }}</b> à {{ profile.city }}
                                {% if profile.city == 'Paris' %}
                                    {% if profile.department != '75000' %}
                                        {% if profile.department|slice(3, 1) == '0' %}
                                            {{ profile.department|slice(4, 1) }}
                                        {% else %}
                                            {{ profile.department|slice(3, 2) }}
                                        {% endif %}
                                        {% if profile.department|slice(4, 1) == '1' and profile.department|slice(3, 1) != '1' %}
                                            er
                                        {% else %}
                                            e
                                        {% endif %}
                                        arrondissement
                                    {% endif %}
                                    {% if profile.department %}
                                        <span>({{ profile.department }})</span>
                                    {% endif %}
                                {% else %}
                                    {% if profile.department %}
                                        <span>({{ profile.department }})</span>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endset %}

                        {% set subjectName = item.category.name|default('Maths') %}
                        {% set startsWithVowel = subjectName|first|lower in ['a','e','i','o','u','h','é','è','ê','ë'] %}
                        {% set subjectPrefix = startsWithVowel ? "d'" : 'de ' %}

                        {% include 'App::Category/_teacher_card.html.twig' with {
                            item: item,
                            category: item.category,
                            subjectPrefix: subjectPrefix,
                            subjectName: subjectName,
                            card_variant: 'simple'
                        } only %}
                        <!--
                        <div class="col-12 col-xxl-4">
                            <article class="teacher-list-card h-100 {% if item.featured|default(false) %}teacher-list-card-featured{% endif %}">
                                <div class="teacher-list-top d-flex gap-3 gap-md-4 align-items-start">
                                    <div class="teacher-card-avatar-wrap">
                                        <a href="{{ profileUrl }}" class="text-decoration-none text-reset">
                                            {% if avatar and avatar.path %}
                                                <img src="https://www.rueduprof.com/uploads/avatar/{{ avatar.path }}" alt="{{ displayName }}" class="teacher-card-avatar">
                                            {% else %}
                                                <div class="teacher-card-avatar teacher-avatar-fallback">
                                                    {{ profile.firstname|default('')|slice(0,1) }}{{ profile.lastname|default('')|slice(0,1) }}
                                                </div>
                                            {% endif %}
                                        </a>
                                    </div>

                                    <div class="flex-grow-1 min-w-0">

                                        <div class="d-flex flex-wrap gap-2 mb-2">
                                            {% if isVerified %}
                                                <span class="badge rounded-pill badge-verified px-3 py-2">
                                                    <i class="bi bi-patch-check-fill me-1"></i>Vérifié
                                                </span>
                                            {% endif %}
                                        </div>

                                        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-2">
                                            <div>
                                                <h3 class="h4 mb-1">
                                                    <a href="{{ profileUrl }}" class="text-decoration-none text-reset">
                                                        {{ displayName }}
                                                    </a>
                                                </h3>

                                                {% if cityDisplay|trim %}
                                                    <p class="text-secondary mb-0">{{ cityDisplay|raw }}</p>
                                                {% endif %}
                                            </div>

                                            {% if item.pricePerHour is not null %}
                                                <div class="teacher-price-box text-md-end">
                                                    <div class="teacher-price">{{ item.pricePerHour }}€<span>/h</span></div>
                                                    <div class="small text-secondary">à partir de</div>
                                                </div>
                                            {% endif %}
                                            {% if item.firstHour %}
                                                <div class="d-flex flex-wrap gap-2 mb-2">
                                                    <span class="badge text-bg-success border rounded-pill px-3 py-2 fw-semibold badge-soft"><i class="bi bi-cash"></i> 1ère heure gratuite</span>
                                                </div>
                                            {% endif %}
                                        </div>

                                        <div class="d-flex flex-wrap gap-3 meta-inline meta-inline-list mb-3">
                                            {% if profile.city %}
                                                <span><i class="bi bi-geo-alt"></i>{{ profile.city }}</span>
                                            {% endif %}

                                            {% if item.profile.user.lastLogin %}
                                                <span><i class="bi bi-clock-history"></i><time class="timeago" datetime="{{ item.profile.user.lastLogin|date }}"></time></span>
                                            {% else %}
                                                <span><i class="bi bi-clock-history"></i><time class="timeago" datetime="{{ item.profile.user.created|date }}"></time></span>
                                            {% endif %}
                    
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="teacher-proof-row mb-4">
                                    {% if item.webcam %}<div class="teacher-proof-item"><i class="bi bi-camera-video"></i> Webcam</div>{% endif %}
                                    {% if item.inPlace %}<div class="teacher-proof-item"><i class="bi bi-chevron-double-left"></i> Je peux recevoir mes élèves</div>{% endif %}
                                    {% if item.outPlace %}<div class="teacher-proof-item"><i class="Bi bi-chevron-double-right"></i>  Je peux me déplacer</div>{% endif %}
                                </div>

                                <p class="teacher-card-copy mb-3">{{ bio }}</p>

                                <div class="teacher-proof-row mb-4">
                                    {% if item.primaire %}<div class="teacher-proof-item"><i class="bi bi-check2-circle"></i> Primaire</div>{% endif %}
                                    {% if item.college %}<div class="teacher-proof-item"><i class="bi bi-check2-circle"></i> Collège</div>{% endif %}
                                    {% if item.lycee %}<div class="teacher-proof-item"><i class="bi bi-check2-circle"></i> Lycée</div>{% endif %}
                                    {% if item.superieur %}<div class="teacher-proof-item"><i class="bi bi-check2-circle"></i> Supérieur</div>{% endif %}  
                                </div>

                        

                                {% if teaches is not empty %}
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        {% for subject in teaches|slice(0, 4) %}
                                            <span class="subject-pill subject-pill-muted">{{ subject.category.name }}</span>
                                        {% endfor %}
                                        {% if teaches|length > 4 %}
                                        <a href="{{ profileUrl }}">
                                            <span class="subject-pill subject-pill-more bg-secondary-subtle text-secondary border border-secondary-subtle">
                                                <i class="bi bi-plus-lg"></i> Voir
                                            </span>
                                        </a>
                                        {% endif %}
                                    </div>
                                {% elseif item.category is defined and item.category.name is defined %}
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        <span class="subject-pill subject-pill-muted">{{ item.category.name }}</span>
                                    </div>
                                {% endif %}


                                <div class="row g-3 mb-4">
                                    {% if levels is not empty %}
                                        <div class="col-sm-6">
                                            <div class="teacher-mini-box h-100">
                                                <div class="info-label">Niveaux</div>
                                                <p class="mb-0">{{ levels|join(' · ') }}</p>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if modes is not empty %}
                                        <div class="col-sm-6">
                                            <div class="teacher-mini-box h-100">
                                                <div class="info-label">Formats</div>
                                                <p class="mb-0">{{ modes|join(' · ') }}</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="teacher-card-footer d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
                                    <div></div>

                                    <div class="d-grid d-sm-flex gap-2">
                                        <a href="{{ profileUrl }}" class="btn btn-outline-dark btn-pill px-4">Voir le profil</a>
                                        <a href="{{ profileUrl }}#reserver" class="btn btn-primary btn-pill px-4">Contacter</a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        -->
                    {% endfor %}

                    
                </div>


                <div class="content-panel mt-4 mt-lg-5" id="matieres">
                    <div class="section-eyebrow">Matières</div>
                    <h2 class="section-title mb-3">
                        Les matières les plus demandées {% if location.slug == 'en-ligne' %}{% else %}à{% endif %} {{ location.city ?? location.name }}
                    </h2>
                    <p class="text-secondary mb-4">
                        Retrouvez les matières disponibles dans votre ville, classées par nombre de professeurs.
                    </p>

                    <div class="row g-3">
                    {% if location.slug == 'en-ligne' %}
                        {% for category in categoryArray|slice(0, 12) %}

                            {% set categoryName = category.name %}
                            {% set categoryLabel = category.type == 'formations' ? 'Formations ' : 'Cours particuliers ' %}
                            {% set preposition = categoryName|first|lower in ['a', 'e', 'i', 'o', 'u'] ? "d'" : ' de ' %}
                            {% set categoryRoute %}
                                {%- if category.type == 'formations' -%}
                                    {{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': category.slug, 'location': 'en-ligne' }) }}
                                {%- else -%}
                                    {{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': category.slug, 'location': 'en-ligne' }) }}
                                {%- endif -%}
                            {% endset %}

                            <div class="col-6 col-md-6 col-xl-4">
      
                                <a href="{{ categoryRoute }}"
                                class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                    <div>
                                        <div class="subject-count">{{ category.usersCount }}</div>
                                        <div class="subject-label">
                                            {{  categoryLabel }} <b>{{ preposition ~ categoryName }} en ligne</b>
                                        </div>
                                    </div>
                                    <span class="subject-arrow">→</span>
                                </a>

                            </div>
                        {% endfor %}
                    {% else %}
                        {% for arrLoc in arrLocs %}
                            <div class="col-6 col-md-6 col-xl-4">
                                {% if arrLoc.type == 'formations' %}
                                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', {'slug': arrLoc.categorySlug, 'location': arrLoc.locationSlug }) }}"
                                    class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                        <div>
                                            <div class="subject-count"><i class="bi bi-person-fill"></i> {{ arrLoc.count }}</div>
                                            <div class="subject-label">
                                                Formations <b>{{ arrLoc.categoryName }}</b>
                                                à <b>{{ arrLoc.cityName ?? arrLoc.locationName }}</b>
                                            </div>
                                        </div>
                                        <span class="subject-arrow">→</span>
                                    </a>
                                {% else %}
                                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', {'slug': arrLoc.categorySlug, 'location': arrLoc.locationSlug }) }}"
                                    class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                        <div>
                                            <div class="subject-count"><i class="bi bi-person-fill"></i>  {{ arrLoc.count }}</div>
                                            <div class="subject-label">
                                                Cours particuliers <b>{{ arrLoc.categoryName }}</b>
                                                à <b>{{ arrLoc.cityName ?? arrLoc.locationName }}</b>
                                            </div>
                                        </div>
                                        <span class="subject-arrow">→</span>
                                    </a>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="col-12">
                                <div class="alert alert-light border rounded-4 mb-0">
                                    Aucune matière disponible pour le moment.
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                    </div>
                </div>

                <div class="content-panel mt-4 mt-lg-5" id="faq">
                    <div class="section-eyebrow">FAQ</div>
                    <h2 class="section-title">Questions fréquentes</h2>
                
                    <div class="accordion accordion-flush faq-accordion mt-3" id="faqAccordion">
                        {% for item in faq %}
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="faq{{ loop.index }}">
                                          {{ item.q }}
                                    </button>
                                </h3>
                                <div id="faq{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body text-secondary">{{ item.a }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>


            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block javascripts %}
<script src="/assets/js/jquery-2.1.3.min.js"></script>
<script src="/js/js/jquery.timeago.js" type="text/javascript"></script>

<script>
    jQuery(function ($) {
        $("time.timeago").timeago();
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&signed_in=true&libraries=places&callback=initAutocomplete"></script>
{% endblock %}