templates/front/course/_searchbar-section.html.twig line 1

Open in your IDE?
  1. <section class="first-section search-page search-course pb-0" id="course-search">
  2.     <div class="container">
  3.         <div class="row justify-content-center">
  4.             <div class="col-md-12 search-col">
  5.                 {{ form_start(form, {'attr': {'class': 'main-search'}}) }}
  6.                     <div class="form-inline">
  7.                         <div class="input-wrap">
  8.                             <div class="input-group global destination">
  9.                                 <div class="input-group-prepend">
  10.                                     <i class="fas fa-map-marker-alt"></i>
  11.                                 </div>
  12.                                 <input type="text" id="destination" autocomplete="off" placeholder="{{ 'form.select_destination' | trans }}" class="input-main-search form-control">
  13.                                 {{ form_widget(form.place) }}
  15.                                 <div class="input-group-prepend hide-desktop">
  16.                                     <button class="btn toggle-filters-mobile" type="button">
  17.                                         <i class="fal fa-sliders-h"></i>
  18.                                         {% if criteria and (criteria.place or criteria.sports or criteria.begin or criteria.ages or criteria.levels or criteria.languages or criteria.languages or criteria.hasLabels) %}
  20.                                         {% set countCriteria = 0 %}
  22.                                         {% if criteria.place %}
  23.                                             
  24.                                             {% set countCriteria = countCriteria + 1 %}
  26.                                         {% endif %}
  27.                                         {% if criteria.sports %}
  29.                                             {% set countCriteria = countCriteria + criteria.sports | length %}
  31.                                         {% endif %}
  32.                                         {% if criteria.begin %}
  34.                                             {% set countCriteria = countCriteria + 1 %}
  36.                                         {% endif %}
  37.                                         {% if criteria.ages %}
  38.                                             
  39.                                             {% set countCriteria = countCriteria + criteria.ages | length %}
  41.                                         {% endif %}
  42.                                         {% if criteria.levels %}
  44.                                             {% set countCriteria = countCriteria + criteria.levels | length %}
  46.                                         {% endif %}
  47.                                         {% if criteria.languages %}
  49.                                             {% set countCriteria = countCriteria + criteria.languages | length %}
  51.                                         {% endif %}
  52.                                         {% if criteria.hasLabels %}
  53.                                                 
  54.                                             {% set countCriteria = countCriteria + 1 %}
  56.                                         {% endif %}
  58.                                         <span class="criteria-count">{{ countCriteria }}</span>
  59.                                         {% endif %}
  60.                                     </button>
  61.                                     <button class="btn search-mobile-btn" type="submit">
  62.                                         <i class="far fa-search"></i>
  63.                                     </button>
  64.                                 </div>
  65.                             </div>
  66.                             <div class="search-dropdowns">
  67.                                 <div class="filters-header hide-desktop">
  68.                                     <span class="title">{{ 'global.filter' | trans }}</span>
  69.                                     <button class="btn close-filter" id="close-filter" type="button">
  70.                                         <i class="fal fa-times"></i>
  71.                                     </button>
  72.                                 </div>
  73.                                 <div class="filters-contain">
  74.                                     <div class="custom-dropdown-input short-input" id="sport-wrap">
  75.                                         <span class="custom-dropdown-label" id="sport-checkbox-label">{{ "directory.sport" | trans }}</span>
  76.                                         <div class="custom-dropdown-content" id="sport-checkbox">
  77.                                             {{ form_widget(form.sports) }}
  78.                                         </div>
  79.                                     </div>
  80.                                     <div class="custom-dropdown-input short-input" id="date-wrap">
  81.                                         <span class="custom-dropdown-label" id="date-input-label">
  82.                                             {{ "page_course_detail.from" | trans }}
  83.                                         </span>
  84.                                         <div class="custom-dropdown-content">
  85.                                             <div id="datepicker"></div>
  86.                                             {{ form_widget(form.begin) }}
  87.                                         </div>
  88.                                     </div>
  89.                                     <div class="custom-dropdown-input short-input" id="age-lowercase">
  90.                                         <span class="custom-dropdown-label">{{ "trainee.age" | trans }}</span>
  91.                                         <div class="custom-dropdown-content" id="age-checkbox">
  92.                                             {{ form_widget(form.ages) }}
  93.                                         </div>
  94.                                     </div>
  96.                                     {% set levelsField = form_widget(form.levels) %}
  97.                                     {% set langagesField = form_widget(form.languages) %}
  98.                                     {% set hasLabelField = form_widget(form.hasLabels) %}
  100.                                     <div class="hide-desktop course-others-filters-responsive">
  101.                                         <div class="custom-dropdown-input short-input" id="level-checkbox-wrap">
  102.                                             <span class="custom-dropdown-label">{{ "page_course_detail.level" | trans }}</span>
  103.                                             <div class="custom-dropdown-content" id="level-checkbox">
  104.                                                 {{ levelsField | raw }}
  105.                                             </div>
  106.                                         </div>
  108.                                         <div class="custom-dropdown-input short-input" id="language-checkbox-wrap">
  109.                                             <span class="custom-dropdown-label">{{ "directory.languages_spoken" | trans }}</span>
  110.                                             <div class="custom-dropdown-content" id="language-checkbox">
  111.                                                 {{ langagesField | raw }}
  112.                                             </div>
  113.                                         </div>
  115.                                         <div class="custom-dropdown-input short-input" id="label-choice-wrap">
  116.                                             <span class="custom-dropdown-label">{{ "directory.labels" | trans }}</span>
  117.                                             <div class="custom-dropdown-content">
  118.                                                 {{ hasLabelField | raw }}
  119.                                             </div>
  120.                                         </div>
  121.                                     </div>
  123.                                     <div class="custom-dropdown-input short-input more-fields hide-mobile">
  124.                                         <span class="custom-dropdown-label">{{ "directory.more_criteria" | trans }}</span>
  125.                                         <div class="custom-dropdown-content">
  126.                                             <div class="accordion" id="accordionMoreFields">
  127.                                                 <div class="card">
  128.                                                     <div class="card-header" id="level">
  129.                                                         <h5 class="mb-0">
  130.                                                             <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseLevel" aria-expanded="false" aria-controls="collapseLevel">
  131.                                                                 {{ "page_course_detail.level" | trans }}
  132.                                                             </button>
  133.                                                         </h5>
  134.                                                     </div>
  135.                                                     <div id="collapseLevel" class="collapse" aria-labelledby="level" data-parent="#accordionMoreFields">
  136.                                                         <div class="card-body subcheck" id="level-checkbox">
  137.                                                             {{ levelsField | raw }}
  138.                                                         </div>
  139.                                                     </div>
  140.                                                 </div>
  141.                                                 <div class="card">
  142.                                                     <div class="card-header" id="language">
  143.                                                         <h5 class="mb-0">
  144.                                                             <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseLanguage" aria-expanded="false" aria-controls="collapseLanguage">
  145.                                                                 {{ "directory.languages_spoken" | trans }}
  146.                                                             </button>
  147.                                                         </h5>
  148.                                                     </div>
  149.                                                     <div id="collapseLanguage" class="collapse" aria-labelledby="language" data-parent="#accordionMoreFields">
  150.                                                         <div class="card-body subcheck" id="language-checkbox">
  151.                                                             {{ langagesField | raw }}
  152.                                                         </div>
  153.                                                     </div>
  154.                                                 </div>
  155.                                                 <div class="card">
  156.                                                     <div class="card-header" id="has-labels">
  157.                                                         <h5 class="mb-0">
  158.                                                             <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseLabels" aria-expanded="false" aria-controls="collapseLanguage">
  159.                                                                 {{ "directory.labels" | trans }}
  160.                                                             </button>
  161.                                                         </h5>
  162.                                                     </div>
  163.                                                     <div id="collapseLabels" class="collapse" aria-labelledby="labels" data-parent="#accordionMoreFields">
  164.                                                         <div class="card-body subcheck">
  165.                                                             {{ hasLabelField | raw }}
  166.                                                         </div>
  167.                                                     </div>
  168.                                                 </div>
  169.                                             </div>
  170.                                         </div>
  171.                                     </div>
  173.                                     {# filter applied responsive #}
  175.                                     {% if criteria %}
  177.                                     <div class="row applied-filters hide-desktop">
  178.                                         <div class="col-12">
  179.                                             {% if criteria.place %}
  180.                                                 <div class="search-criteria">
  181.                                                     <span class="place-criteria"></span>
  182.                                                     <span class="delete-criteria" data-target="place">
  183.                                                         <i class="fas fa-times"></i>
  184.                                                     </span>
  185.                                                 </div>
  186.                                             {% endif %}
  187.                                             {% if criteria.sports %}
  188.                                                 {% for sport in criteria.sports %}
  189.                                                     <div class="search-criteria">
  190.                                                         {{ ("sport_name." ~ sport.slug) | trans }}
  191.                                                         <span class="delete-criteria" data-target="sports_{{ sport.id }}">
  192.                                                             <i class="fas fa-times"></i>
  193.                                                         </span>
  194.                                                     </div>
  195.                                                 {% endfor %}
  196.                                             {% endif %}
  197.                                             {% if criteria.begin %}
  198.                                                 <div class="search-criteria">
  199.                                                     {{ criteria.begin }}
  200.                                                     <span class="delete-criteria" data-target="begin">
  201.                                                         <i class="fas fa-times"></i>
  202.                                                     </span>
  203.                                                 </div>
  204.                                             {% endif %}
  205.                                             {% if criteria.ages %}
  206.                                                 {% for age in criteria.ages %}
  207.                                                     <div class="search-criteria">
  208.                                                         {{ ("age_name." ~ age.slug) | trans }}
  209.                                                         <span class="delete-criteria" data-target="ages_{{ age.id }}">
  210.                                                             <i class="fas fa-times"></i>
  211.                                                         </span>
  212.                                                     </div>
  213.                                                 {% endfor %}
  214.                                             {% endif %}
  215.                                             {% if criteria.levels %}
  216.                                                 {% for level in criteria.levels %}
  217.                                                     <div class="search-criteria">
  218.                                                         {{ ("level_name." ~ level.slug) | trans | capitalize }}
  219.                                                         <span class="delete-criteria" data-target="levels_{{ level.id }}">
  220.                                                             <i class="fas fa-times"></i>
  221.                                                         </span>
  222.                                                     </div>
  223.                                                 {% endfor %}
  224.                                             {% endif %}
  225.                                             {% if criteria.languages %}
  226.                                                 {% for language in criteria.languages %}
  227.                                                     <div class="search-criteria">
  228.                                                         {{ language }}
  229.                                                         <span class="delete-criteria" data-target="languages_{{ language.id }}">
  230.                                                             <i class="fas fa-times"></i>
  231.                                                         </span>
  232.                                                     </div>
  233.                                                 {% endfor %}
  234.                                             {% endif %}
  235.                                             {% if criteria.hasLabels %}
  236.                                                     <div class="search-criteria">
  237.                                                     {{ "directory.hasLabels" | trans }}
  238.                                                     <span class="delete-criteria" data-target="hasLabels" data-value="{{ criteria.hasLabels }}">
  239.                                                         <i class="fas fa-times"></i>
  240.                                                     </span>
  241.                                                     </div>
  242.                                             {% endif %}
  243.                                         </div>
  244.                                     </div>
  245.                                     {% endif %}
  247.                                     
  248.                                 </div>
  249.                                 <div class="hide">
  250.                                     {{ form_row(form.search) }}
  251.                                 </div>
  252.                                 
  253.                                 <button class="btn btn-main-search hide-mobile" type="submit">
  254.                                     <i class="far fa-search"></i>
  255.                                 </button>
  257.                                 <div class="hide-desktop filters-actions hide">
  258.                                     <a href="{{ path('courses') }}" class="btn btn-icon btn-reset">
  259.                                         <i class="fal fa-undo-alt"></i>
  260.                                     </a>
  261.                                     <button class="btn btn-icon add-alert" data-toggle="modal" type="button" data-target="#add-alert">
  262.                                         <i class="fal fa-bell"></i>
  263.                                     </button>
  264.                                     <button class="btn btn-main-search" type="submit">{{ "global.search" | trans }}</button>
  265.                                 </div>
  266.                             </div>
  267.                         </div>
  268.                         
  269.                         {% if criteria and criteria.place %}
  270.                         
  271.                         <div class="search-toggle search-toggle-responsive">
  272.                             <a href="{{ path('courses', app.request.query.all | merge({'view': 'list'})) }}" class="view-type {% if view == 'list' %}active{% endif %}"> 
  273.                                 <i class="fa fa-th"></i>
  274.                             </a>
  275.                             <a href="{{ path('courses', app.request.query.all | merge({'view': 'map'})) }}" class="view-type {% if view == 'map' %}active{% endif %}">
  276.                                 <i class="fas fa-map"></i>
  277.                             </a>
  278.                         </div>    
  280.                         {% endif %}        
  282.                         <button type="button" class="btn btn-create-alert hide-mobile add-alert" data-toggle="modal" data-target="#add-alert" id="add-alert-btn">
  283.                             <i class="fal fa-bell"></i>
  284.                         </button>
  286.                         <!-- Modal alert -->
  287.                         <div class="modal fade" id="add-alert" tabindex="-1" role="dialog" aria-labelledby="add-alert" aria-hidden="true">
  288.                             <div class="modal-dialog modal-dialog-centered" role="document">
  289.                                 <div class="modal-content">
  291.                                     <div class="modal-body">
  292.                                         <div class="row">
  293.                                             <div class="col-lg-12">
  294.                                                 <h5 class="modal-title">{{ 'courses.create_alert' | trans }}</h5>
  295.                                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  296.                                                     <i class="fal fa-times"></i>
  297.                                                 </button>
  298.                                             </div>
  299.                                         </div>
  301.                                         {% if is_granted('ROLE_TRAINEE') %}
  303.                                             <div class="row" id="my-research-title">
  304.                                                 <div class="col-12">
  305.                                                     <h6 class="text-center">{{ 'courses.my_research' | trans }}</h6>
  306.                                                 </div>
  307.                                             </div>
  308.                                             
  309.                                             <div class="row">
  310.                                                 <div class="badges" id="badges">
  311.                                                     <div class="col-lg-12">
  312.                                                         <div class="course-box">
  313.                                                             <p class="empty-research">{{ "directory.must_search_criteria" | trans }}</p>
  314.                                                         </div>
  315.                                                     </div>
  316.                                                 </div>
  317.                                             </div>
  319.                                             <div class="row mt-3" id="my-research-submit">
  320.                                                 <button class="col-md-12 btn main-btn btn-sm w-auto create-alert" type="submit">
  321.                                                     {{ 'courses.add_alert' | trans }}
  322.                                                 </button>
  323.                                             </div>
  325.                                         {% elseif is_granted('ROLE_PRO') %}
  327.                                             <div class="col-lg-12">
  328.                                                 <div class="course-box">
  329.                                                     <p class="empty-research">{{ "directory.must_logged_trainee_alert" | trans }}</p>
  330.                                                 </div>
  331.                                             </div>
  333.                                         {% else %}
  335.                                             <div class="col-lg-12">
  336.                                                 <div class="course-box">
  337.                                                     <p class="empty-research">{{ "directory.must_logged" | trans }}</p>
  338.                                                 </div>
  339.                                             </div>
  341.                                             <div class="row justify-content-center">
  342.                                                 <a href="{{ path('user_login', {'type': 'trainee'}) }}" class="btn btn-menu btn-menu-trainee m-2">{{ "global.login" | trans }}</a>    
  343.                                                 <a href="{{ path('trainee_registration') }}" class="btn btn-menu btn-login-pro m-2">{{ "global.signup" | trans }}</a>
  344.                                             </div>
  346.                                         {% endif %}
  347.                                         
  348.                                     </div>
  349.                                 </div>
  350.                             </div>
  351.                         </div>
  352.                     </div>
  353.                 {{ form_end(form) }}
  354.             </div>
  355.         </div>
  356.         {% if criteria %}
  357.         <div class="row applied-filters hide-mobile">
  358.             <div class="col-12">
  359.                 {% if criteria.place %}
  360.                 <div class="search-toggle">
  361.                     <a href="{{ path('courses', app.request.query.all | merge({'view': 'list'})) }}" class="view-type {% if view == 'list' %}active{% endif %}"> 
  362.                         <i class="fa fa-th"></i>
  363.                     </a>
  364.                     <a href="{{ path('courses', app.request.query.all | merge({'view': 'map'})) }}" class="view-type {% if view == 'map' %}active{% endif %}">
  365.                         <i class="fas fa-map"></i>
  366.                     </a>
  367.                 </div>
  368.                 {% endif %}
  369.                 <div class="search-criteria reset-criteria">
  370.                     <a href="{{ path('courses') }}" class="btn">{{ 'global.reset' | trans }}</a>
  371.                 </div>
  372.                 {% if criteria.place %}
  373.                     <div class="search-criteria">
  374.                         <span class="place-criteria"></span>
  375.                         <span class="delete-criteria" data-target="place">
  376.                             <i class="fas fa-times"></i>
  377.                         </span>
  378.                     </div>
  379.                 {% endif %}
  380.                 {% if criteria.sports %}
  381.                     {% for sport in criteria.sports %}
  382.                         <div class="search-criteria">
  383.                             {{ ("sport_name." ~ sport.slug) | trans }}
  384.                             <span class="delete-criteria" data-target="sports_{{ sport.id }}">
  385.                                 <i class="fas fa-times"></i>
  386.                             </span>
  387.                         </div>
  388.                     {% endfor %}
  389.                 {% endif %}
  390.                 {% if criteria.begin %}
  391.                     <div class="search-criteria">
  392.                         {{ criteria.begin }}
  393.                         <span class="delete-criteria" data-target="begin">
  394.                             <i class="fas fa-times"></i>
  395.                         </span>
  396.                     </div>
  397.                 {% endif %}
  398.                 {% if criteria.ages %}
  399.                     {% for age in criteria.ages %}
  400.                         <div class="search-criteria">
  401.                             {{ ("age_name." ~ age.slug) | trans }}
  402.                             <span class="delete-criteria" data-target="ages_{{ age.id }}">
  403.                                 <i class="fas fa-times"></i>
  404.                             </span>
  405.                         </div>
  406.                     {% endfor %}
  407.                 {% endif %}
  408.                 {% if criteria.levels %}
  409.                     {% for level in criteria.levels %}
  410.                         <div class="search-criteria">
  411.                             {{ ("level_name." ~ level.slug) | trans | capitalize }}
  412.                             <span class="delete-criteria" data-target="levels_{{ level.id }}">
  413.                                 <i class="fas fa-times"></i>
  414.                             </span>
  415.                         </div>
  416.                     {% endfor %}
  417.                 {% endif %}
  418.                 {% if criteria.languages %}
  419.                     {% for language in criteria.languages %}
  420.                         <div class="search-criteria">
  421.                             {{ language }}
  422.                             <span class="delete-criteria" data-target="languages_{{ language.id }}">
  423.                                 <i class="fas fa-times"></i>
  424.                             </span>
  425.                         </div>
  426.                     {% endfor %}
  427.                 {% endif %}
  428.                 {% if criteria.hasLabels %}
  429.                         <div class="search-criteria">
  430.                         {{ "directory.hasLabels" | trans }}
  431.                         <span class="delete-criteria" data-target="hasLabels" data-value="{{ criteria.hasLabels }}">
  432.                             <i class="fas fa-times"></i>
  433.                         </span>
  434.                         </div>
  435.                 {% endif %}
  436.             </div>
  437.         </div>
  438.         {% endif %}
  439.     </div>
  440. </section>