templates/front/course/course-details.html.twig line 1

Open in your IDE?
  1. {% extends "front/base.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     {{ encore_entry_link_tags('single-course') }}
  6.     {{ encore_entry_link_tags('search') }}
  8. {% endblock %}
  10. {% block title %}{{ course.getTranslatedContent(app.request.locale).name | raw }}
  11. {% endblock %}
  13. {% block og %}
  15.     {% set locale = app.request.locale %}
  16.     {% set url = app.request.server.get('FULL_URL') %}
  18.     <!-- Open Graph Markup -->
  19.     <meta property="og:locale" content="{{ locale }}">
  20.     <meta property="og:url" content="{{ url }}/{{ locale }}/courses/{{ course.token }}"/>
  21.     <meta property="og:type" content="article"/>
  22.     <meta property="og:title" content="{{ course.getTranslatedContent(locale).name | raw }}"/>
  23.     <meta property="og:description" content="{{ translatedCourse.description }}"/>
  24.     {% if course.cover and course.cover is fileexists('courses_img_directory') %}
  25.     <meta property="og:image" content="{{ url }}/images/stages/{{ course.cover }}"/>
  26.     {% endif %}
  27.     <meta property="og:site_name" content="Racket Trip">
  28. {% endblock %}
  30. {% if course.owner is instanceof('App\\Entity\\Coach') %}
  31.     {% set type = 'coach' %}
  32. {% elseif course.owner is instanceof('App\\Entity\\Club') %}
  33.     {% set type = 'club' %}
  34. {% else %}
  35.     {% set type = 'operator' %}
  36. {% endif %}
  38. {# Profile photo #}
  39. {% if course.owner.photo is fileexists('avatar_directory') %}
  40.     {% set avatar = course.owner.photo %}
  41. {% else %}
  42.     {% set avatar = 'default-profile.png' %}
  43. {% endif %}
  45. {% block body %}
  47.     {% include "front/course/_course-details-modals.html.twig" %}
  49.     <section class="mt-0 first-section overflow-hidden-mobile" id="course-detail">
  50.         <div class="container">
  51.             <div class="row">
  52.                 <div class="col-md-12">
  53.                     <div class="course-author-wrap {{ type }}">
  54.                         <a href="{{ path('view_pro', {'type': type, 'slug': course.owner.slug}) }}" class="link-author-img"><img loading="lazy" src="{{ asset('/images/profiles/' ~ avatar ) }}" class="author-img" alt="avatar"></a>
  55.                         <div class="author-review">
  56.                             <a href="{{ path('view_pro', {'type': type, 'slug': course.owner.slug}) }}"><p class="author-name">{{ course.owner.proInfo.fullname }}</p></a>
  57.                             
  58.                             <div class="author-stars" data-toggle="modal" data-target="#view-notes">
  59.                                 {% set averageNotes = getAverageNotes(course.owner)%}
  60.                                 {% set average = averageNotes.total %}
  61.                                 {% if average != 0 %}
  62.                                     {% for i in 1..5 %}
  63.                                         {% if average >= i %}
  64.                                             <i class="fas fa-star"></i>
  65.                                         {% else %}
  66.                                             {% if average > (i - 1) %}
  67.                                                 <i class="fas fa-star-half-alt"></i>
  68.                                             {% else %}
  69.                                                 <i class="far fa-star"></i>                                    
  70.                                             {% endif %}
  71.                                         {% endif %}
  72.                                     {% endfor %}
  73.                                 {% else %}
  74.                                     {% for i in 1..5 %}
  75.                                         <i class="fas fa-star grey-star"></i>
  76.                                     {% endfor %}
  77.                                 {% endif %}
  78.                                 <span class="review-count">({{ averageNotes.count }})</span>
  79.                             </div>
  80.                             
  81.                         </div>
  82.                         
  83.                         <div class="course-infos hide-mobile">
  84.                             <h3 class="course-name">
  85.                                 {{ course.getTranslatedContent(app.request.locale).name | raw }}
  86.                             </h3>
  87.                             {% if app.user and app.user is same as(course.owner) %} 
  88.                                 {% if course.status == "pending" or course.status == "active" %}
  89.                                 <a href="{{ path('update_course', {'token': course.token}) }}" class="btn main-btn btn-sm ml-3 text-nowrap">{{ "page_course_detail.upload" | trans }}</a>
  90.                                 {% endif %}
  91.                                 {% if course.status == "pending" and course.stepSaved == 5 %}
  92.                                 <a href="{{ path('publish_course', {'token': course.token}) }}" class="btn main-btn btn-sm ml-3 text-nowrap">{{ "course_form.put_online" | trans }}</a>
  93.                                 {% endif %}
  94.                             {% endif %}
  95.                         </div>
  96.                         <div class="like-wrap">
  97.                             {% if is_granted('ROLE_TRAINEE') %}
  98.                             <a href="{{ path('add_course_favorite', {'id': course.id}) }}" class="btn btn-like" id="favorite-btn" data-update data-token="{{ csrf_token('favorite' ~ course.id) }}">
  99.                                 <i class="fas fa-heart {% if app.user.isCourseFavorite(course) %}favorite{% endif %}"></i>
  100.                             </a>
  101.                             {% else %}
  102.                             <button type="button" class="btn btn-like" data-toggle="modal" data-target="#add-to-favorite">
  103.                                 <i class="fas fa-heart"></i>
  104.                             </button>
  105.                             {% endif %}
  106.                             <button class="btn btn-share" data-toggle="modal" data-target="#share-socials">
  107.                                 <i class="fal fa-arrow-square-up"></i>
  108.                             </button>
  109.                         </div>
  110.                     </div>
  111.                 </div>
  112.             </div>
  113.     
  114.             <div class="row hide-large">
  115.                 <div class="col-12">
  116.                     <div class="course-others-action" id="mobile-media-map">
  117.                         {% if not course.hideClubInfo or (app.user and app.user is same as(course.owner)) %}
  118.                         <button class=" btn see-map" id="scroll-map">
  119.                             <i class="fal fa-map-marked-alt"></i>
  120.                             <span>{{ "page_course_detail.see_on_map" | trans }}</span>
  121.                         </button>
  122.                         {% endif %}
  123.                         
  124.                         {% if course.videos | length > 0 %}
  125.                         <button type="button" class="btn watch-video" data-toggle="modal" data-target="#watch-video">{{ "pro_page.video" | trans | capitalize }}</button>
  126.                         {% endif %}
  127.                     </div>
  128.                 
  129.                     <div class="course-images-wrapper sliders-mobile">
  130.                         <div class="course-image-item">
  131.                             <img loading="lazy" src="{{ asset('/images/stages/' ~ course.cover ?? "default.png") }}" alt="Photo de couverture">
  132.                         </div>
  133.                         {% if course.photos | length > 0 %}
  134.                         {% for photo in course.photos %}
  135.                             {% if photo.name is fileexists('courses_img_directory') %}
  136.                                 <div class="course-image-item">
  137.                                     <img loading="lazy" src="{{ asset('/images/stages/' ~ photo.name) }}" alt="{{photo.name}}">
  138.                                 </div>
  139.                             {% endif %}
  140.                         {% endfor %}
  141.                         {% endif %}
  142.                     </div>
  143.                 </div>
  144.             </div>
  145.         
  146.             <div class="row">
  147.                 <div class="course-sidebar-col">
  148.                     <div class="course-sidebar" id="course-details-sidebar">
  150.                         <div class="title-info hide-mobile">
  151.                             <div class="left-col">
  152.                                 <h1 class="course-title">{{ course.getTranslatedContent(app.request.locale).name | raw }}</h1>
  153.                                 <div class="author-wrap {{ type }}">
  154.                                     <a href="{{ path('view_pro', {'type': type, 'slug': course.owner.slug}) }}">
  155.                                         <img loading="lazy" src="{{ asset('/images/profiles/' ~ avatar ) }}" class="author-img" alt="">
  156.                                     </a>
  157.                                     <div class="author-review">
  158.                                         <a href="{{ path('view_pro', {'type': type, 'slug': course.owner.slug}) }}" class="author-name">
  159.                                             {{ course.owner.proInfo.fullname }}
  160.                                         </a>
  161.                                         
  162.                                         <div class="author-stars" data-toggle="modal" data-target="#view-notes">
  163.                                             {% set averageNotes = getAverageNotes(course.owner)%}
  164.                                             {% set average = averageNotes.total %}
  165.                                             {% if average != 0 %}
  166.                                                 {% for i in 1..5 %}
  167.                                                     {% if average >= i %}
  168.                                                         <i class="fas fa-star"></i>
  169.                                                     {% else %}
  170.                                                         {% if average > (i - 1) %}
  171.                                                             <i class="fas fa-star-half-alt"></i>
  172.                                                         {% else %}
  173.                                                             <i class="far fa-star"></i>                                    
  174.                                                         {% endif %}
  175.                                                     {% endif %}
  176.                                                 {% endfor %}
  177.                                             {% else %}
  178.                                                 {% for i in 1..5 %}
  179.                                                     <i class="fas fa-star grey-star"></i>
  180.                                                 {% endfor %}
  181.                                             {% endif %}
  182.                                             <span class="review-count">({{ averageNotes.count }})<span>
  183.                                         </div>
  184.                                         
  185.                                     </div>
  186.                                 </div>
  187.                             </div>
  188.                             <div class="right-col">
  189.                                 <div class="like-wrap">
  190.                                     <button class="btn btn-share" data-toggle="modal" data-target="#share-socials">
  191.                                         <i class="fal fa-arrow-square-up"></i>
  192.                                     </button>
  193.                                     {% if is_granted('ROLE_TRAINEE') %}
  194.                                     <a href="{{ path('add_course_favorite', {'id': course.id}) }}" class="btn btn-like" id="favorite-btn" data-update data-token="{{ csrf_token('favorite' ~ course.id) }}">
  195.                                         <i class="fas fa-heart {% if app.user.isCourseFavorite(course) %}favorite{% endif %}"></i>
  196.                                     </a>
  197.                                     {% else %}
  198.                                     <button type="button" class="btn btn-like" data-toggle="modal" data-target="#add-to-favorite">
  199.                                         <i class="fas fa-heart"></i>
  200.                                     </button>
  201.                                     {% endif %}
  202.                                 </div>
  203.                             </div>
  204.                         </div>
  206.                         <div class="hide-desktop">
  207.                             <h1 class="course-title">{{ course.getTranslatedContent(app.request.locale).name | raw }}</h1>
  208.                         </div>
  209.                         <div class="badges">
  210.                             {% for sport in course.sports %}
  211.                                 <a href="{{ path('courses', {'sports[]': sport.id, 'search': 'true'}) }}" class="badge-sport">
  212.                                     {{ ("sport_name." ~ sport.slug) | trans }}
  213.                                 </a>
  214.                             {% endfor %}
  215.                         </div>
  216.                         {% if course.hideClubInfo == false and course.club %}
  217.                             <div class="club-intro">
  218.                                 {% if course.club.owner != null %}
  219.                                 <a href="{{ path('view_pro', {'type': 'club', 'slug': course.club.owner.slug}) }}">
  220.                                 {% endif %}
  221.                                     <img loading="lazy" src="{{ asset('/images/club-icon.png') }}" alt="Club">
  222.                                     <span class="club-name">{{ course.club.name }}</span>
  223.                                 {% if course.club.owner != null %}
  224.                                 </a>
  225.                                 {% endif %}
  226.                             </div>
  227.                         {% endif %}
  228.                         <div class="course-extra-infos">
  229.                             <i class="fas fa-map-marker-alt"></i>
  230.                             <span class="course-extra-text">{{ course.address.city }}, {{ course.countryCode | countryName(app.request.locale) }}</span>
  231.                         </div>
  232.                         <div class="course-extra-infos">
  233.                             <i class="fas fa-globe"></i>
  234.                             <span class="course-languages">
  235.                                 {% for language in course.languages %}
  236.                                     <img loading="lazy" src="{{ asset('/images/flag/' ~ language.slug ~ '.png') }}" alt="{{ language.slug }}">
  237.                                 {% endfor %}
  238.                             </span>
  239.                         </div>
  240.                         <div class="course-extra-infos">
  241.                             <i class="far fa-calendar-alt"></i>
  242.                             {% if course is hasseveralavailabilities %}
  243.                                 <span class="course-extra-text">{{ "courses.next_date" | trans }} : {{ course | nextdate.begin }}</span>
  244.                             {% else %}
  245.                                 {% if course | nextdate.begin == course | nextdate.end %}
  246.                                 <span class="course-extra-text">{{ course | nextdate.begin }}</span>
  247.                                 {% else %}
  248.                                 <span class="course-extra-text">{{ "calendar.from" | trans }} {{ course | nextdate.begin }} {{ "calendar.to" | trans }} {{ course | nextdate.end }}</span>
  249.                                 {% endif %}
  250.                             {% endif %}
  251.                         </div>
  252.                         <div class="course-extra-infos">
  253.                             <i class="fas fa-user"></i>
  254.                             <span class="course-extra-text">
  255.                                 {% for age in course.ages %}
  256.                                     {{ ("age_name." ~ age.slug) | trans }}
  257.                                     {% if loop.last %}{% else %}/{% endif %}
  258.                                 {% endfor %}
  259.                             </span>
  260.                         </div>
  261.                         <div class="course-extra-infos">
  262.                             <i class="fas fa-signal-4"></i>
  263.                             <span class="course-extra-text">{{ "page_course_detail.level" | trans }}
  264.                                 {% for level in course.levels %}
  265.                                     {{ ("level_name." ~ level.slug) | trans }}
  266.                                     {% if loop.last %}{% else %}/{% endif %}
  267.                                 {% endfor %}
  268.                             </span>
  269.                         </div>
  270.                         <div class="price-wrap">
  271.                             <h3 class="price-info">
  272.                                 {# {{ "page_course_detail.from" | trans }} #}
  273.                                 {% if course.availabilities | length >= 1 %}
  274.                                     {{ course | cheapestavailability.price }}
  275.                                 {% else %}
  276.                                     0
  277.                                 {% endif %}
  278.                                 €
  279.                                 <span>/{{ "page_course_detail.person" | trans }}</span>
  280.                             </h3>
  281.                             <span class="course-duration">{{ "page_course_detail.on" | trans }}
  282.                                 {% if course.availabilities | length >= 1 %}
  283.                                     {{ course | cheapestavailability.duration }}
  284.                                 {% else %}
  285.                                     0
  286.                                 {% endif %}
  287.                                 {{ "page_course_detail.days" | trans }}</span>
  288.                         </div>
  289.                         <hr>
  290.                         <button class="btn main-btn-outline mt-3 w-100" id="see-availabilities">{{ "page_course_detail.check_availability" | trans }}</button>
  291.                         
  292.                         {% if not app.user or (app.user and not app.user.isPro) %}
  293.                         
  294.                         <button class="btn main-btn mt-3 w-100" data-toggle="modal" data-target="#contact">{{ "page_course_detail.contact" | trans }}</button>
  295.                         
  296.                         {% endif %}
  297.                         
  298.                     </div>
  299.                 </div>
  301.                 {% if not app.user or (app.user and not app.user.isPro) %}
  302.                         
  303.                 {% include "front/pro/_contact-modal.html.twig" with {"pro": course.owner, "from": course.token} %}
  304.                 
  305.                 {% endif %}
  306.             
  307.             
  308.                 <div class="course-content-col" id="course-info">
  309.                     
  310.                     <div class="course-others-action hide-xs-mobile">
  311.                         {% if not course.hideClubInfo or (app.user and app.user is same as(course.owner)) %}
  312.                         <button class=" btn see-map" id="scroll-map">
  313.                             <i class="fal fa-map-marked-alt"></i>
  314.                             <span>{{ "page_course_detail.see_on_map" | trans }}</span>
  315.                         </button>
  316.                         {% endif %}
  317.                         
  318.                         {% if course.videos | length > 0 %}
  319.                         <button type="button" class="btn watch-video" data-toggle="modal" data-target="#watch-video">{{ "pro_page.video" | trans | capitalize }}</button>
  320.                         {% endif %}
  321.                     </div>
  323.                     <div class="course-images-wrapper sliders-desktop">
  324.                         <div class="course-image-item">
  325.                             <img loading="lazy" src="{{ asset('/images/stages/' ~ course.cover ?? "default.png") }}" alt="Photo de couverture">
  326.                         </div>
  327.                         {% if course.photos | length > 0 %}
  328.                         {% for photo in course.photos %}
  329.                             {% if photo.name is fileexists('courses_img_directory') %}
  330.                                 <div class="course-image-item">
  331.                                     <img loading="lazy" src="{{ asset('/images/stages/' ~ photo.name) }}" alt="{{photo.name}}">
  332.                                 </div>
  333.                             {% endif %}
  334.                         {% endfor %}
  335.                         {% endif %}
  336.                     </div>
  338.                     <div class="course-content-wrap">
  339.                         <ul class="nav nav-pills couse-infos-tabs" id="pills-tab" role="tablist">
  340.                             <li class="nav-item">
  341.                                 <a class="nav-link active" id="pills-stay-tab" data-toggle="pill" href="#pills-stay" role="tab" aria-controls="pills-stay" aria-selected="true">{{ "page_course_detail.stay" | trans }}</a>
  342.                             </li>
  343.                             <li class="nav-item">
  344.                                 <a class="nav-link" id="pills-planning-tab" data-toggle="pill" href="#pills-planning" role="tab" aria-controls="pills-planning" aria-selected="false">{{ "page_course_detail.planning" | trans }}</a>
  345.                             </li>
  346.                             <li class="nav-item">
  347.                                 <a class="nav-link" id="pills-other-tab" data-toggle="pill" href="#pills-other" role="tab" aria-controls="pills-other" aria-selected="false">{{ "page_course_detail.other_activities" | trans }}</a>
  348.                             </li>
  349.                             <li class="nav-item">
  350.                                 <a class="nav-link" id="pills-logistic-tab" data-toggle="pill" href="#pills-logistic" role="tab" aria-controls="pills-logistic" aria-selected="false">{{ "page_course_detail.logistics" | trans }}</a>
  351.                             </li>
  352.                         </ul>
  353.                         <div class="tab-content mobile-margin-bottom" id="pills-tabContent">
  354.                             <div class="tab-pane course-content-card fade show active" id="pills-stay" role="tabpanel" aria-labelledby="pills-stay-tab">
  355.                                 <div class="title-with-line">
  356.                                     <p>{{ "page_course_detail.your_stay" | trans }}</p>
  357.                                 </div>
  358.                                 <p class="course-description course-centent-text">
  359.                                     {{ translatedCourse.description |nl2br }}
  360.                                 </p>
  361.                             </div>
  362.                             <div class="tab-pane course-content-card fade" id="pills-planning" role="tabpanel" aria-labelledby="pills-planning-tab">
  363.                                 <div class="title-with-line">
  364.                                     <p>{{ "page_course_detail.planning" | trans }}</p>
  365.                                 </div>
  367.                                 {% if translatedCourse.plannings | length > 0 %}
  369.                                 {% for planning in translatedCourse.plannings %}
  371.                                     <h4 class="course-content-title">{{ planning.title }}</h4>
  372.                                     <p class="course-centent-text">
  373.                                         {{ planning.description |nl2br }}
  374.                                     </p>
  376.                                 {% endfor %}
  378.                                 {% else %}
  379.                                     
  380.                                     <span class="no-planning">{{ "page_course_detail.no_planning" | trans }}</span>
  382.                                 {% endif %}
  384.                             </div>
  385.                             <div class="tab-pane course-content-card fade" id="pills-other" role="tabpanel" aria-labelledby="pills-other-tab">
  386.                                 <div class="title-with-line">
  387.                                     <p>{{ "page_course_detail.other_activities" | trans }}</p>
  388.                                 </div>
  390.                                 {% if translatedCourse.others == null %}
  391.                                 
  392.                                     <span class="no-planning">{{ "page_course_detail.no_other_activities" | trans }}</span>
  393.                                     
  394.                                 {% else %}
  396.                                     <div class="course-activities">
  398.                                         {% for other in translatedCourse.others |split(',')  %}
  400.                                         <span class="activity-item">{{ other }}</span>
  402.                                         {% endfor %}
  404.                                     </div>
  406.                                 {% endif %}
  408.                             </div>
  409.                             <div class="tab-pane course-content-card fade" id="pills-logistic" role="tabpanel" aria-labelledby="pills-logistic-tab">
  410.                                 <div class="title-with-line">
  411.                                     <p>{{ "page_course_detail.included" | trans }}</p>
  412.                                 </div>
  413.                                 {% if course.logistic | length == 0 %}
  414.                                     <span class="no-planning">{{ "page_course_detail.no_logistics" | trans }}</span>
  415.                                 {% else %}
  417.                                     <ul id="logistic">
  418.                                         {% for logistic in course.logistic %}
  419.                                             {% if logistic == "transports" %}
  420.                                                 <li>{{ "page_course_detail.transport" | trans }}</li>
  421.                                             {% elseif logistic == "transfer" %}
  422.                                                 <li>{{ "page_course_detail.transfer" | trans }}</li>
  423.                                             {% elseif logistic == "housing" %}
  424.                                                 <li>{{ "page_course_detail.housing" | trans }}</li>
  425.                                             {% elseif logistic == "meal" %}
  426.                                                 <li>{{ "page_course_detail.meals" | trans }}</li>
  427.                                             {% elseif logistic == "breakfast" %}
  428.                                                 <li>{{ "page_course_detail.breakfast" | trans }}</li>
  429.                                             {% elseif logistic == "lunch" %}
  430.                                                 <li>{{ "page_course_detail.lunch" | trans }}</li>
  431.                                             {% elseif logistic == "dinner" %}
  432.                                                 <li>{{ "page_course_detail.dinner" | trans }}</li>
  433.                                             {% elseif logistic == "nursery" %}
  434.                                                 <li>{{ "page_course_detail.nursery" | trans }}</li>
  435.                                             {% endif %}                
  436.                                         {% endfor %}
  437.                                     </ul>
  439.                                 {% endif %}
  440.                             </div>
  441.                         </div>
  442.                     </div>
  444.                     <div class="course-content-card mb-5 availability-card mobile-margin-bottom" id="list-availabilities">
  445.                         <div class="title-with-line">
  446.                             <p>{{ "page_course_detail.pricing" | trans }}</p>
  447.                         </div>
  449.                         {% if availabilities | length > 0 or course.priceBundles | length > 0 %}
  450.                         <div class="price-header">
  451.                             <div class="persons">
  452.                                 <div class="title-courses-dispo">
  453.                                     <span>{{ "page_course_detail.number_of_persons" | trans }}</span>
  454.                                 </div>
  455.                             </div>
  456.                             <div class="prices">
  457.                                 <div class="title-courses-dispo">
  458.                                     <span>{{ "page_course_detail.price_person" | trans }}</span>
  459.                                 </div>
  460.                             </div>
  461.                         </div>
  463.                         {% if availabilities | length > 0 %}
  464.                         <div class="price-item">
  465.                             <span class="persons">{{ "page_course_detail.for_one_person" | trans }}</span>
  466.                             <span class="prices"><b>{{ availabilities[0].price }} €/{{ "page_course_detail.person" | trans }}</b></span>
  467.                         </div>
  468.                         {% endif %}
  470.                         {% if course.priceBundles | length > 0 %}
  471.                         {% for priceBundle in course.priceBundles | sort((a, b) => a.persons <=> b.persons) %}
  472.                             <div class="price-item">
  473.                                 <span class="persons">{{ "page_course_detail.from" | trans }} {{ priceBundle.persons }} {{ "page_course_detail.persons" | trans }}</span>
  474.                                 <span class="prices"><b>{{ priceBundle.pricePerPerson }} €/{{ "page_course_detail.person" | trans }}</b></span>
  475.                             </div>
  476.                         {% endfor %}
  477.                         {% endif %}
  479.                         {% else %}
  480.                             
  481.                             <p class="empty-message">{{ "page_course_detail.no_prices" | trans }}</p>
  483.                         {% endif %}
  484.                         
  485.                         <div class="title-with-line">
  486.                             <p>{{ "page_course_detail.availabilities" | trans }}</p>
  487.                         </div>
  489.                         {# Formulaire recherche par date #}
  491.                         {% if (course.frequency == 'recurring' and course.status != "archived" and course.status != "completed") or startingDate %}
  492.                         <div class="row justify-content-center mb-5">
  493.                             <div class="col-md-12 search-col availability-search">
  494.                                 {{ form_start(form, {'attr': {'class': 'main-search availabily-form'}}) }}
  495.                                     <div class="form-inline">
  496.                                         <div class="input-wrap">
  497.                                             <div class="search-dropdowns">
  498.                                                 <div class="custom-dropdown-input" id="date-wrap">
  499.                                                     <span class="custom-dropdown-label" id="date-input-label">
  500.                                                     {% if startingDate %}
  501.                                                         {{ startingDate }}
  502.                                                     {% else %}
  503.                                                         {{ "page_course_detail.from" | trans }}
  504.                                                     {% endif %}
  505.                                                     </span>
  506.                                                     <div class="custom-dropdown-content">
  507.                                                         <div id="datepicker" data-start={{ course.availabilities[0].begin }} data-end={{ course.availabilities[0].end }}></div>
  508.                                                         {{ form_widget(form.begin) }}
  509.                                                     </div>
  510.                                                 </div>
  511.                                             </div>
  512.                                         </div>
  513.                                     </div>
  514.                                     <button class="btn btn-main-search" type="submit">
  515.                                         <span class="hide-mobile">{{ "global.search" | trans }}</span>
  516.                                         <i class="far fa-search hide-desktop"></i>
  517.                                     </button>
  518.                                 {{ form_end(form) }}
  519.                             </div>
  520.                         </div>
  521.                         {% endif %}
  523.                         {% if course.status != "archived" and course.status != "completed" and availabilities.getTotalItemCount > 0 %}
  524.                         {#
  525.                         <div class="row" id="date-and-price">
  526.                             <div class="col-lg-5 col-md-12 title-courses-dispo">
  527.                                 <i class="fas fa-calendar-alt"></i>
  528.                                 <span>{{ "page_course_detail.dates" | trans }}</span>
  529.                             </div>
  530.                             <div class="col-lg-3 title-courses-dispo price-courses-title">
  531.                                 <i class="fas fa-clock"></i>
  532.                                 <span>{{ "page_course_detail.durations" | trans }}</span>
  533.                             </div>
  534.                             <div class="col-4"></div>
  535.                         </div>
  536.                         #}
  538.                         <div class="availability-header">
  539.                             <div class="dates">
  540.                                 <div class="title-courses-dispo">
  541.                                     <i class="fas fa-calendar-alt"></i>
  542.                                     <span>Dates</span>
  543.                                 </div>
  544.                             </div>
  545.                             <div class="durations">
  546.                                 <div class="title-courses-dispo">
  547.                                     <i class="fas fa-clock"></i>
  548.                                     <span>Durées</span>
  549.                                 </div>
  550.                             </div>
  551.                         </div>
  553.                         <div id="availabilities">
  554.                             {% for availability in availabilities %}
  555.                                 <div class="availability-item">
  556.                                     <span class="dates">{{ availability.formattedDate }}</span>
  557.                                     <span class="durations">{{ availability.duration }} {{ "page_course_detail.days" | trans | lower }}</span>
  558.                                     <div class="actions">
  559.                                         <button class="btn btn-book" data-begin="{{ availability.begin }}" data-end="{{ availability.end }}" data-price="{{ availability.price }}">{{ "page_course_detail.book" | trans }}</button>
  560.                                     </div>
  561.                                 </div>
  562.                                 {#
  563.                                 <div class="availability-row">
  564.                                     <div class="first">
  565.                                         <span class="dates">{{ availability.begin }} au {{ availability.end }}</span>
  566.                                         
  567.                                     </div>
  568.                                     
  569.                                     <div class="second">
  570.                                         <span class="price">{{ availability.duration }} {{ "page_course_detail.days" | trans | lower }}</span>
  571.                                     </div>
  572.                                     <div class="third">
  573.                                         <button class="btn btn-book" data-begin="{{ availability.begin }}" data-end="{{ availability.end }}" data-price="{{ availability.price }}">{{ "page_course_detail.book" | trans }}</button>
  574.                                     </div>
  575.                                 </div>
  576.                                 #}
  577.                             {% endfor %}
  578.                         </div>
  579.                         {{ knp_pagination_render(availabilities, 'front/_partials/availabilities-pagination.html.twig') }}
  580.                         {% else %}
  581.                             
  582.                             <h5 class="d-block text-center">Aucune disponibilité</h5>
  584.                             {% if startingDate %}
  585.                                 
  586.                             {% endif %}
  587.                             
  589.                         {% endif %}
  590.                     </div>
  592.                     {% if course.club %}
  593.                     
  594.                     <div class="course-content-card">
  595.                         {% if course.club.insurance or course.club.swimmingpool or course.club.gym or course.club.seminarRoom or course.club.restaurant  or course.club.bar %}
  596.                         <div class="title-with-line">
  597.                             <p>{{ "page_course_detail.about_club" | trans }}</p>
  598.                         </div>
  599.                         <div class="club-infrastructures">
  600.                             {% if course.club.insurance %}
  601.                                 <div class="infrastructure-item">
  602.                                     <img loading="lazy" src="{{ asset('/images/icons/assurance.svg') }}">
  603.                                     <span class="infrastructure-text">{{ "pro_page.insurance" | trans }}</span>
  604.                                 </div>
  605.                             {% endif %}
  606.                             {% if course.club.swimmingpool %}
  607.                                 <div class="infrastructure-item">
  608.                                     <img loading="lazy" src="{{ asset('/images/icons/piscine.svg') }}">
  609.                                     <span class="infrastructure-text">{{ "pro_page.swimmingpool" | trans }}</span>
  610.                                 </div>
  611.                             {% endif %}
  612.                             {% if course.club.gym %}
  613.                                 <div class="infrastructure-item">
  614.                                     <img loading="lazy" src="{{ asset('/images/icons/training.svg') }}">
  615.                                     <span class="infrastructure-text">{{ "pro_page.gym" | trans }}</span>
  616.                                 </div>
  617.                             {% endif %}
  618.                             {% if course.club.seminarRoom %}
  619.                                 <div class="infrastructure-item">
  620.                                     <img loading="lazy" src="{{ asset('/images/icons/seminar-room.svg') }}">
  621.                                     <span class="infrastructure-text">{{ "pro_page.seminar" | trans }}</span>
  622.                                 </div>
  623.                             {% endif %}
  624.                             {% if course.club.restaurant %}
  625.                                 <div class="infrastructure-item">
  626.                                     <img loading="lazy" src="{{ asset('/images/icons/restaurant.svg')}}">
  627.                                     <span class="infrastructure-text">{{ "pro_page.restaurant" | trans }}</span>
  628.                                 </div>
  629.                             {% endif %}
  630.                             {% if course.club.bar %}
  631.                                 <div class="infrastructure-item">
  632.                                     <img loading="lazy" src="{{ asset('/images/icons/bar.svg') }}">
  633.                                     <span class="infrastructure-text">{{ "pro_page.bar" | trans }}</span>
  634.                                 </div>
  635.                             {% endif %}
  636.                         </div>
  637.                         {% endif %}
  639.                         {% if course.club.courtInfos|length > 4 %}
  641.                         <div class="title-with-line mt-5">
  642.                             <p>{{ "page_course_detail.fields_tables" | trans }}</p>
  643.                         </div>
  644.                         <div class="club-infrastructures terrains">
  646.                             {% for court in course.club.courtInfos %}
  648.                                 {% if court.nbOpen > 0 or court.nbSemiOpen > 0 or court.nbCovered > 0 %}
  650.                                 <div class="infrastructure-item court">
  651.                                     <img loading="lazy" src="{{ asset('/images/icons/' ~ court.sport.icon) }}">
  652.                                     <span class="infrastructure-text">
  653.                                         {{ ("sport_name." ~ court.sport.slug) | trans }}</span>
  654.                                     
  655.                                     <div class="terrains-count">
  657.                                         {% if court.nbOpen > 0 %}
  658.                                         <h5 class="count">
  659.                                             <span>{{court.nbOpen}}</span>
  660.                                             {{ "page_course_detail.outdoor" | trans }}
  661.                                         </h5>
  662.                                         {% endif %}
  664.                                         {% if court.nbSemiOpen > 0 %}
  665.                                         <h5 class="count">
  666.                                             <span>{{court.nbSemiOpen}}</span>
  667.                                             {{ "page_course_detail.semi_indoor" | trans }}
  668.                                         </h5>
  669.                                         {% endif %}
  671.                                         {% if court.nbCovered > 0 %}
  672.                                         <h5 class="count">
  673.                                             <span>{{court.nbCovered}}</span>
  674.                                             {{ "page_course_detail.indoor" | trans }}
  675.                                         </h5>
  676.                                         {% endif %}
  677.                                         
  678.                                     </div>
  679.                                 </div>
  681.                                 {% endif %}
  683.                             {% endfor %}
  685.                         </div>
  686.                         {% endif %}
  687.                     </div>
  689.                     {% endif %}
  691.                     {% if course.coachsInfos | length > 0 and (not course.hideCoachInfo or (app.user and app.user is same as(course.owner)) ) %}
  693.                     <div class="title-with-line grey mt-5">
  694.                         <p>Coachs pour le stage</p>
  695.                     </div>
  696.                     <div class="row partners-wrapper coach-partners">
  698.                         {% for coachInfo in course.coachsInfos %}
  699.                             
  700.                             {% if coachInfo.owner %}
  701.                                 {% set pro = coachInfo.owner %}
  702.                                 
  703.                                 {% include "front/pro/_pro-card.html.twig" %}
  704.                                 
  705.                             {% else %}
  706.                                 
  707.                                 <div class="public-partner-card ">
  708.                                     <span class="type">COACH</span>
  710.                                     {% if coachInfo.image %}
  711.                                                     
  712.                                     <img class="cover" src="/images/profiles/{{ coachInfo.image }}" alt="Partner">
  714.                                     {% else %}
  715.                                     
  716.                                     {% set names = coachInfo.name |split(' ') | slice(0, 1) %}
  717.                                     {% set shortName = names[0] | slice(0, 1) %}
  719.                                     <span class="short-name">{{ shortName }}</span>
  720.                                         
  721.                                     {% endif %}
  723.                                     <span class="name">{{ coachInfo.name }}</span>
  724.                                     <div class="extra">
  725.                                         <i class="far fa-map-marker-alt"></i>
  726.                                         <span class="text">{% if coachInfo.address.city %}{{ coachInfo.address.city }}, {% endif %}{{ coachInfo.address.countryCode | countryName(app.request.locale) }}</span>
  727.                                     </div>
  728.                                 </div>
  730.                             {% endif %}
  731.                         {% endfor %}
  732.                     </div>
  734.                     {% endif %}
  736.                     {% if course.operator %}
  738.                     <div class="title-with-line grey mt-5">
  739.                         <p>Operateur pour le stage</p>
  740.                     </div>
  741.                     <div class="row partners-wrapper">
  742.                         {% set pro = course.operator.owner %}
  743.                         {% include "front/pro/_pro-card.html.twig" %}
  744.                     </div>
  746.                     {% endif %}
  748.                     
  749.                     {% if not course.hideClubInfo or (app.user and app.user is same as(course.owner)) %}
  750.                     <div class="title-with-line grey mt-5">
  751.                         <p>{{ "page_course_detail.close_environment" | trans }}</p>
  752.                     </div>
  753.                     <div class="single-course-map" id="course-detail-map"></div>
  754.                     <div class="course-content-card map">
  755.                         <h4 class="legend">{{ 'page_course_detail.map_legend' | trans }}</h4>
  756.                         <div class="row nearby-addresses justify-content-center">                            
  757.                             <div class="col-lg-2 col-4">
  758.                                 <div class="environment-item">
  759.                                     <img loading="lazy" src="{{ asset('/images/icons/club.png') }}" alt="">
  760.                                     <span class="environment-text club">{{ "global.club" | trans | capitalize }}</span>
  761.                                 </div>
  762.                                 <div class="hidden">
  763.                                     <div class="club-address" data-latitude="{{ course.address.latitude }}" data-longitude="{{ course.address.longitude }}" data-address="{{ course.address.fulladdress }}"></div>
  764.                                 </div>
  765.                             </div>
  766.                             {% if course.airports | length > 0 %}
  767.                             <div class="col-lg-2 col-4">
  768.                                 <div class="environment-item">
  769.                                     <img loading="lazy" src="{{ asset('/images/icons/aeroport.png') }}" alt="">
  770.                                     <span class="environment-text aeroport">{{ "page_course_detail.airport" | trans }}</span>
  771.                                 </div>
  772.                                 <div class="hidden">
  773.                                     {% for airport in course.airports %}
  774.                                         <div class="nearby-address" data-latitude="{{ airport.address.latitude }}" data-longitude="{{ airport.address.longitude }}" data-address="{{ airport.address.fulladdress }}" data-type="airports"></div>
  775.                                     {% endfor %}
  776.                                 </div>
  777.                             </div>
  778.                             {% endif %}
  779.                             {% if course.beaches | length > 0 %}
  780.                             <div class="col-lg-2 col-4">
  781.                                 <div class="environment-item">
  782.                                     <img loading="lazy" src="{{ asset('/images/icons/plage.png') }}" alt="">
  783.                                     <span class="environment-text plage">{{ "page_course_detail.beach" | trans }}</span>
  784.                                 </div>
  785.                                 <div class="hidden">
  786.                                     {% for beach in course.beaches %}
  787.                                         <div class="nearby-address" data-latitude="{{ beach.address.latitude }}" data-longitude="{{ beach.address.longitude }}" data-address="{{ beach.address.fulladdress }}" data-type="beaches"></div>
  788.                                     {% endfor %}
  789.                                 </div>
  790.                             </div>
  791.                             {% endif %}
  792.                             {% if course.stations | length > 0 %}
  793.                             <div class="col-lg-2 col-4">
  794.                                 <div class="environment-item">
  795.                                     <img loading="lazy" src="{{ asset('/images/icons/gare.png') }}" alt="">
  796.                                     <span class="environment-text gare">{{ "page_course_detail.station" | trans }}</span>
  797.                                 </div>
  798.                                 <div class="hidden">
  799.                                     {% for station in course.stations %}
  800.                                         <div class="nearby-address" data-latitude="{{ station.address.latitude }}" data-longitude="{{ station.address.longitude }}" data-address="{{ station.address.fulladdress }}" data-type="stations"></div>
  801.                                     {% endfor %}
  802.                                 </div>
  803.                             </div>
  804.                             {% endif %}
  805.                             {% if course.restaurants | length > 0 %}
  806.                             <div class="col-lg-2 col-4">
  807.                                 <div class="environment-item">
  808.                                     <img loading="lazy" src="{{ asset('/images/icons/restaurant.png') }}" alt="">
  809.                                     <span class="environment-text restaurant">{{ "page_course_detail.restaurant" | trans }}</span>
  810.                                 </div>
  811.                                 <div class="hidden">
  812.                                     {% for restaurant in course.restaurants %}
  813.                                         <div class="nearby-address" data-latitude="{{ restaurant.address.latitude }}" data-longitude="{{ restaurant.address.longitude }}" data-address="{{ restaurant.address.fulladdress }}" data-type="restaurants"></div>
  814.                                     {% endfor %}
  815.                                 </div>
  816.                             </div>
  817.                             {% endif %}
  818.                             {% if course.accommodations | length > 0 %}
  819.                             <div class="col-lg-2 col-4">
  820.                                 <div class="environment-item">
  821.                                     <img loading="lazy" src="{{ asset('/images/icons/hebergement.png') }}" alt="">
  822.                                     <span class="environment-text hebergement">{{ "page_course_detail.housing" | trans }}</span>
  823.                                 </div>
  824.                                 <div class="hidden">
  825.                                     {% for accommodation in course.accommodations %}
  826.                                         <div class="nearby-address" data-latitude="{{ accommodation.address.latitude }}" data-longitude="{{ accommodation.address.longitude }}" data-address="{{ accommodation.address.fulladdress }}" data-type="accommodations"></div>
  827.                                     {% endfor %}
  828.                                 </div>
  829.                             </div>
  830.                             {% endif %}
  831.                         </div>
  832.                     </div>
  833.                     {% endif %}
  834.                 </div>
  835.             </div>
  836.         </div>
  837.     </section>
  839.     <!-- Modal booking -->
  840.     <div class="modal fade bd-example-modal-lg" id="book" tabindex="-1" role="dialog" aria-labelledby="book" aria-hidden="true">
  841.         <div class="modal-dialog modal-dialog-centered" role="document">
  842.             <div class="modal-content">
  843.                 <div class="modal-body">
  844.                     <div class="modal-title-wrap">
  845.                         <h5 class="modal-title">{{ "messaging.booking_request" | trans }}</h5>
  846.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  847.                             <i class="fal fa-times"></i>
  848.                         </button>
  849.                     </div>
  850.                         
  851.                     {% if app.user %}
  853.                     {% if not app.user.isPro %}
  855.                     {% if not traineeHasPendingBooking %}
  856.                     <form action="{{ path('make_booking', {'courseToken': course.token}) }}" method="post" id="booking-request-form">
  857.                         <div class="row">
  858.                             <div class="col-12">
  859.                                 <h4 class="label-form">{{ "course_communication.date" | trans }}</h4>
  860.                                 <input type="hidden" name="begin" id="begin-date">
  861.                                 <input type="hidden" name="end" id="end-date">
  862.                                 <input type="hidden" name="price" id="price">
  863.                                 <input type="hidden" name="course_id" id="course" value="{{ course.id }}">
  864.                                 <div class="booking-date" id="selected-date">
  865.                                     
  866.                                 </div>
  868.                                 <h4 class="label-form">{{ "page_course_detail.number_of_participants" | trans }}</h4>
  869.                                 <div class="participants">
  871.                                     {% for age in course.ages | sort((a, b) => b.id <=> a.id) %}
  872.                                     
  873.                                     {% if age.slug == "adult" %}
  875.                                     <div class="participant-item">
  876.                                         <div class="participant-type">
  877.                                             <span class="type">{{ "page_course_detail.adult" | trans }}</span>
  878.                                             <span class="spec">{{ "page_course_detail.eighteen_and_over" | trans }}</span>
  879.                                         </div>
  880.                                         <div class="participant-input">
  881.                                             <input type="number" id="adult" name="adult" min="0" max="10" class="input-spinner-increment form-control" value="1">
  882.                                         </div>
  883.                                     </div>
  885.                                     {% elseif age.slug == "teen" %}
  887.                                     <div class="participant-item">
  888.                                         <div class="participant-type">
  889.                                             <span class="type">{{ "page_course_detail.teenager" | trans }}</span>
  890.                                             <span class="spec">{{ "page_course_detail.thirteen_seventeen" | trans }}</span>
  891.                                         </div>
  892.                                         <div class="participant-input">
  893.                                             <input type="number" id="ado" name="teen" min="0" max="10" class="input-spinner-increment form-control" value="0">
  894.                                         </div>
  895.                                     </div>
  897.                                     {% elseif age.slug == "child" %}
  899.                                     <div class="participant-item">
  900.                                         <div class="participant-type">
  901.                                             <span class="type">{{ "page_course_detail.child" | trans }}</span>
  902.                                             <span class="spec">{{ "page_course_detail.up_to_thirteen_years" | trans }}</span>
  903.                                         </div>
  904.                                         <div class="participant-input">
  905.                                             <input type="number" id="enfant" name="child" min="0" max="10" class="input-spinner-increment form-control" value="0">
  906.                                         </div>
  907.                                     </div>
  909.                                     {% endif %}
  911.                                     {% endfor %}
  913.                                 </div>
  915.                                 <div class="need-people hide">
  916.                                     <span class="text">{{ "page_course_detail.need_people" | trans }}</span>
  917.                                 </div>
  919.                                 {#
  920.                                 <h4 class="label-form">Total</h4>
  922.                                 <div class="booking-price">
  923.                                     <span id="price">500</span>
  924.                                     <span class="currency">€</span>
  925.                                 </div>
  926.                                 #}
  927.                     
  928.                             </div>
  929.                         </div>
  931.                         <div class="row mt-3">
  932.                             <div class="col-md-12">
  933.                                 <button type="submit" id="submit-booking-request" class="btn main-btn m-auto">{{ "page_course_detail.send_request" | trans }}</button>
  934.                             </div>
  935.                         </div>
  937.                     </form>
  938.                     {% else %}
  939.                     <h4 class="modal-subtitle">Une demande de réservation est en cours.</h4>
  940.                     {% endif %}
  941.                     
  943.                     {% else %}
  945.                     <h4 class="modal-subtitle">{{ "page_course_detail.cant_booking" | trans }}</h4>
  947.                     {% endif %}
  949.                     {% else %}
  951.                     <h4 class="modal-subtitle">{{ "page_course_detail.must_connect_for_booking" | trans }}</h4>
  952.                     <div class="must-login-actions">
  953.                         <a href="{{ path('user_login', {'type': 'trainee'}) }}" class="btn main-btn btn-sm">{{ "footer.login" | trans }}</a>
  954.                         <a href="{{ path('trainee_registration') }}" class="btn main-btn-outline btn-sm">{{ "sign_up.sign_up" | trans }}</a>
  955.                     </div>
  957.                     {% endif %}
  958.                     
  959.                 </div>
  960.             </div>
  961.         </div>
  962.     </div>
  964. {% endblock %}
  966. {% block javascript %}
  968.     
  969.     {{ parent() }}
  970.     {{ encore_entry_script_tags('single-course') }}
  972. {% endblock %}