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

Open in your IDE?
  1. {% extends "front/base.html.twig" %}
  3. {% block title %}
  4.     {{ 'seo.directory_title' | trans }}
  5. {% endblock %}
  7. {% block seo %}
  8.     <meta name="description" content="{{ 'seo.directory_description' | trans }}">
  9. {% endblock %}
  11. {% block stylesheets %}
  12.     <style>
  13.         .form-check {
  14.             justify-content: flex-start;
  15.         }
  16.     </style>
  17.     {{ parent() }}
  18.     {{ encore_entry_link_tags('search') }}
  19. {% endblock %}
  21. {% form_theme form _self %}
  23. {%- block choice_widget_expanded -%}
  24. {%- for child in form %}
  25.     <div class="checkbox icheck-primary">
  26.         {{- form_widget(child) -}}
  27.     </div>
  28. {% endfor -%}
  29. {%- endblock choice_widget_expanded -%}
  31. {%- block _hasLabels_widget -%}
  32.     <div class="checkbox icheck-primary">
  33.         {{- form_widget(form) -}}
  34.     </div>
  35. {%- endblock -%}
  38. {% block body %}
  40. <section class="first-section search-page search-pro pb-0" id="pro-search">
  41.     <div class="container">
  42.         <div class="row justify-content-center">
  43.             <div class="col-md-12 search-col">
  44.                 {{ form_start(form, {'attr': {'class': 'main-search'}}) }}
  45.                 <div class="form-inline">
  46.                     <div class="input-wrap">
  47.                         <div class="input-group global">
  48.                             <div class="input-group-prepend">
  49.                                 <i class="fas fa-user"></i>
  50.                             </div>
  51.                             {{ form_widget(form.name, {'attr': {'class': 'input-main-search'}}) }}
  52.                             <div class="input-group-prepend hide-desktop">
  53.                                 <button class="btn toggle-filters-mobile" type="button">
  54.                                     <i class="fal fa-sliders-h"></i>
  55.                                 </button>
  56.                                 <button class="btn search-mobile-btn" type="submit">
  57.                                     <i class="far fa-search"></i>
  58.                                 </button>
  59.                             </div>
  60.                         </div>
  61.                         <div class="search-dropdowns">
  62.                             <div class="filters-header hide-desktop">
  63.                                 <span class="title">{{ 'global.filter' | trans }}</span>
  64.                                 <button class="btn close-filter" id="close-filter" type="button">
  65.                                     <i class="fal fa-times"></i>
  66.                                 </button>
  67.                             </div>
  68.                             <div class="filters-contain">
  69.                                 <div class="custom-dropdown-input short-input" id="pro-type-wrap">
  70.                                     <span class="custom-dropdown-label" id="pro-type-checkbox-label">{{ "directory.all" | trans }}</span>
  71.                                     <div class="custom-dropdown-content" id="pro-type-checkbox">
  72.                                         {{ form_widget(form.type) }}
  73.                                     </div>
  74.                                 </div>
  75.                                 <div class="custom-dropdown-input short-input" id="sport-wrap">
  76.                                     <span class="custom-dropdown-label" id="sport-checkbox-label">{{ "directory.sport" | trans }}</span>
  77.                                     <div class="custom-dropdown-content" id="sport-checkbox">
  78.                                         {{ form_widget(form.sports) }}
  79.                                     </div>
  80.                                 </div>
  82.                                 {% set countryField = form_widget(form.country) %}
  83.                                 {% set languagesField = form_widget(form.languages) %}
  84.                                 {% set hasLabelField = form_widget(form.hasLabels) %}
  86.                                 <div class="hide-desktop pro-others-filters-responsive">
  87.                                     <div class="custom-dropdown-input short-input" id="age-lowercase">
  88.                                         <span class="custom-dropdown-label">{{ "directory.country_of_activity" | trans }}</span>
  89.                                         <div class="custom-dropdown-content">
  90.                                             {{ countryField | raw }}
  91.                                         </div>
  92.                                     </div>
  94.                                     <div class="custom-dropdown-input short-input" id="age-lowercase">
  95.                                         <span class="custom-dropdown-label">{{ "directory.languages_spoken" | trans }}</span>
  96.                                         <div class="custom-dropdown-content">
  97.                                             {{ languagesField | raw }}
  98.                                         </div>
  99.                                     </div>
  101.                                     <div class="custom-dropdown-input short-input" id="age-lowercase">
  102.                                         <span class="custom-dropdown-label">{{ "directory.labels" | trans }}</span>
  103.                                         <div class="custom-dropdown-content">
  104.                                             {{ hasLabelField | raw }}
  105.                                         </div>
  106.                                     </div>
  107.                                 </div>
  109.                                 <div class="custom-dropdown-input short-input more-fields hide-mobile">
  110.                                     <span class="custom-dropdown-label">{{ "directory.more_criteria" | trans }}</span>
  111.                                     <div class="custom-dropdown-content">
  112.                                         <div class="accordion" id="accordionMoreFields">
  113.                                             <div class="card">
  114.                                                 <div class="card-header" id="country-card">
  115.                                                     <h5 class="mb-0">
  116.                                                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseCountry" aria-expanded="false" aria-controls="collapseCountry">
  117.                                                             {{ "directory.country_of_activity" | trans }}
  118.                                                         </button>
  119.                                                     </h5>
  120.                                                 </div>
  121.                                                 <div id="collapseCountry" class="collapse" aria-labelledby="country" data-parent="#accordionMoreFields">
  122.                                                     <div class="card-body subcheck">
  123.                                                         <div class="row py-1">
  124.                                                             <div class="col-12">
  125.                                                                 {{ countryField | raw }}
  126.                                                             </div>
  127.                                                         </div>
  128.                                                     </div>
  129.                                                 </div>
  130.                                             </div>
  131.                                             <div class="card">
  132.                                                 <div class="card-header" id="language">
  133.                                                     <h5 class="mb-0">
  134.                                                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseLanguage" aria-expanded="false" aria-controls="collapseLanguage">
  135.                                                             {{ "directory.languages_spoken" | trans }}
  136.                                                         </button>
  137.                                                     </h5>
  138.                                                 </div>
  139.                                                 <div id="collapseLanguage" class="collapse" aria-labelledby="language" data-parent="#accordionMoreFields">
  140.                                                     <div class="card-body subcheck">
  141.                                                         {{ languagesField | raw }}
  142.                                                     </div>
  143.                                                 </div>
  144.                                             </div>
  145.                                             <div class="card">
  146.                                                 <div class="card-header" id="has-labels">
  147.                                                     <h5 class="mb-0">
  148.                                                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseLabels" aria-expanded="false" aria-controls="collapseLanguage">
  149.                                                             {{ "directory.labels" | trans }}
  150.                                                         </button>
  151.                                                     </h5>
  152.                                                 </div>
  153.                                                 <div id="collapseLabels" class="collapse" aria-labelledby="labels" data-parent="#accordionMoreFields">
  154.                                                     <div class="card-body subcheck">
  155.                                                         {{ hasLabelField | raw }}
  156.                                                     </div>
  157.                                                 </div>
  158.                                             </div>
  159.                                         </div>
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                             
  164.                             <div class="hide-desktop filters-actions hide">
  165.                                 <a href="{{ path('courses') }}" class="btn btn-icon btn-reset">
  166.                                     <i class="fal fa-undo-alt"></i>
  167.                                 </a>
  168.                                 <button class="btn btn-main-search" type="submit">{{ "global.search" | trans }}</button>
  169.                             </div>
  170.                         </div>
  171.                         <button class="btn btn-main-search hide-mobile" type="submit">
  172.                             <i class="far fa-search"></i>
  173.                         </button>
  174.                     </div>
  176.                 </div>
  177.                 {{ form_end(form) }}
  178.             </div>
  179.         </div>
  180.         {% if criteria %}
  181.             <div class="row my-3">
  182.                 <div class="col-12">
  183.                     <div class="search-criteria reset-criteria">
  184.                         <a href="{{ path('directory') }}" class="btn">{{ 'global.reset' | trans }}</a>
  185.                     </div>
  186.                     {% if criteria.name %}
  187.                         <div class="search-criteria">
  188.                             "{{ criteria.name }}"
  189.                             <span class="delete-criteria" data-target="name">
  190.                                 <i class="fas fa-times"></i>
  191.                             </span>
  192.                         </div>
  193.                     {% endif %}
  194.                     {% if criteria.type %}
  195.                         {% for type in criteria.type %}
  196.                             <div class="search-criteria">
  197.                                 {{ ("global." ~ type) | trans | capitalize }}
  198.                                 {% if type == "coach" %}
  199.                                     {% set key = 0 %}
  200.                                 {% elseif type == "club" %}
  201.                                     {% set key = 1 %}
  202.                                 {% else %}
  203.                                     {% set key = 2 %}
  204.                                 {% endif %}
  205.                                 <span class="delete-criteria" data-target="type_{{ key }}">
  206.                                     <i class="fas fa-times"></i>
  207.                                 </span>
  208.                             </div>
  209.                         {% endfor %}
  210.                     {% endif %}
  211.                     {% if criteria.sports %}
  212.                         {% for sport in criteria.sports %}
  213.                             <div class="search-criteria">
  214.                                 {{ ("sport_name." ~ sport.slug) | trans }}
  215.                                 <span class="delete-criteria" data-target="sports_{{ sport.id }}">
  216.                                     <i class="fas fa-times"></i>
  217.                                 </span>
  218.                             </div>
  219.                         {% endfor %}
  220.                     {% endif %}
  221.                     {% if criteria.country %}
  222.                         <div class="search-criteria">
  223.                             {{ criteria.country | upper | countryName(app.request.locale) }}
  224.                             <span class="delete-criteria" data-target="country" data-country-code="{{ criteria.country }}">
  225.                                 <i class="fas fa-times"></i>
  226.                             </span>
  227.                         </div>
  228.                     {% endif %}
  229.                     {% if criteria.languages %}
  230.                         {% for language in criteria.languages %}
  231.                             <div class="search-criteria">
  232.                                 {{ language }}
  233.                                 <span class="delete-criteria" data-target="languages_{{ language.id }}">
  234.                                     <i class="fas fa-times"></i>
  235.                                 </span>
  236.                             </div>
  237.                         {% endfor %}
  238.                     {% endif %}
  239.                     {% if criteria.hasLabels %}
  240.                             <div class="search-criteria">
  241.                             {{ "directory.hasLabels" | trans }}
  242.                             <span class="delete-criteria" data-target="hasLabels" data-value="{{ criteria.hasLabels }}">
  243.                                 <i class="fas fa-times"></i>
  244.                             </span>
  245.                             </div>
  246.                     {% endif %}
  247.                 </div>
  248.             </div>
  249.         {% endif %}
  250.     </div>
  251. </section>
  254. <section class="search-result" id="help">
  255.     <div class="container">
  256.         <div class="row mb-5 pb-5">
  258.             {% if pros | length > 0 %}
  259.                 {% for pro in pros %}
  260.                     <div class="col-lg-4 col-xl-3 col-md-6 col-sm-6 col-12 mb-4">
  261.                         {% include "front/pro/_pro-card.html.twig" %}
  262.                     </div>
  263.                 {% endfor %}
  264.             {% else %}
  265.                 <div class="pro-box">
  266.                     <p class="empty-pro-list">{{ "directory.no_pro" | trans }}</p>
  267.                 </div>
  268.             {% endif %}
  269.         </div>
  270.         <div class="row d-flex justify-content-center">
  271.             {{ knp_pagination_render(pros, 'front/_partials/availabilities-pagination.html.twig') }}
  272.         </div>
  273.     </div>
  274. </section>
  275. {% endblock %}
  276. {% block javascript %}
  278.     {{ parent() }}
  279.     {{ encore_entry_script_tags('search') }}
  281.     <script>
  283.         var globalWidth = $(window).width();
  285.         $(document).ready(function() {
  287.             if (globalWidth > 991) {
  288.                 
  289.                 $(".pro-others-filters-responsive").remove();
  291.             }
  293.             else {
  295.                 $(".more-fields").remove();
  297.             }
  299.         });
  301.         $('.delete-criteria').on('click', function () {
  302.             let id = $(this).data('target');
  304.             let input = $('#' + id);
  305.             if (id == "country") {
  306.                 input.find('option[value="' + $(this).data('country-code') + '"').prop('selected', false);
  307.             }
  308.             else if (id == 'hasLabels') {
  309.                 $('#hasLabels_1').prop('checked', '');
  310.                 $('#hasLabels_0').prop('checked', 'checked');
  311.             }
  312.             else if (input.prop('type') == 'checkbox') {
  313.                 input.prop('checked', false);
  314.             }
  315.             else {
  316.                 input.val('');
  317.             }
  318.             $('.btn-main-search').click();
  319.         })
  320.     </script>
  321. {% endblock %}