src/Elements/Bundle/DemiFrontendBundle/Resources/views/Includes/overlays/search-duration.html.twig line 1

Open in your IDE?
  1. <script type="text/javascript" data-cookieconsent="ignore">
  2.     _config.searchDurationOverlay = true;
  3. </script>
  5. <div id="search-duration-overlay" class="overlay js-overlay js-search-duration-overlay"
  6.      tabindex="-1"
  7.      role="dialog"
  8.      aria-label="{{ 'demi.search.travel-period'|trans }}"
  9.      aria-hidden="true">
  10.     {{ include('@ElementsDemiFrontend/Includes/overlays/sections/header.html.twig') }}
  12.     <div class="overlay__content">
  13.         <div class="ribbon mb-4">
  14.             <div class="ribbon__item ribbon__item--has-flag">
  15.                 <div>
  16.                     {{ 'demi.search.for'|trans }}
  17.                 </div>
  18.                 <div class="ribbon__title js-search-duration-overlay__type-text">
  19.                     {{ 'demi.search.exact-period'|trans }}
  20.                 </div>
  21.             </div>
  22.         </div>
  23.         <div class="container">
  24.             <hr>
  26.             <ul class="list-unstyled">
  27.                 <li>
  28.                     <div class="row row--gutter-width-10 custom-radio-wrapper">
  29.                         <div class="col">
  30.                             <span class="h3 m-0"><label class="d-block pb-2" for="search-duration-type-exact">{{ 'demi.search.exact-period'|trans }}</label></span>
  32.                             <div class="text-muted">
  33.                                 <label for="search-duration-type-exact">
  34.                                     {{ 'demi.search.results-fix'|trans }}
  35.                                 </label>
  36.                             </div>
  37.                         </div>
  38.                         <div class="col col-auto">
  39.                             <label class="custom-radio js-search-duration-overlay__type-radio">
  40.                                 <input id="search-duration-type-exact"
  41.                                        class="custom-radio__input"
  42.                                        type="radio"
  43.                                        name="search-duration-type"
  44.                                        value="exact">
  46.                                 <span class="custom-radio__box mr-0"></span>
  47.                             </label>
  48.                         </div>
  49.                     </div>
  51.                     <hr>
  52.                 </li>
  53.                 <li>
  54.                     <div class="row row--gutter-width-10 custom-radio-wrapper">
  55.                         <div class="col">
  56.                             <span class="h3 m-0"><label class="d-block pb-2" for="search-duration-type-variable">{{ 'demi.search.variable-period'|trans }}</label></span>
  58.                             <div class="text-muted">
  59.                                 <label for="search-duration-type-variable">
  60.                                     {{ 'demi.search.results-flexible'|trans }}
  61.                                 </label>
  62.                             </div>
  64.                         </div>
  65.                         <div class="col col-auto">
  66.                             <label class="custom-radio js-search-duration-overlay__type-radio">
  67.                                 <input id="search-duration-type-variable"
  68.                                        class="custom-radio__input"
  69.                                        type="radio"
  70.                                        name="search-duration-type"
  71.                                        value="variable">
  73.                                 <span class="custom-radio__box mr-0"></span>
  74.                             </label>
  75.                         </div>
  76.                     </div>
  78.                     <div class="js-search-duration-overlay__nights collapse" aria-expanded="false">
  79.                         <div class="text-muted mt-3">
  80.                             {{ 'demi.search.choose-nights'|trans }}
  81.                         </div>
  83.                         <div class="row row--gutter-width-6 row--vertical-gutter-6 mt-3">
  84.                             {%  set nightOptions = demi_core_configuration('getVariableNightMappings',[])|split(',') %}
  85.                             {% for option in nightOptions %}
  86.                                 <div class="col col-6">
  87.                                     {{ include('@ElementsDemiFrontend/Includes/elements/buttons/toggle-button.html.twig',{
  88.                                         'type': 'radio',
  89.                                         'name': 'nights',
  90.                                         'hasIcon': false,
  91.                                         'isBlock': true,
  92.                                         'value': option,
  93.                                         'text': option ~ " " ~ ("demi.nights"|trans),
  94.                                         'styleModifier': 'js-search-duration-overlay__nights-radio'
  95.                                     }) }}
  96.                                 </div>
  97.                             {% endfor %}
  98.                         </div>
  99.                     </div>
  101.                     <hr>
  102.                 </li>
  103.             </ul>
  105.         </div>
  106.     </div>
  107. </div>