<section data-b2c-pagina-hotel style="display:none;">

    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-3 left-bar" data-b2c-hotel-filtros></div>
            <div class="col-md-12 col-sm-12 col-lg-9">
                <div class="ordenacao">
                    <div>
                        <a class="btn-abre-filtro" onclick="$('.left-bar').toggleClass('open')">
                            <i class="fas fa-filter"></i>
                            {{ __('filtrar') }}
                        </a>
                    </div>
                    <div>
                        <p>{{ __('ordenarPor') }}</p>
                        <select name="" id="" data-b2c-input="ordenacao">
                            <option value="recomendado|ASC" selected="selected">{{ __('recomendado') }}</option>
                            <option value="preco|ASC">{{ __('menorPreco') }}</option>
                            <option value="preco|DESC">{{ __('maiorPreco') }}</option>
                            <option value="nome|ASC">A~Z</option>
                            <option value="nome|DESC">Z~A</option>
                        </select>
                    </div>
                </div>

                <div class="" data-b2c-hotel-noresult style="display: none">
                    <div style="text-align: center;width: 100%;font-size: 16px;">{{ __('nenhumResultadoEncontrado')|raw }}</div>
                </div>

                <div data-b2c-animated-loading-hotel>
                    <div class="row hotel-item animated">
                        <div class="col-md-4 col-sm-12 animated-background img"></div>
                        <div class="col-md-5 col-sm-12">
                            <div class="image animated-background desc1"></div>
                            <div class="image animated-background desc2"></div>
                            <div class="image animated-background desc3"></div>
                        </div>
                        <div class="col-md-3 col-sm-12 price-box">
                            <div class="image animated-background preco"></div>
                            <div class="image animated-background btn"></div>
                        </div>
                    </div>
                    <div class="row hotel-item animated">
                        <div class="col-md-4 col-sm-12 animated-background img"></div>
                        <div class="col-md-5 col-sm-12">
                            <div class="image animated-background desc1"></div>
                            <div class="image animated-background desc2"></div>
                            <div class="image animated-background desc3"></div>
                        </div>
                        <div class="col-md-3 col-sm-12 price-box">
                            <div class="image animated-background preco"></div>
                            <div class="image animated-background btn"></div>
                        </div>
                    </div>
                    <div class="row hotel-item animated">
                        <div class="col-md-4 col-sm-12 animated-background img"></div>
                        <div class="col-md-5 col-sm-12">
                            <div class="image animated-background desc1"></div>
                            <div class="image animated-background desc2"></div>
                            <div class="image animated-background desc3"></div>
                        </div>
                        <div class="col-md-3 col-sm-12 price-box">
                            <div class="image animated-background preco"></div>
                            <div class="image animated-background btn"></div>
                        </div>
                    </div>
                    <div class="row hotel-item animated">
                        <div class="col-md-4 col-sm-12 animated-background img"></div>
                        <div class="col-md-5 col-sm-12">
                            <div class="image animated-background desc1"></div>
                            <div class="image animated-background desc2"></div>
                            <div class="image animated-background desc3"></div>
                        </div>
                        <div class="col-md-3 col-sm-12 price-box">
                            <div class="image animated-background preco"></div>
                            <div class="image animated-background btn"></div>
                        </div>
                    </div>
                </div>

                <div class="hotelList" data-b2c-hotel-list></div>

                <div data-b2c-paginacao></div>
            </div>
        </div>
    </div>

    {% include 'components/Hotel/HotelItem.twig' %}
    {% include 'components/Hotel/Filtros.twig' %}
</section>