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

{% set page_title = page_title|default('') %}
{% set site_name = site_name|default('RueduProf') %}

{% set seoTitle %}Cours particuliers à domicile ou en ligne, sans commission{% endset %}
{% set seoDescription %}Comparez les annonces de cours particuliers et trouvez un professeur au meilleur prix. Cours à domicile ou en ligne, 0% de commission.{% endset %}

{% block meta_title %}{{ seoTitle }}{% endblock %}
{% block meta_description %}{{ seoDescription }}{% endblock %}

{% block canonical %}{{ app.request.getSchemeAndHttpHost() ~ path('app_home_page') }}{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{seoTitle}} - RueduProf" />
    <meta
        property="og:description"
        content="{{seoDescription}}"
    />
    <meta property="og:url" content="{{ app.request.getSchemeAndHttpHost() ~ path('app_home_page') }}" />
    <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 %}

{% set listing = listing|default({
    'subject': 'Maths',
    'city': 'Paris',
    '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'],
}) %}

{% block snippet_json %}
    {%- include 'App::schema/cours_particuliers.html.twig' with {
        categoryArray: categoryArray,
        locations: locations
    } only -%}
{% endblock %}

{% block body %}
<section class="listing-hero-blue 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 active" aria-current="page">
                    Cours particuliers
                </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">
                        <span class="listing-badge">
                            <i class="bi bi-lightning-charge-fill"></i>
                            Mise en relation en quelques minutes
                        </span>
                    </div>

                    <h1 class="listing-title">
                        Cours particuliers en ligne et à domicile avec des professeurs qualifiés
                    </h1>

                    <p class="listing-text">
                        RueduProf vous met en relation avec des professeurs expérimentés pour des cours particuliers
                        personnalisés, en ligne ou à domicile, du primaire aux études supérieures.
                        <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>
                          <li>💻 En ligne ou 🏠 à domicile, selon vos préférences</li>

                        </ul>
                    </p>
                </div>

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


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

            </div>
        </div>

    </div>
</section>



{# =========================
   Cours par matière
   ========================= #}
<section class="section-white pb-4 pb-lg-5 pt-4">
  <div class="container">
    <div class="section-heading text-center text-lg-start">
      <span class="section-kicker">Cours particuliers</span>
      <h2 class="h3 fw-bold mb-2">Trouvez un cours par matière</h2>
      <p class="text-muted mb-0">
        Accédez rapidement aux matières les plus recherchées et trouvez le professeur adapté à votre besoin.
      </p>
    </div>

    <div class="row g-4">
      {% for theme in themes %}
        {% if theme.children|length > 0 and  theme.slug != 'entreprise' %}
          <div class="col-12 col-md-6 col-xl-4">
              <article class="teacher-list-card h-100">
                  <div class="d-flex align-items-center gap-3 mb-3">
                      <div class="theme-label theme-label-{{ theme.slug|e('html_attr') }}">
                          {% if theme.classIcon is not empty %}
                              <i class="fa-solid fa-{{ theme.classIcon|e('html_attr') }}" aria-hidden="true"></i>
                          {% else %}
                              <i class="bi bi-briefcase-fill" aria-hidden="true"></i>
                          {% endif %}
                      </div>
                      <div>
                          <h3 class="h4">{{ theme.name|e }}</h3>
                      </div>
                  </div>

                  <div class="d-flex flex-wrap gap-2 mb-4">
                      {% for item in theme.children %}
                        {% if not item.type or item.type != 'formations' %}
                          <a
                              href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_simple_show', {'slug': item.slug}) }}"
                              class="subject-pill subject-pill-muted text-decoration-none"
                              title="Cours particuliers {{ item.name|e }}"
                          >
                              {{ item.name|e }}
                          </a>
                        {% endif %}
                      {% endfor %}
                  </div>

              </article>
            </div>
          {% endif %}
        {% endfor %}
      </div>

  </div>
</section>


{# =========================
   Cours en ligne
   ========================= #}
<section class="section-soft">
  <div class="container">
    <div class="surface-highlight p-4 p-md-5">
      <div class="row align-items-center g-4">
        <div class="col-lg-8">
          <span class="badge rounded-pill text-bg-light text-dark mb-3 px-3 py-2">
            Disponible partout en France
          </span>

          <h2 class="h2 fw-bold mb-3">Cours particuliers en ligne</h2>
          <p class="mb-0 fs-6 fs-md-5 text-white text-opacity-75">
            Découvrez nos cours particuliers en ligne dans de nombreuses matières et échangez avec un professeur qualifié depuis chez vous.
          </p>
        </div>

        <div class="col-lg-4 text-lg-end">
          <a href="/cours-particuliers/en-ligne" class="btn btn-light btn-lg btn-pill fw-semibold">
            Découvrir les cours en ligne
          </a>
        </div>
      </div>
    </div>
  </div>
</section>


{# =========================
   Cours par ville
   ========================= #}
<section class="section-dark">
  <div class="container">
    <div class="section-heading text-center pt-4">
      <span class="section-kicker-light">Près de chez vous</span>
      <h2 class="h3 fw-bold mb-2">Les cours particuliers par ville</h2>
      <p class="mb-0 section-text-white">
        Trouvez un professeur particulier près de chez vous pour des cours en ligne ou à domicile.
      </p>
    </div>

    {% if locations|length > 0 or departments|length > 0 %}
      <div class="row g-3 pb-4">
        {% for location in locations %}
          <div class="col-12 col-md-6 col-xl-4">
            <a
              href="{{ path('app_category_simple_show', { slug: location.citySlug }) }}"
              class="link-tile"
              title="Cours particuliers à {{ location.city ? location.city : 'Paris' }}"
            >
              <span>Cours particuliers à {{ location.city ? location.city : 'Paris' }}</span>
              <span class="tile-arrow">→</span>
            </a>
          </div>
        {% endfor %}


      </div>
    {% else %}
      <div class="surface-card p-4 text-center">
        <p class="text-muted mb-0">Aucune ville disponible pour le moment.</p>
      </div>
    {% endif %}
  </div>
</section>



{# =========================
   Cours par ville
   ========================= #}

<section class="pb-4 pb-lg-5" 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 mt-4">
              <div>
                  <h2 class="h3 mb-2">Profs disponibles</h2>
            </div>
          </div>

          <div class="row g-4">
            {% for key, item in tutors %}
              {% 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 %}
            {% endfor %}
          </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 %}