templates/front/pro/pro-public.html.twig line 1

Open in your IDE?
  1. {% extends "front/base.html.twig" %}
  3. {% block title %}
  4.     {{ pro.proInfo.fullname | capitalize }}
  5. {% endblock %}
  7. {% if pro is instanceof('App\\Entity\\Coach') %}
  8.     {% set type = 'coach' %}
  9. {% elseif pro is instanceof('App\\Entity\\Club') %}
  10.     {% set type = 'club' %}
  11. {% elseif pro is instanceof('App\\Entity\\Operator') %}
  12.     {% set type = 'operator' %}
  13. {% endif %}
  15. {# Profile photo #}
  16. {% if pro.photo is fileexists('avatar_directory') %}
  17.     {% set avatar = pro.photo %}
  18. {% else %}
  19.     {% set avatar = 'default-profile.png' %}
  20. {% endif %}
  22. {# Cover photo #}
  23. {% if pro.proInfo.coverPhoto and pro.proInfo.coverPhoto is fileexists('avatar_directory') %}
  24.     {% set cover = pro.proInfo.coverPhoto %}
  25. {% else %}
  26.     {% set cover = 'cover.png' %}
  27. {% endif %}
  29. {% block stylesheets %}
  30. {% if inactive %}
  31.     <style>
  32.         body {
  33.             overflow: hidden; /* Hide scrollbars */
  34.         }
  35.     </style>
  36. {% endif %}
  37. {% endblock %}
  39. {% block body %}   
  40.     <section class="mt-0 first-section pro-public overflow-hidden-mobile" id="pro-detail">
  41.         <div class="container-fluid">
  42.             <div class="row justify-content-center">
  43.                 <div class="col-md-12 wrap-col">
  44.                     <div class="cover-wrapper">
  46.                         {% if app.user and app.user == pro %}
  47.                             <div class="preview-edit">
  48.                                 <a href="{{ path('pro_page') }}" class="btn main-btn btn-sm">{{ 'pro_page.edit_page' | trans }}</a>
  49.                                 {% if app.user.proInfo.pageVisible == false %}
  50.                                     <form action="{{ path('publish_my_page') }}" method="post">
  51.                                         <button type="submit" class="btn second-btn btn-sm">{{ 'pro_page.publish_page' | trans }}</button>
  52.                                     </form>
  53.                                 {% endif %}
  54.                             </div>
  55.                         {% endif %}
  57.                         <div class="cover-content">
  58.                             <img loading="lazy" class="cover-image" src="{{ asset('/images/profiles/' ~ cover) }}">
  59.                         </div>
  60.                     </div>
  62.                 </div>
  63.             </div>
  64.         </div>
  66.         <div class="container-fluid">
  67.             <div class="row">
  68.                 <div class="public-page-sidebar-col pro-card-col">
  69.                     <div class="pro-sidebar {{ type }}" id="pro-details-sidebar">
  70.                         <div class="pro-profile-wrap">
  71.                             <div class="profile-wrapper">
  72.                                 <img loading="lazy" class="profile-image" src="{{ asset('/images/profiles/' ~ avatar) }}">    
  73.                             </div>
  74.                         </div>
  75.                         <div class="like-wrap">
  76.                             <button class="btn btn-share" data-toggle="modal" data-target="#share-socials">
  77.                                 <i class="fal fa-arrow-square-up"></i>
  78.                             </button>
  79.                             {% if is_granted('ROLE_TRAINEE') %}
  80.                             <a href="{{ path('add_pro_favorite', {'id': pro.id}) }}" class="btn btn-like" data-update data-token="{{ csrf_token('favorite' ~ pro.id) }}">
  81.                                 <i class="fas fa-heart {% if app.user.isProFavorite(pro) %}favorite{% endif %}"></i>
  82.                             </a>
  83.                             {% else %}
  84.                             <button type="button" class="btn btn-like" data-toggle="modal" data-target="#add-to-favorite">
  85.                                 <i class="fas fa-heart"></i>
  86.                             </button>
  87.                             {% endif %}
  88.                         </div>
  90.                         {# <img loading="lazy" class="pro-profile-pic" src="{{ asset('/images/profiles/' ~ avatar) }}"> #}
  92.                         <h1 class="pro-name">{{ pro.proInfo.fullname }}</h1>
  94.                         <div class="pro-review">
  95.                             {% set averageNotes = getAverageNotes(pro)%}
  96.                             {% set average = averageNotes.total %}
  97.                             {% if average != 0 %}
  98.                                 <p class="average-note">{{ average }}</p>
  99.                                 {% for i in 1..5 %}
  100.                                     {% if average >= i %}
  101.                                         <i class="fas fa-star"></i>
  102.                                     {% else %}
  103.                                         {% if average > (i - 1) %}
  104.                                             <i class="fas fa-star-half-alt"></i>
  105.                                         {% else %}
  106.                                             <i class="far fa-star"></i>                                    
  107.                                         {% endif %}
  108.                                     {% endif %}
  109.                                 {% endfor %}
  110.                             {% else %}
  111.                                 {% for i in 1..5 %}
  112.                                 
  113.                                 <i class="fas fa-star grey-star"></i>
  114.                                     
  115.                                 {% endfor %}
  116.                             {% endif %}
  117.                             <span class="pro-review-note" data-toggle="modal" data-target="#view-notes">({{ averageNotes.count }})</span>
  118.                         </div>
  120.                         {% if pro is instanceof('App\\Entity\\Coach') %}
  121.                             <div class="pro-extra-infos">
  122.                                 <i class="fas fa-circle"></i>
  123.                                 <span class="pro-extra-text">
  124.                                     Mobilité:
  125.                                     {% if pro.isMobile %}
  126.                                         {{ 'pro_page.mobile' | trans | capitalize }}
  127.                                     {% elseif not pro.isMobile %}
  128.                                         {{ 'pro_page.static' | trans | capitalize }}
  129.                                     {% endif %}
  130.                                 </span>
  131.                             </div>
  132.                         {% endif %}
  134.                         <div class="pro-extra-infos">
  135.                             <i class="fal fa-map-marker-alt"></i>
  136.                             <span class="pro-extra-text">{{ pro.address.fullAddress }}</span>
  137.                         </div>
  138.                         
  139.                         {% if pro.telephone and pro.phoneCode %}
  140.                         <div class="pro-extra-infos">
  141.                             <i class="fal fa-phone-alt"></i>
  142.                             {% set phone = pro.phoneCode ~ pro.telephone %}
  143.                             <a class="pro-extra-text" href="tel:{{ phone }}">{{ phone }}</a>
  144.                         </div>
  145.                         {% endif %}
  146.                         <div class="pro-extra-infos email">
  147.                             <i class="fal fa-envelope"></i>
  148.                             <a class="pro-extra-text" href="mailto:{{ pro.proInfo.contactEmail }}">{{ 'pro_page.send_mail' | trans }}</a>
  149.                         </div>
  150.                         {% if pro.proInfo.website %}
  151.                         <div class="pro-extra-infos">
  152.                             <i class="fal fa-desktop"></i>
  153.                             <a class="pro-extra-text" href={{ pro.proInfo.website }} target="_blank">
  154.                                 {{ 'pro_page.visit_website' | trans }}
  155.                             </a>
  156.                         </div>
  157.                         {% endif %}
  158.                         {% if pro.languages | length > 0 %}
  159.                         <div class="pro-extra-infos-2">
  160.                             <p class="extra-info-title">{{ 'pro_page.languages' | trans | capitalize }}</p>
  161.                             <span class="pro-languages">
  162.                                 {% for language in pro.languages %}
  163.                                     <img loading="lazy" src="{{ asset('/images/flag/' ~ language.slug ~ '.png') }}" alt="{{ language.name }}">
  164.                                 {% endfor %}
  165.                             </span>
  166.                         </div>
  167.                         {% endif %}
  168.                         {% if pro.proInfo.facebook or pro.proInfo.twitter or pro.proInfo.instagram or pro.proInfo.linkedin or pro.proInfo.youtube %}
  169.                         <div class="pro-extra-infos-2">
  170.                             <p class="extra-info-title">{{ 'pro_page.social_network' | trans | capitalize }}</p>
  171.                             <span class="pro-social-media">
  172.                                 {% if pro.proInfo.facebook != null %}
  173.                                     <a href="{{ pro.proInfo.facebook }}" class="social-media-item"  target="_blank">
  174.                                         <i class="fab fa-facebook-f"></i>
  175.                                     </a>
  176.                                 {% endif %}
  177.                                 {% if pro.proInfo.twitter != null %}
  178.                                     <a href="{{ pro.proInfo.twitter }}" class="social-media-item" target="_blank">
  179.                                         <i class="fab fa-x-twitter"></i>
  180.                                     </a>
  181.                                 {% endif %}
  182.                                 {% if pro.proInfo.instagram != null %}
  183.                                     <a href="{{ pro.proInfo.instagram }}" class="social-media-item" target="_blank">
  184.                                         <i class="fab fa-instagram"></i>
  185.                                     </a>
  186.                                 {% endif %}
  187.                                 {% if pro.proInfo.linkedin != null %}
  188.                                     <a href="{{ pro.proInfo.linkedin }}" class="social-media-item" target="_blank">
  189.                                         <i class="fab fa-linkedin"></i>
  190.                                     </a>
  191.                                 {% endif %}
  192.                                 {% if pro.proInfo.youtube != null %}
  193.                                     <a href="{{ pro.proInfo.youtube }}" class="social-media-item" target="_blank">
  194.                                         <i class="fab fa-youtube"></i>
  195.                                     </a>
  196.                                 {% endif %}
  197.                                 {% if pro.proInfo.twitch != null %}
  198.                                     <a href="{{ pro.proInfo.twitch }}" class="social-media-item" target="_blank">
  199.                                         <i class="fab fa-twitch"></i>
  200.                                     </a>
  201.                                 {% endif %}
  202.                                 {% if pro.proInfo.tiktok != null %}
  203.                                     <a href="{{ pro.proInfo.tiktok }}" class="social-media-item" target="_blank">
  204.                                         <i class="fab fa-tiktok"></i>
  205.                                     </a>
  206.                                 {% endif %}
  207.                             </span>
  208.                         </div>
  209.                         {% endif %}
  211.                         {% if not app.user or (app.user and not app.user.isPro) %}
  213.                         <hr>
  215.                         <button class="btn main-btn w-100" data-toggle="modal" data-target="#contact">{{ 'pro_page.contact_button' | trans | capitalize }}</button>
  217.                         {% endif %}
  219.                     </div>
  220.                 </div>
  222.                 {% if not app.user or (app.user and not app.user.isPro) %}
  224.                 {% include "front/pro/_contact-modal.html.twig" with {"pro": pro, "from": "pro"} %}
  226.                 {% endif %}
  227.                 
  229.                 <!-- Modal social media share -->
  230.                 <div class="modal fade" id="share-socials" tabindex="-1" role="dialog" aria-labelledby="share-socials" aria-hidden="true">
  231.                     <div class="modal-dialog modal modal-dialog-centered" role="document">
  232.                         <div class="modal-content">
  233.                             <div class="modal-body">
  234.                                 <div class="modal-title-wrap">
  235.                                     <h5 class="modal-title">{{ "pro_page.share_pro" | trans }}</h5>
  236.                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  237.                                         <i class="fal fa-times"></i>
  238.                                     </button>
  239.                                 </div>
  240.                                 <div class="row" id="social-networks">
  241.                                     <div class="col-3">
  242.                                     <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('view_pro', {'type': type, 'slug': pro.slug}) }}" target="_blank">
  243.                                         <div class="card">
  244.                                             <div id="icon">
  245.                                                 <i class="fab fa-facebook-f"></i>
  246.                                             </div>
  247.                                         </div>
  248.                                     </a>
  249.                                     </div>
  250.                                     <div class="col-3">
  251.                                         <a href="https://twitter.com/intent/tweet?text={{ url('view_pro', {'type': type, 'slug': pro.slug}) }}" target="_blank">
  252.                                             <div class="card">
  253.                                                 <div id="icon">
  254.                                                     <i class="fab fa-x-twitter"></i>
  255.                                                 </div>
  256.                                             </div>
  257.                                         </a>
  258.                                     </div>
  259.                                     <div class="col-3">
  260.                                         <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('view_pro', {'type': type, 'slug': pro.slug}) }}&title={{ pro.proInfo.fullname }}" target="_blank">
  261.                                             <div class="card">
  262.                                                 <div id="icon">
  263.                                                     <i class="fab fa-linkedin-in"></i>
  264.                                                 </div>
  265.                                             </div>
  266.                                         </a>
  267.                                     </div>
  268.                                     <div class="col-3">
  269.                                         <a href="https://api.whatsapp.com/send?&text={{ url('view_pro', {'type': type, 'slug': pro.slug}) }}" target="_blank">
  270.                                             <div class="card">
  271.                                                 <div id="icon">
  272.                                                     <i class="fab fa-whatsapp"></i>
  273.                                                 </div>
  274.                                             </div>
  275.                                         </a>
  276.                                     </div>
  277.                                 </div>
  278.                             </div>
  279.                         </div>
  280.                     </div>
  281.                 </div>
  282.                 
  283.                 
  285.                 <div class="public-page-content-col pro-card-col">
  286.                     
  287.                     <div class="row pro-row">
  289.                         {% if pro.proInfo.gallery | length > 0 and pro.proInfo.videos | length > 0 %}
  290.                         {% set mediaCol = 'col-lg-12 col-xl-6' %}
  291.                         {% else %}
  292.                         {% set mediaCol = 'col-lg-12' %}
  293.                         {% endif %}
  295.                         {% if pro.proInfo.gallery | length > 0 %}                    
  297.                         <div class="{{ mediaCol }} pro-col">
  298.                             <div class="pro-content-card h-100">
  299.                                 <h3 class="pro-content-card-title">{{ 'pro_page.photos' | trans | capitalize }}</h3>
  300.                                 <div class="pro-content-box media align-items-start">
  301.                                     <div class="row">
  302.                                         {% if pro.proInfo.gallery | length > 6 %}
  303.                                         <div class="col-12 text-center p-0">
  304.                                             <a data-target="#all-photos" class="all-media mb-2" data-toggle="modal">{{ 'pro_page.all_photos' | trans }}</a>
  305.                                         </div>
  306.                                         {% endif %}
  307.                                         <div class="col-12 p-0">
  308.                                             <div class="row public-photos">
  310.                                             {% for photo in pro.proInfo.gallery | reverse | slice(0, 7) %}
  312.                                                 {% if loop.index <= 6 %}
  313.                                                 
  314.                                                 <div class="img-col col-6 col-sm-4 col-lg-4">
  315.                                                     <div class="photo-item">
  316.                                                         <img loading="lazy" data-target="#all-photos" data-toggle="modal" src="{{ asset('/images/gallery/' ~ photo.name) }}" alt="{{ photo.name }}">
  317.                                                         {% if pro.proInfo.gallery | length > 6 and loop.index == 6 %}
  318.                                                             {% set galleryRest = pro.proInfo.gallery | length - 6 %}
  319.                                                             <div class="more-photos" data-target="#all-photos" data-toggle="modal">
  320.                                                                 <span>+
  321.                                                                     {{ galleryRest }}</span>
  322.                                                             </div>
  323.                                                         {% endif %}
  324.                                                     </div>
  325.                                                 </div>
  327.                                                 {% endif %}
  329.                                             {% endfor %}
  331.                                             </div>
  332.                                         </div>
  333.                                     </div>
  334.                                 </div>
  336.                                 <!-- Modal see all photos -->
  337.                                 <div class="modal fade bd-example-modal-xl" id="all-photos" tabindex="-1" role="dialog" aria-labelledby="all-photos" aria-hidden="true">
  338.                                     <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  339.                                         <div class="modal-content">
  340.                                             <div class="modal-body">
  341.                                                 <div class="modal-title-wrap">
  342.                                                     <h5 class="modal-title">{{ 'pro_page.all_photos' | trans }}</h5>
  343.                                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  344.                                                         <i class="fal fa-times"></i>
  345.                                                     </button>
  346.                                                 </div>
  347.                                                 <div class="row public-photos">
  348.                                                     {% for photo in pro.proInfo.gallery | reverse %}
  349.                                                         <div class="img-col col-6 col-sm-6 col-md-4 col-xl-3">
  350.                                                             <div class="photo-item">
  351.                                                                 <a data-fslightbox href="{{ asset('/images/gallery/' ~ photo.name) }}">
  352.                                                                     <img loading="lazy" src="{{ asset('/images/gallery/' ~ photo.name) }}" alt="image">
  353.                                                                 </a>
  354.                                                             </div>
  355.                                                         </div>
  356.                                                     {% endfor %}
  357.                                                 </div>
  358.                                             </div>
  359.                                         </div>
  360.                                     </div>
  361.                                 </div>
  362.                             </div>
  363.                         </div>
  365.                         {% endif %}
  367.                         {% if pro.proInfo.videos | length > 0 %}
  369.                         {% if pro.proInfo.gallery | length > 0 %}
  370.                         
  371.                         {% set videoItemCol = 'col-12 col-sm-6 col-md-6 col-lg-6' %}
  373.                         {% else %}
  374.                             
  375.                         {% set videoItemCol = 'col-12 col-sm-6 col-md-6 col-lg-3' %}
  377.                         {% endif %}
  379.                         <div class="{{ mediaCol }} pro-col">
  380.                             <div class="pro-content-card h-100">
  381.                                 <h3 class="pro-content-card-title">{{ 'pro_page.videos' | trans | capitalize }}</h3>
  382.                                 <div class="pro-content-box media align-items-start">
  383.                                     {% if pro.proInfo.videos | length > 0 %}
  384.                                         <div class="row">
  385.                                             {% if pro.proInfo.videos | length > 4 %}
  386.                                             
  387.                                             <div class="col-12 text-center">
  388.                                                 <a data-target="#all-videos" class="all-media" data-toggle="modal" class="col-12 text-center">{{ 'pro_page.all_videos' | trans }}</a>
  389.                                             </div>
  390.                                             {% endif %}
  391.                                             {% for video in pro.proInfo.videos | reverse | slice(0, 4) %}
  393.                                                 <div class="video-col {{ videoItemCol }}">
  394.                                                     <div class="video-thumbnail">
  395.                                                     {% if video.type == 'youtube' %}
  396.                                                         <img loading="lazy" src="http://i1.ytimg.com/vi/{{ video.videoId }}/mqdefault.jpg" alt=" {{ video.videoId }}">
  397.                                                     {% else %}
  398.                                                         <img loading="lazy" srcset="https://vumbnail.com/{{ video.videoId }}.jpg 640w" alt="{{ video.videoId }}" />
  399.                                                     {% endif %}
  400.                                                     
  401.                                                     <button class="play" data-toggle="modal" data-target="#watch-video-{{ video.id }}">
  402.                                                         <i class="fal fa-play-circle"></i>
  403.                                                     </button>
  404.                                                     {% if pro.proInfo.videos | length > 4 and loop.last %}
  405.                                                         {% set videoRest = pro.proInfo.videos | length - 4 %}
  406.                                                         <div class="more-photos" data-target="#all-videos" data-toggle="modal">
  407.                                                             <span>+
  408.                                                                 {{ videoRest }}</span>
  409.                                                         </div>
  410.                                                     {% endif %}
  411.                                                     </div>
  412.                                                 </div>
  413.                                             {% endfor %}
  414.                                         </div>
  415.                                     {% else %}
  416.                                         <p class="empty-media">0
  417.                                             {{ 'pro_page.video' | trans | capitalize }}</p>
  418.                                     {% endif %}
  419.                                 </div>
  421.                                 <!-- Modal see all video -->
  422.                                 <div class="modal fade bd-example-modal-xl" id="all-videos" tabindex="-1" role="dialog" aria-labelledby="all-videos" aria-hidden="true">
  423.                                     <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  424.                                         <div class="modal-content">
  425.                                             <div class="modal-body">
  426.                                                 <div class="modal-title-wrap">
  427.                                                     <h5 class="modal-title">{{ 'pro_page.all_videos' | trans }}</h5>
  428.                                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  429.                                                         <i class="fal fa-times"></i>
  430.                                                     </button>
  431.                                                 </div>
  433.                                                 <div class="row">
  434.                                                     {% for video in pro.proInfo.videos | reverse %}
  435.                                                         <div class="video-col col-12 col-sm-6 col-md-4 col-xl-3">
  436.                                                             <div class="video-thumbnail">
  437.                                                                 {% if video.type == 'youtube' %}
  438.                                                                     <img loading="lazy" src="http://i1.ytimg.com/vi/{{ video.videoId }}/mqdefault.jpg" alt=" {{ video.videoId }}">
  439.                                                                 {% else %}
  440.                                                                     <img loading="lazy" srcset="https://vumbnail.com/{{ video.videoId }}.jpg 640w" alt="{{ video.videoId }}" />
  441.                                                                 {% endif %}
  442.                                                                 <button class="play" data-toggle="modal" data-target="#watch-video-{{ video.id }}">
  443.                                                                     <i class="fal fa-play-circle"></i>
  444.                                                                 </button>
  445.                                                             </div>
  446.                                                         </div>
  447.                                                     {% endfor %}
  448.                                                 </div>
  449.                                             </div>
  450.                                         </div>
  451.                                     </div>
  452.                                 </div>
  453.                             </div>
  454.                         </div>
  456.                         {% endif %}
  458.                         {% for video in pro.proInfo.videos %}
  459.                             <!-- Modal watch video -->
  460.                             <div class="modal fade watch-video-modal" id="watch-video-{{ video.id }}" tabindex="-1" role="dialog" aria-labelledby="video" aria-hidden="true">
  461.                                 <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  462.                                     <div class="modal-content">
  463.                                         <div class="modal-body">
  464.                                             <div class="modal-title-wrap">
  465.                                                 <h5 class="modal-title">{{ 'pro_page.watch_video' | trans }}</h5>
  466.                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  467.                                                     <i class="fal fa-times"></i>
  468.                                                 </button>
  469.                                             </div>
  470.                                             <div class="row">
  471.                                                 {% if video.type == 'youtube' %}
  472.                                                     <iframe class="yt_player_iframe" width="640" height="360"  id="watched-video" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/{{ video.videoId }}"></iframe>
  473.                                                 {% else %}
  474.                                                     <iframe class="vi_player_iframe" width="640" height="360"  id="watched-video" frameborder="0" allowfullscreen src="https://player.vimeo.com/video/{{ video.videoId }}"></iframe>
  475.                                                 {% endif %}
  476.                                             </div>
  477.                                         </div>
  478.                                     </div>
  479.                                 </div>
  480.                             </div>
  481.                         {% endfor %}
  482.                     </div>
  484.                     {% if pro is instanceof('App\\Entity\\Coach') %}
  486.                         {% if proDescription.description != null %}
  488.                         <div class="row pro-row">
  489.                             <div class="col-lg-12 pro-col">
  490.                                 <div class="pro-content-card">
  491.                                     <h3 class="pro-content-card-title">{{ 'pro_page.about_me' | trans }}</h3>
  492.                                     <div class="pro-content-box description">
  493.                                         <p class="description-text">
  494.                                             {{ proDescription.description |nl2br }}
  495.                                         </p>
  496.                                     </div>
  497.                                 </div>
  498.                             </div>
  499.                         </div>
  501.                         {% endif %}
  503.                         <div class="row pro-row">
  504.                             <div class="col-lg-6 pro-col">
  505.                                 <div class="pro-content-card">
  506.                                     <h3 class="pro-content-card-title">{{ 'pro_page.sports' | trans | capitalize }}</h3>
  507.                                     <div class="pro-content-box sports">
  508.                                         {% for sport in pro.proInfo.sports %}
  509.                                             <span class="coach-sport-item">{{ ("sport_name." ~ sport.slug) | trans }}</span>
  510.                                         {% endfor %}
  511.                                         {% for sport in sports %}
  512.                                             {% if sport not in pro.proInfo.sports %}
  513.                                                 <span class="coach-sport-item not-sport-item">{{ ("sport_name." ~ sport.slug) | trans }}</span>
  514.                                             {% endif %}
  515.                                         {% endfor %}
  516.                                     </div>
  517.                                 </div>
  518.                             </div>
  519.                             <div class="col-lg-6 pro-col">
  520.                                 <div class="pro-content-card">
  521.                                     <h3 class="pro-content-card-title">{{ 'pro_page.areas' | trans | capitalize }}</h3>
  522.                                     <div class="pro-content-box areas">
  524.                                         {% for key, splittedArea in splittedAreas %}
  526.                                         <div class="area-wrap">
  528.                                             <div class="title-wrap">
  529.                                                 <h5 class="title">{{ key | countryName(app.request.locale) }}</h5>
  530.                                             </div>
  532.                                             {% for area in splittedArea %}
  533.                                             
  534.                                             {% if area.city == null and splittedArea | length == 1 %}
  535.                                             
  536.                                             <div class="area-item">
  537.                                                 <i class="fal fa-map-marker-alt"></i>
  538.                                                 <span class="city">{{ 'pro_page.area_country' | trans }}</span>
  539.                                             </div>
  541.                                             {% else %}
  542.                                                 
  543.                                             <div class="area-item">
  544.                                                 <i class="fal fa-map-marker-alt"></i>
  545.                                                 <span class="city">{{ area.city }}</span>
  546.                                             </div>
  548.                                             {% endif %}
  551.                                             {% endfor %}
  553.                                         </div>
  555.                                         {% endfor %}
  557.                                     </div>
  558.                                 </div>
  559.                             </div>
  560.                         </div>
  562.                         {% if pro.coachInfo.experience | length > 0 or pro.coachInfo.formation | length > 0 %}
  564.                         <div class="row pro-row">
  565.                             <div class="col-lg-12 pro-col">
  566.                                 <div class="pro-content-card">
  567.                                     <h3 class="pro-content-card-title">{{ 'pro_page.experience_formation' | trans | capitalize }}
  568.                                     </h3>
  569.                                     <div class="pro-content-box formation-experience align-items-start">
  570.                                         <div class="pro-experiences">
  572.                                             {% for experience in pro.coachInfo.experience %}
  574.                                                 <div class="experience-item">
  575.                                                     <h4 class="experience-job">{{ experience.jobTitle }}</h4>
  576.                                                     <span class="experience-domain">{{ experience.sector }}</span>
  577.                                                     <span class="experience-address">
  578.                                                         <i class="fal fa-map-marker-alt"></i>
  579.                                                         {{ experience.address }}
  580.                                                     </span>
  581.                                                     <span class="experience-period">
  582.                                                         <i class="far fa-calendar-alt"></i>
  583.                                                         {{ experience.begin }}
  584.                                                         -
  585.                                                         {{ experience.end }}
  586.                                                     </span>
  587.                                                     <p class="expererience-description">
  588.                                                         {{ experience.description |nl2br }}
  589.                                                     </p>
  590.                                                 </div>
  591.                                             {% endfor %}
  593.                                         </div>
  594.                                         <div class="pro-formations mt-3">
  596.                                             {% for formation in pro.coachInfo.formation %}
  598.                                                 <div class="formation-item">
  599.                                                     <h4 class="formation-organism">{{ formation.organisation }}</h4>
  600.                                                     <span class="formation-diploma">{{ formation.diploma }}</span>
  601.                                                     <span class="formation-period">{{ formation.begin }}
  602.                                                         -
  603.                                                         {{ formation.end }}</span>
  604.                                                 </div>
  605.                                             {% endfor %}
  606.                                         </div>
  607.                                     </div>
  608.                                 </div>
  609.                             </div>
  610.                         </div>
  611.                     {% endif %}
  613.                     {% elseif pro is instanceof('App\\Entity\\Operator') and proDescription.description != null %}
  615.                         <div class="row pro-row">
  616.                             <div class="col-lg-12 pro-col">
  617.                                 <div class="pro-content-card">
  618.                                     <h3 class="pro-content-card-title">{{ 'pro_page.about_us' | trans }}</h3>
  619.                                     <div class="pro-content-box description">
  620.                                         <p class="description-text">
  621.                                             {{ proDescription.description |nl2br }}
  622.                                         </p>
  623.                                     </div>
  624.                                 </div>
  625.                             </div>
  626.                         </div>
  628.                         <div class="row pro-row">
  629.                             <div class="col-lg-6 pro-col">
  630.                                 <div class="pro-content-card">
  631.                                     <h3 class="pro-content-card-title">{{ 'pro_page.sports' | trans | capitalize }}</h3>
  632.                                     <div class="pro-content-box sports">
  633.                                         {% for sport in pro.proInfo.sports %}
  634.                                             <span class="coach-sport-item">{{ ("sport_name." ~ sport.slug) | trans }}</span>
  635.                                         {% endfor %}
  636.                                         {% for sport in sports %}
  637.                                             {% if sport not in pro.proInfo.sports %}
  638.                                                 <span class="coach-sport-item not-sport-item">{{ ("sport_name." ~ sport.slug) | trans }}</span>
  639.                                             {% endif %}
  640.                                         {% endfor %}
  641.                                     </div>
  642.                                 </div>
  643.                             </div>
  644.                             <div class="col-lg-6 pro-col">
  645.                                 <div class="pro-content-card">
  646.                                     <h3 class="pro-content-card-title">{{ 'pro_page.areas' | trans | capitalize }}</h3>
  647.                                     <div class="pro-content-box areas">
  649.                                         {% for key, splittedArea in splittedAreas %}
  651.                                         <div class="area-wrap">
  653.                                             <div class="title-wrap">
  654.                                                 <h5 class="title">{{ key | countryName(app.request.locale) }}</h5>
  655.                                             </div>
  657.                                             {% for area in splittedArea %}
  658.                                             
  659.                                             {% if area.city == null and splittedArea | length == 1 %}
  660.                                             
  661.                                             <div class="area-item">
  662.                                                 <i class="fal fa-map-marker-alt"></i>
  663.                                                 <span class="city">{{ 'pro_page.area_country' | trans }}</span>
  664.                                             </div>
  666.                                             {% else %}
  667.                                                 
  668.                                             <div class="area-item">
  669.                                                 <i class="fal fa-map-marker-alt"></i>
  670.                                                 <span class="city">{{ area.city }}</span>
  671.                                             </div>
  673.                                             {% endif %}
  676.                                             {% endfor %}
  678.                                         </div>
  680.                                         {% endfor %}
  682.                                     </div>
  683.                                 </div>
  684.                             </div>
  685.                         </div>
  687.                     {% elseif pro is instanceof('App\\Entity\\Club')  %}
  689.                         {% if proDescription.description != null %}
  690.                             <div class="row pro-row">
  691.                                 <div class="col-lg-12 pro-col">
  692.                                     <div class="pro-content-card">
  693.                                         <h3 class="pro-content-card-title">{{ 'pro_page.about_us' | trans }}</h3>
  694.                                         <div class="pro-content-box description">
  695.                                             <p class="description-text">
  696.                                                 {{ proDescription.description |nl2br }}
  697.                                             </p>
  698.                                         </div>
  699.                                     </div>
  700.                                 </div>
  701.                             </div>
  702.                         {% endif %}
  704.                         <div class="row pro-row">
  705.                             <div class="col-lg-12 pro-col">
  706.                                 <div class="pro-content-card">
  707.                                     <h3 class="pro-content-card-title">{{ 'pro_page.availabilities' | trans | capitalize }}</h3>
  708.                                     
  709.                                     <div class="pro-content-box sport-availabilities">
  710.                                         <div class="availability-header">
  711.                                             <span class="sport"></span>
  712.                                             <div class="month-list">
  713.                                                 <span class="month">{{ "short_month.january" | trans }}</span>
  714.                                                 <span class="month">{{ "short_month.february" | trans }}</span>
  715.                                                 <span class="month">{{ "short_month.march" | trans }}</span>
  716.                                                 <span class="month">{{ "short_month.april" | trans }}</span>
  717.                                                 <span class="month">{{ "short_month.may" | trans }}</span>
  718.                                                 <span class="month">{{ "short_month.june" | trans }}</span>
  719.                                                 <span class="month">{{ "short_month.july" | trans }}</span>
  720.                                                 <span class="month">{{ "short_month.august" | trans }}</span>
  721.                                                 <span class="month">{{ "short_month.september" | trans }}</span>
  722.                                                 <span class="month">{{ "short_month.october" | trans }}</span>
  723.                                                 <span class="month">{{ "short_month.november" | trans }}</span>
  724.                                                 <span class="month">{{ "short_month.december" | trans }}</span>
  725.                                             </div>
  726.                                         </div>
  728.                                         {% for availability in pro.availabilities %}
  730.                                         <div class="availability-content">
  731.                                             <span class="pro-sport-item">{{ ("sport_name." ~ availability.sport.slug) | trans }}</span>
  732.                                             <div class="availability-list">
  734.                                                 {% for month in months %}
  736.                                                 <span class="item">
  738.                                                     {% if month in availability.availabilities | join(', ')  %}
  739.                                                     
  740.                                                         <i class="fas fa-check"></i>
  742.                                                     {% else %}
  744.                                                         <i class="fas fa-times"></i>
  746.                                                     {% endif %}
  748.                                                 </span>
  750.                                                 {% endfor %}
  751.                                                 
  752.                                             </div>
  753.                                         </div>
  755.                                         {% endfor %}
  757.                                     </div>
  758.                                         
  759.                                 </div>
  760.                             </div>
  761.                         </div>
  762.                     {% endif %}
  764.                     {% if pro.proInfo.sponsors | length != 0 %}
  765.                         <div class="row pro-row">
  766.                             <div class="col-lg-12 pro-col">
  767.                                 <div class="pro-content-card">
  768.                                     <h3 class="pro-content-card-title">{{ 'pro_page.sponsors' | trans | capitalize }}
  769.                                     </h3>
  770.                                     <div class="pro-content-box sponsor">
  772.                                         <div class="pro-sponsor-slider">
  774.                                             {% for sponsor in pro.proInfo.sponsors %}
  776.                                                 <div class="pro-sponsor-item">
  777.                                                     <div class="pro-sponsor-img">
  778.                                                         <img loading="lazy" src="{{ asset('/images/partners/' ~ sponsor.logo) }}" alt="{{ sponsor.name }}">
  779.                                                     </div>
  780.                                                     <span class="pro-sponsor-name">{{ sponsor.name }}</span>
  781.                                                 </div>
  782.                                             {% endfor %}
  783.                                         </div>
  784.                                     </div>
  785.                                 </div>
  786.                             </div>
  787.                         </div>
  788.                     {% endif %}
  790.                     {% if pro is instanceof('App\\Entity\\Operator') %}
  791.                         {% if pro.proInfo.labels | length != 0 %}
  792.                             <div class="row pro-row">
  793.                                 <div class="col-lg-12 pro-col">
  794.                                     <div class="pro-content-card">
  795.                                         <h3 class="pro-content-card-title">{{ 'pro_page.labels' | trans | capitalize }}
  796.                                         </h3>
  797.                                         <div class="pro-content-box label">
  799.                                             <div class="pro-label-slider">
  801.                                                 {% for label in pro.proInfo.labels %}
  803.                                                     <div class="pro-label-item">
  804.                                                         <div class="pro-label-img">
  805.                                                             <img loading="lazy" src="{{ asset('/images/labels/' ~ label.logo) }}" alt="{{ label.name }}">
  806.                                                         </div>
  807.                                                         <span class="pro-label-name">{{ label.name }}</span>
  808.                                                     </div>
  809.                                                 {% endfor %}
  810.                                             </div>
  811.                                         </div>
  812.                                     </div>
  813.                                 </div>
  814.                             </div>
  815.                         {% endif %}
  816.                     {% endif %}
  818.                     {% if pro is instanceof('App\\Entity\\Club') %}
  819.                         <div class="row pro-row">
  820.                             <div class="col-lg-12 pro-col">
  821.                                 <div class="pro-content-card">
  822.                                     
  823.                                     {% if pro.clubInfo.insurance or pro.clubInfo.swimmingpool or pro.clubInfo.gym or pro.clubInfo.seminarRoom or pro.clubInfo.restaurant or pro.clubInfo.bar %}
  825.                                     <h3 class="pro-content-card-title">{{ 'pro_page.about_club' | trans }}</h3>
  826.                                     
  827.                                     <div class="club-infrastructures">
  828.                                         {% if pro.clubInfo.insurance %}
  829.                                             <div class="infrastructure-item">
  830.                                                 <img loading="lazy" src="{{ asset('/images/icons/assurance.svg') }}">
  831.                                                 <span class="infrastructure-text">{{ "pro_page.insurance" | trans }}</span>
  832.                                             </div>
  833.                                         {% endif %}
  834.                                         {% if pro.clubInfo.swimmingpool %}
  835.                                             <div class="infrastructure-item">
  836.                                                 <img loading="lazy" src="{{ asset('/images/icons/piscine.svg') }}">
  837.                                                 <span class="infrastructure-text">{{ "pro_page.swimmingpool" | trans }}</span>
  838.                                             </div>
  839.                                         {% endif %}
  840.                                         {% if pro.clubInfo.gym %}
  841.                                             <div class="infrastructure-item">
  842.                                                 <img loading="lazy" src="{{ asset('/images/icons/training.svg') }}">
  843.                                                 <span class="infrastructure-text">{{ "pro_page.gym" | trans }}</span>
  844.                                             </div>
  845.                                         {% endif %}
  846.                                         {% if pro.clubInfo.seminarRoom %}
  847.                                             <div class="infrastructure-item">
  848.                                                 <img loading="lazy" src="{{ asset('/images/icons/seminar-room.svg') }}">
  849.                                                 <span class="infrastructure-text">{{ "pro_page.seminar" | trans }}</span>
  850.                                             </div>
  851.                                         {% endif %}
  852.                                         {% if pro.clubInfo.restaurant %}
  853.                                             <div class="infrastructure-item">
  854.                                                 <img loading="lazy" src="{{ asset('/images/icons/restaurant.svg')}}">
  855.                                                 <span class="infrastructure-text">{{ "pro_page.restaurant" | trans }}</span>
  856.                                             </div>
  857.                                         {% endif %}
  858.                                         {% if pro.clubInfo.bar %}
  859.                                             <div class="infrastructure-item">
  860.                                                 <img loading="lazy" src="{{ asset('/images/icons/bar.svg') }}">
  861.                                                 <span class="infrastructure-text">{{ "pro_page.bar" | trans }}</span>
  862.                                             </div>
  863.                                         {% endif %}
  864.                                     </div>
  866.                                     {% endif %}
  868.                                     <h3 class="pro-content-card-title mt-3">{{ "page_course_detail.fields_tables" | trans }}</h3>
  870.                                     <div class="club-infrastructures terrains">
  871.                                     
  872.                                         {% for court in pro.clubInfo.courtInfos %}
  874.                                             {% if court.nbOpen > 0 or court.nbSemiOpen > 0 or court.nbCovered > 0 %}
  876.                                             <div class="infrastructure-item">
  877.                                                 <img loading="lazy" src="{{ asset('/images/icons/' ~ court.sport.icon ) }}">
  878.                                                 <span class="infrastructure-text">
  879.                                                     {{ ("sport_name." ~ court.sport.slug) | trans }}</span>
  880.                                                 <div class="terrains-count">
  882.                                                     {% if court.nbOpen > 0 %}
  883.                                                     <h5 class="count">
  884.                                                         <span>{{court.nbOpen}}</span>
  885.                                                         {{ "page_course_detail.outdoor" | trans }}
  886.                                                     </h5>
  887.                                                     {% endif %}
  889.                                                     {% if court.nbSemiOpen > 0 %}
  890.                                                     <h5 class="count">
  891.                                                         <span>{{court.nbSemiOpen}}</span>
  892.                                                         {{ "page_course_detail.semi_indoor" | trans }}
  893.                                                     </h5>
  894.                                                     {% endif %}
  896.                                                     {% if court.nbCovered > 0 %}
  897.                                                     <h5 class="count">
  898.                                                         <span>{{court.nbCovered}}</span>
  899.                                                         {{ "page_course_detail.indoor" | trans }}
  900.                                                     </h5>
  901.                                                     {% endif %}
  902.                                                     
  903.                                                 </div>
  904.                                             </div>
  906.                                             {% endif %}
  908.                                         {% endfor %}
  909.                                     </div>
  910.                                 </div>
  911.                             </div>
  912.                         </div>
  913.                     {% endif %}
  915.                     {% if courses | length > 0 %}
  916.                         <div class="row pro-courses-row pro-row">
  917.                             <div class="col-lg-12 pro-col">
  918.                                 <div class="main-title mb-5">
  919.                                     <h1 class="title-text">{{ "pro_page.courses_offered" | trans }}</h1>
  920.                                 </div>
  921.                                 <div class="pro-courses-grid">
  922.                                     {% for course in courses %}
  923.                                         {% if course | nextdate(startingDate).begin != null %}
  924.                                             
  925.                                                 {% include "front/course/_course-card.html.twig" %}
  926.                                             
  927.                                         {% endif %}
  928.                                     {% endfor %}
  929.                                 </div>
  930.                             </div>
  931.                         </div>
  932.                     {% endif %}
  934.                     {% if partnershipCourses | length > 0 %}
  935.                         <div class="row pro-courses-row pro-row">
  936.                             <div class="col-lg-12 pro-col">
  937.                                 <div class="main-title mb-5">
  938.                                     <h1 class="title-text">Stages partenaires</h1>
  939.                                 </div>
  940.                                 <div class="pro-courses-grid">
  941.                                     {% for course in partnershipCourses %}
  942.                                         {% if course | nextdate(startingDate).begin != null %}
  943.                                             
  944.                                                 {% include "front/course/_course-card.html.twig" %}
  945.                                             
  946.                                         {% endif %}
  947.                                     {% endfor %}
  948.                                 </div>
  949.                             </div>
  950.                         </div>
  951.                     {% endif %}
  953.                     {% if pro is instanceof('App\\Entity\\Coach') or pro is instanceof('App\\Entity\\Operator') %}
  954.                         {% if clubPartners | length > 0 %}
  955.                             <div class="row pro-row">
  956.                                 <div class="col-lg-12 pro-col">
  957.                                     <div class="main-title mb-5">
  958.                                         <h1 class="title-text">{{ "pro_partner_page.partners_clubs" | trans }}</h1>
  959.                                     </div>
  960.                                     <div class="row partners-wrapper club-partners">
  961.                                         {% for pro in clubPartners %}
  962.                                             {% if pro.owner %}
  963.                                                 {% include "front/pro/_pro-card.html.twig" with {'pro': pro.owner} %}
  964.                                             {% endif %}
  965.                                         {% endfor %}
  966.                                     </div>
  967.                                 </div>
  968.                             </div>
  969.                         {% endif %}
  970.                     {% endif %}
  972.                     {% if pro is instanceof('App\\Entity\\Club') or pro is instanceof('App\\Entity\\Operator') %}
  973.                         {% if coachPartners | length > 0 %}
  974.                             <div class="row pro-row">
  975.                                 <div class="col-lg-12 pro-col">
  976.                                     <div class="main-title mb-5">
  977.                                         <h1 class="title-text">{{ "pro_partner_page.partners_coachs" | trans }}</h1>
  978.                                     </div>
  979.                                     <div class="row partners-wrapper coach-partners">
  980.                                         {% for pro in coachPartners %}
  981.                                             {% if pro.owner %}
  982.                                                 {% include "front/pro/_pro-card.html.twig" with {'pro': pro.owner} %}
  983.                                             {% endif %}
  984.                                         {% endfor %}
  985.                                     </div>
  986.                                 </div>
  987.                             </div>
  988.                         {% endif %}
  989.                     {% endif %}
  990.                 </div>
  992.             </div>
  993.         </div>
  994.         {% include "front/pro/_pro-review.html.twig" with {"pro": pro} %}
  995.     </section>
  997.     {% if inactive %}
  998.         {% if app.user == pro %}
  999.             <div id="inactive-pro">
  1000.                 <h2>{{ "pro_page.self_inactive" | trans }}</h2>
  1001.                 <a class="btn btn-get-subscription" href="{{ path('select_subscription') }}">{{ "pro_subscription.select_subscription" | trans }}</a>
  1002.             </div>
  1003.         {% else %}
  1004.             <div id="inactive-pro"><h2>{{ pro.proInfo.fullname | capitalize }} {{ "pro_page.inactive" | trans }}</h2></div>
  1005.         {% endif %}
  1006.     {% endif %}
  1008. {% endblock %}
  1010. {% block javascript %}
  1012.     {% if inactive %}
  1013.     <script>
  1014.         const header = $('header')
  1015.         $(function () {
  1016.             header.css('background-color', '#fff');
  1017.             header.css('box-shadow', '4px 4px 12px rgb(164 160 160 / 25%)');
  1018.         })
  1019.     </script>
  1020.     {% endif %}
  1021.     
  1022.     {{ parent() }}
  1023.     {{ encore_entry_script_tags('pro-public') }}
  1024.     {{ encore_entry_script_tags('search') }}
  1027. {% endblock %}