{% 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': 'Devenir prof', 'href': app.request.getSchemeAndHttpHost() ~ path('homepage')},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')},

]) %}

{% block robots %}noindex, nofollow{% endblock %}

{% set subjectPrefix = category.slug == 'coach-sportif' ? '' : (category.name|first|lower in ['a','e','i','o','u','h'] ? "d'" : 'de ') %}
{% set subjectName = category.name %}

{% set categoryName = category.name|default('cours particuliers') %}
{% set categoryFirstLetter = categoryName|first|lower %}
{% set categoryPrefix = categoryFirstLetter in ['a', 'e', 'i', 'o', 'u', 'h', 'é', 'è', 'ê', 'ë'] ? "d'" : 'de ' %}

{% set geoLabel = '' %}
{% if cp and departement %}
    {% set geoLabel = departement.departementNom ~ ' (' ~ cp ~ ')' %}
{% elseif departement %}
    {% set geoLabel = departement.departementNom ~ ' (' ~ departement.departementCode ~ ')' %}
{% endif %}

{% set levelLabel = '' %}
{% if level and levels[level] is defined %}
    {% set levelLabel = levels[level] %}
{% elseif level %}
    {% set levelLabel = level %}
{% endif %}

{% set formatLabel = '' %}
{% if location == 'webcam' %}
    {% set formatLabel = 'En ligne' %}
{% elseif location == 'outPlace' %}
    {% set formatLabel = 'À domicile' %}
{% elseif location == 'inPlace' %}
    {% set formatLabel = 'Chez le professeur' %}
{% endif %}

{% set searchContextParts = ['Cours particuliers ' ~ categoryPrefix ~ categoryName] %}
{% if geoLabel %}
    {% set searchContextParts = searchContextParts|merge(['à ' ~ geoLabel]) %}
{% endif %}
{% if levelLabel %}
    {% set searchContextParts = searchContextParts|merge([levelLabel]) %}
{% endif %}
{% if formatLabel %}
    {% set searchContextParts = searchContextParts|merge([formatLabel]) %}
{% endif %}
{% set searchContext = searchContextParts|join(' · ') %}

{% set seoTitle = searchContext ~ ' | RueduProf' %}
{% set seoDescription = 'Découvrez ' ~ items.getTotalItemCount ~ ' professeurs pour des cours particuliers ' ~ categoryPrefix ~ categoryName ~ (geoLabel ? ' à ' ~ geoLabel : '') ~ (levelLabel ? ', niveau ' ~ levelLabel : '') ~ (formatLabel ? ', format ' ~ formatLabel : '') ~ '. Comparez les profils et contactez gratuitement le bon professeur.' %}
{% set seoUrl = app.request.uri %}

{% set meta_h1 = searchContext %}
{% set meta_p = 'Comparez les profils, consultez les disponibilités et contactez gratuitement un professeur adapté au niveau, au budget et au format de cours recherché.' %}

{% set faqLocationLabel = geoLabel ? 'à ' ~ geoLabel : 'partout en France' %}

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

{% block open_graph %}
    <meta property="og:title" content="{{ seoTitle }}" />
    <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 }}" />
    <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 %}
{% block snippet_json %}{% endblock %}


{% block stylesheets %}
<style>
.breadcrumb, .breadcrumb a, .breadcrumb-item.active {
    color: rgba(0, 0, 0, 0.86);
}
</style>
{% endblock %}
{% block body %}
<section class="section-slate pt-2 pt-lg-3 pb-2 pb-lg-3" id="listing-search">
    <div class="container-xxl position-relative">
        <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">{{ categoryName }}</li>
            </ol>
        </nav>

        <div
            class="offcanvas-lg offcanvas-start listing-search-drawer"
            tabindex="-1"
            id="mobileSearchDrawer"
            aria-labelledby="mobileSearchDrawerLabel"
        >
            <div class="offcanvas-header d-lg-none">
                <div>
                    <div class="small text-secondary">Recherche</div>
                    <h2 class="offcanvas-title h5 mb-0" id="mobileSearchDrawerLabel">Modifier la recherche</h2>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#mobileSearchDrawer" aria-label="Fermer"></button>
            </div>

            <div class="offcanvas-body d-lg-none">
                <div class="search-glass-card p-3 p-md-4 p-xl-4">
                    <div class="search-card-header mb-3">
 
                        <div class="search-card-badge">
                            <i class="bi bi-search"></i>
                        </div>
                    </div>

                        {{ render(controller('App:Search:searchBar', {'form': formSearch, sidebarMode: true, prefix: 'desktop', data: data})) }}
                </div>
            </div>
        </div>
    </div>
</section>

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

            {# Sidebar recherche desktop #}
            <aside class="col-lg-4 col-xl-3 d-none d-lg-block" id="mobileSearchDrawer">
                <div class="side-stack position-sticky" style="top: 110px;">
                    <div class="search-glass-card p-3 p-md-4">
                        <div class="search-card-header mb-3">
                            <div>
                                <div class="search-card-title">Trouver le bon prof</div>
                                <p class="search-card-copy mb-0">
                                    Modifiez votre recherche et affinez les résultats.
                                </p>
                            </div>
                            <div class="search-card-badge">
                                <i class="bi bi-search"></i>
                            </div>
                        </div>

                        {{ render(controller('App:Search:searchBar', {
                            'form': formSearch, 
                            sidebarMode: true,
                            prefix: 'mobile',
                            data: data
                        })) }}
                    </div>
                </div>
            </aside>

            {# Résultats #}
            <div class="col-12 col-lg-8 col-xl-9">

                <div class="search-glass-card p-3 p-md-4 p-xl-4 mb-4">
                    <p class="text-secondary mb-0"><b>{{ items.getTotalItemCount }}</b> résultats</p>
                </div>

                <div class="row g-4">

                    {% if premia is defined and premia|length > 0 %}
                        {% for key, item in premia %}
                            {%- include 'App::Search/_item.html.twig' with {
                               item: item,
                               categoryPrefix: categoryPrefix,
                               categoryName: categoryName,
                               cardMode: 'premium'
                            } only -%}
                        {% endfor %}
                    {% endif %}

                    {% for item in items %}
                     
                            {%- include 'App::Search/_item.html.twig' with {
                               item: item,
                               categoryPrefix: categoryPrefix,
                               categoryName: categoryName
                            } only -%}

                    {% else %}
                        <div class="col-12">
                            <div class="content-panel text-center">
                                <h3 class="h4 mb-2">Aucun résultat pour le moment</h3>
                                <p class="text-secondary mb-0">Essayez d’élargir votre recherche en changeant la ville, le niveau ou le format du cours.</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div class="row m-10 text-center navigation mt-4">
                    {{ knp_pagination_render(items) }}
                </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 %}