<div class="js-nav__overlay main-navbar__overlay" id="bookingOverlay" aria-hidden="true"> <button class="main-navbar__overlay-close js-nav__toggle-overlay" aria-label="Hide Overlay" title="Hide Overlay" data-nav-overlay-target="#bookingOverlay"> <span class="icon icon-close main-navbar__overlay-close__icon" aria-hidden="true"></span> <span class="main-navbar__overlay-close__text">{{ 'nav.schliessen'|trans }}</span> </button> <div class="js-nav__render-templates" style="min-height: 1px;"> <template class="js-render-template__template"> <div class="main-navbar__overlay-container main-navbar__overlay-container--narrow"> <div class="h2 mb-md-5 text-center font-decorative text-primary-light text-uppercase">{{ 'nav.overlay.Urlaub buchen'|trans }}</div> <section class="quickfinder"> <form action="/404" data-action="{{ demiConfigurationHelper().getAccoParentDocument(app.request.locale) }}" class="js-action-changer js-form-validation"> <input type="hidden" name="u0" value="1"> <input type="hidden" name="previousResults" value="2"> <input type="hidden" name="durationType" value="exact"> <input type="hidden" name="occupancyType" value="multiple-rooms"> <div class="row vertical-gutter--4"> <div class="col-md-6 js-quickfinder vertical-gutter__item"> {% do jsConfig('_translations').add({ 'qf.childAge': 'qf.Alter Kind'|trans, 'qf.Jahre': 'qf.Jahre'|trans }) %} {% if siteConfig.regionFilter is not empty and document.property('region').isMainRegion %} {% set options = [ { "label": "", "value": "", "disabled": true, "selected": siteConfig.regionFilterPreselect is empty, "class": "sr-only" } ] %} {% for filter in siteConfig.regionFilter %} {% if siteConfig.regionFilterPreselect.id == filter.id %} {% set options = options|merge([ { "label": filter.name, "selected": siteConfig.regionFilterPreselect and filter.id == siteConfig.regionFilterPreselect.id, } ]) %} {% else %} {% set options = options|merge([ { "label": filter.name, "selected": siteConfig.regionFilterPreselect and filter.id == siteConfig.regionFilterPreselect.id, "value": filter.id } ]) %} {% endif %} {% endfor %} {# form-group--dark is only used for demi styling #} {{ include('Form/Includes/select.html.twig', { inputModifier: "js-floating-label", labelModifier: "floating-label", styleModifier: "form-group--sm form-group--dark has-value", inputWrapperModifier: "select__input-wrapper position-relative", id: "fo[]", name: "fo[]", label: 'qf.Region'|trans, options: options }) }} {% endif %} <div class="row row--gutter-width-10 js-datepicker-range"> <div class="col-6"> {{ include('Form/Includes/date-picker.html.twig', { "id": "from-accos", "name": "from", "label": "qf.Anreise"|trans, "min": carbon().today().toDateTimeString(), "value": carbon().today().toDateTimeString(), "numberOfMonths": 2, "styleModifier": 'js-datepicker-range__from form-group--sm has-value form-group--dark', "inputHiddenModifier": "js-floating-label", "inputWrapperModifier": "position-relative datepicker-container", "labelModifier": "floating-label" }) }} </div> <div class="col-6"> {{ include('Form/Includes/date-picker.html.twig', { "id": "to-accos", "name": "to", "label": "qf.Abreise"|trans, "min": carbon().today().toDateTimeString(), "value": carbon().today().addWeek().toDateTimeString(), "numberOfMonths": 2, "styleModifier": "js-datepicker-range__to form-group--sm has-value form-group--dark", "inputHiddenModifier": "js-floating-label", "inputWrapperModifier": "position-relative datepicker-container", "labelModifier": "floating-label" }) }} </div> </div> {% set enableUnitSearch = demi_core_configuration('getEnableUnitSearch',[]) %} {% if enableUnitSearch %} {# unit search activated #} {% set unitOptions = [ { "label": "", "value": "", "disabled": true, "selected": true, "class": "sr-only" } ] %} {% for i in 1..10 %} {% set unitOptions = unitOptions|merge([ { "label": i, "value": i, "selected": i == 1 } ]) %} {% endfor %} {{ include('Form/Includes/select.html.twig', { inputModifier: "js-floating-label", labelModifier: "floating-label", styleModifier: "form-group--sm has-value form-group--dark", inputWrapperModifier: "select__input-wrapper position-relative", id: "units", name: "u0", required: true, label: 'qf.Einheiten'|trans, options: unitOptions }) }} {% endif %} {% set options = [ { "label": "", "value": "", "disabled": true, "selected": true, "class": "sr-only" } ] %} {% for i in 1..10 %} {% set options = options|merge([ { "label": i, "value": i, "selected": i == 2 } ]) %} {% endfor %} {{ include('Form/Includes/select.html.twig', { inputModifier: "js-floating-label", labelModifier: "floating-label", styleModifier: "form-group--sm has-value form-group--dark", inputWrapperModifier: "select__input-wrapper position-relative", id: "adults", name: "a0", required: true, label: 'qf.Erwachsene'|trans, options: options }) }} {% set options = [ { "label": "", "value": "", "selected": true } ] %} {% for i in 1..4 %} {% set options = options|merge([ { "label": '' ~ i, "value": '' ~ i } ]) %} {% endfor %} {{ include('Form/Includes/select.html.twig', { inputModifier: "js-floating-label", labelModifier: "floating-label", styleModifier: "form-group--sm form-group--dark", inputWrapperModifier: "select__input-wrapper position-relative js-quickfinder__child-input", name: "c0", id: "children", required: false, label: 'qf.Kinder'|trans, "options": options }) }} <div class="row js-quickfinder__childs"></div> {% if demi_core_configuration('getNearbySearchByLocation',[]) == 'active' or demi_core_configuration('getNearbySearchByLocation',[]) == 'checked' %} {{ include('Form/Includes/checkbox.html.twig', { styleModifier: "mt-3 js-quickfinder__search-nearby-container", label: 'demi.search.my-location' | trans | raw, name: 'qf-search-nearby', id: 'qf-search-nearby', checked: demi_core_configuration('getNearbySearchByLocation',[]) == 'checked' ? true : false, inputModifier: 'js-quickfinder__search-nearby' }) }} {% endif %} <button type="submit" class="btn btn-primary-light btn-block"> {{ 'qf.Unterkunft finden'|trans }} </button> </div> <div class="col-md-2 d-flex justify-content-center align-items-center"> <span class="quickfinder--horizontal-line" aria-hidden="true"></span> </div> <div class="col-md vertical-gutter__item"> {% if siteConfig.qfImgTeaser is instanceof('\\Pimcore\\Model\\Document\\Snippet') %} {{ pimcore_inc(siteConfig.qfImgTeaser, { 'isInNav': true, "ratio": 'square', "styleModifier": "m-auto" }) }} {% endif %} {% if siteConfig.qfImgTeaser2 is instanceof('\\Pimcore\\Model\\Document\\Snippet') %} <div class="mt-3"> {{ pimcore_inc(siteConfig.qfImgTeaser2, { 'isInNav': true, "ratio": 'square', "styleModifier": "m-auto" }) }} </div> {% endif %} </div> </div> </form> </section> </div> </template> </div></div>