<form action="" class="bg-[rgba(0,0,0,0.03)] px-[18px] pb-[18px] clearfix search-hotel js-searchForm js-searchFormHotel">
{% if cookieLastSearch is defined and cookieLastSearch != null %}
<div style="display:none">
<p id="js-cookieLastSearch-destination">{{ cookieLastSearch.destination }}</p>
<p id="js-cookieLastSearch-destinationLabel">{{ cookieLastSearch.destinationLabel }}</p>
<p id="js-cookieLastSearch-date1">{{ cookieLastSearch.date1 }}</p>
<p id="js-cookieLastSearch-date2">{{ cookieLastSearch.date2 }}</p>
<p id="js-cookieLastSearch-adults">{{ cookieLastSearch.adults }}</p>
<p id="js-cookieLastSearch-children">{{ cookieLastSearch.children }}</p>
{% if cookieLastSearch.childAge is iterable %}
{% for child in cookieLastSearch.childAge.age1 %}
<p id="js-cookieLastSearch-childrenAge{{ loop.index}}">{{ child }}</p>
{% endfor %}
{% endif %}
</div>
{% endif %}
{# START .search-header #}
<div class="search__header clearfix">
<h3 class="search__title hide-availengine">
<i class="icon icon_bundle_hotel search__title__icon hide-lap-and-up"></i>
<span class="">Comprar Hoteles</span><span class="hide-portable"> Baratos</span>
</h3>
</div>
{# END .search-header #}
{# START .search-body #}
<section>
<div id="hotelOptions" class="w-full grid grid-cols-12 gap-x-4 gap-y-4">
<div class="col-span-12 lg:col-span-5 float-left relative">
{# Autocomplete #}
<input type="hidden" name="parameters[destination]" id="destination" />
<div class="w-full bg-white border border-black/10 overflow-visible h-9 leading-9 cursor-text">
<div class="flex items-center h-full px-2">
<input id="destinationValidate" class="w-full h-full outline-none js-searchErrorInput js-scrollToTop js-selectOnFocus" type="text" name="parameters[destinationValidate]" placeholder="Ubicación del Hotel" autocomplete="off">
<span id="js-deleteInputDestination" class="material-symbols-rounded cursor-pointer text-[#888B8D] flex justify-center">close</span>
</div>
<div id="js-autocomplete-hotelModal" class="absolute z-30 bg-[#FFFFFF] l:bg-[#1E1E1E] text-[#2F2F2F] l:text-white py-6 px-4 w-full rounded-lg font-roboto flex flex-col gap-y-2 max-h-[400px] overflow-y-auto shadow-[0px_1px_12.2px_1px_rgba(0,0,0,0.10)]" style="display: none; scrollbar-width: none; -ms-overflow-style: none;" data-active="false"></div>
</div>
<label id="js-destinationError" class="label--error js-searchError" style="display: none;"></label>
</div>
{# End Autocomplete #}
{# DATES #}
<div id="datesdisplay1Id" class="grid grid-cols-12 gap-x-4 col-span-12 lg:col-span-7">
<div class="col-span-12 md:col-span-6">
<div class="form-group">
<div class="relative icon__input--inline icon_search_calendar-in js-createDatepicker js-datepicker-container-open" data-input="#date1" data-instancenbr="1" role="button" tabindex="0" data-tabopen="1">
<input type="hidden" name="parameters[date1]" id="date1" readonly="readonly" style="display:none">
<input type="text" id="js-createDatepicker1" name="parameters[date1validate]" placeholder="Fecha Ida" readonly="readonly" class="text-input input--white js-searchErrorInput js-inputDatepicker no-focus" tabindex="-1">
<img class="search-shared_datepicker-arrow-top js-datepicker-container-arrow-top hide-availengine" src="{{ asset('assets/'~ agency_folder.assetStyle() ~'/img/icon/arrow_datepicker_top.png') }}" alt="top-pointer"/>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6">
<div class="form-group">
<div class="relative icon__input--inline icon_search_calendar-out js-createDatepicker js-datepicker-container-open" data-input="#date-return1" data-instancenbr="1" role="button" tabindex="0" data-tabopen="1">
<input type="hidden" name="parameters[date-return1]" id="date-return1" readonly="readonly" style="display:none">
<input type="text" id="js-createDatepicker-return1" name="parameters[date1validate]" placeholder="Fecha Ida" readonly="readonly" class="text-input input--white js-searchErrorInput js-inputDatepicker no-focus" tabindex="-1">
<img class="search-shared_datepicker-arrow-top js-datepicker-container-arrow-top hide-availengine" src="{{ asset('assets/'~ agency_folder.assetStyle() ~'/img/icon/arrow_datepicker_top.png') }}" alt="top-pointer"/>
</div>
</div>
</div>
</div>
<label id="js-dateError" class="label--error js-searchError" style="display: none;"></label>
{# END DATES #}
</div>
</section>
{# END .search-body #}
{# START .search-footer #}
{% include twig_exists('@AviaturTwig/'~ agency_folder.twigFlux() ~'/Search/Hotel/hotelSearch_engine_footer.html.twig') %}
{# END .search-footer #}
</form>