{{!-- Result item --}}
<div class="trppr_search_accommodations_result row" data-id="trppr_accommodation_{{:id}}">
    <div class="col-12" id="{{:id}}">
        <div class="r_item mb-4 position-relative tr-imagegallery">
            <div class="acco-images">
                <div class="row h-100 align-items-stretch g-0">

                    <div class="col-12 col-md-9 col-lg-6">
                        <div class="r-image first l-r h-100 position-relative" style="background-image:url('https://img1-cdn.travelpulse.nl/noimages/no-image-acco.png');">
                            {{if images[0]}}
                            <div class="bgimage" data-src="{{:images[0].thumbnail}}" title="{{:images[0].alt}}"><img class="img-fluid" src="{{:images[0].thumbnail}}" alt="{{:images[0].alt}}" loading="lazy" width="3" height="2" onerror="this.style.display='none'"/></div>
                            {{/if}}
                            {{if criteria.items.rating}}
                                <a href="{{:criteria.items.rating.link}}" target="_blank">
                                    <div class="ttit d-flex justify-content-center align-items-center">
                                        <div class="d-flex align-items-center justify-content-center me-2 rating
                                        {{if (criteria.items.rating.id >= 10) && (criteria.items.rating.id < 50) }}ttitred
                                        {{else (criteria.items.rating.id >= 50) && (criteria.items.rating.id < 70) }}ttityellow
                                        {{else (criteria.items.rating.id >= 70) && (criteria.items.rating.id < 80) }}ttitlightgreen
                                        {{else criteria.items.rating.id >= 80 }}ttitgreen
                                        {{/if}}
                                        ">{{:criteria.items.rating.i18n}}</div>
                                        <span class="ttit-rating-title fw-bold text-white">
                                            {{if (criteria.items.rating.id >= 10) && (criteria.items.rating.id < 20) }}{{>i18n('Bad')}}
                                            {{else (criteria.items.rating.id >= 20) && (criteria.items.rating.id < 30) }}{{>i18n('Fair')}}
                                            {{else (criteria.items.rating.id >= 30) && (criteria.items.rating.id < 40) }}{{>i18n('Decent')}}
                                            {{else (criteria.items.rating.id >= 40) && (criteria.items.rating.id < 50) }}{{>i18n('Acceptable')}}
                                            {{else (criteria.items.rating.id >= 50) && (criteria.items.rating.id < 60) }}{{>i18n('Average')}}
                                            {{else (criteria.items.rating.id >= 60) && (criteria.items.rating.id < 70) }}{{>i18n('Good')}}
                                            {{else (criteria.items.rating.id >= 70) && (criteria.items.rating.id < 80) }}{{>i18n('Excellent')}}
                                            {{else (criteria.items.rating.id >= 80) && (criteria.items.rating.id < 90) }}{{>i18n('Fantastic')}}
                                            {{else (criteria.items.rating.id >= 90) && (criteria.items.rating.id < 100) }}{{>i18n('Outstanding')}}
                                            {{else criteria.items.rating.id >= 100 }}{{>i18n('Exceptional')}}
                                            {{/if}}
                                        </span>
                                    </div>
                                </a>
                            {{/if}}
                        </div>
                    </div>
                    <div class="col-12 d-none d-lg-block col-lg-3">
                        <div class="r-image l-r h-100 position-relative" style="background-image:url('https://img1-cdn.travelpulse.nl/noimages/no-image-acco.png');">
                            {{if images[1]}}
                                <div class="bgimage" data-src="{{:images[1].thumbnail}}" title="{{:images[1].alt}}"><img class="img-fluid" src="{{:images[1].thumbnail}}" alt="{{:images[1].alt}}" loading="lazy" width="3" height="2" onerror="this.style.display='none'"/></div>
                            {{/if}}
                        </div>
                    </div>
                    <div class="col-12 col-md-3 d-none d-md-block">
                        <div class="row g-0 h-100">
                            <div class="col-12">
                                <div class="r-image l-b h-100 position-relative" style="background-image:url('https://img1-cdn.travelpulse.nl/noimages/no-image-acco.png');">
                                    {{if images[2]}}
                                        <div class="bgimage" data-src="{{:images[2].thumbnail}}" title="{{:images[2].alt}}"><img class="img-fluid" src="{{:images[2].thumbnail}}" alt="{{:images[2].alt}}" loading="lazy" width="3" height="2" onerror="this.style.display='none'"/></div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="r-image h-100 position-relative extraimg" style="background-image:url('https://img1-cdn.travelpulse.nl/noimages/no-image-acco.png');">
                                    {{if images[3]}}
                                    <div class="bgimage" data-src="{{:images[3].thumbnail}}" title="{{:images[3].alt}}"><img class="img-fluid" src="{{:images[3].thumbnail}}" alt="{{:images[3].alt}}" loading="lazy" width="3" height="2" onerror="this.style.display='none'"/>
                                        <span>{{>i18n('View all the')}} {{>i18n('pictures')}}</span>
                                    </div>
                                    {{/if}}
                                </div>
                            </div>

                        </div>
                    </div>
                    {{for images start=0 end=16}}
                        {{if #index > 4}}
                            <a href="{{>#data.url}}" class="bgimage d-none"><img class="img-fluid opacity o-0" src="{{>#data.url}}" alt="{{>#data.alt}}" loading="lazy" width="3" height="2" onerror="this.style.display='none'" /></a>
                        {{/if}}
                    {{/for}}

                </div><!--end row-->
            </div>

            <div class="row h-100 align-items-stretch g-0">

                <div class="col-12 position-relative">
                    <div class="card-body">

                        <div class="row">
                            <div class="col-12 col-md-6 col-lg-7 col-xl-7">

                                {{if criteria.items.starclassification}}
                                <div class="tr-stars d-flex nowrap" title="{{>criteria.items.starclassification.i18n}}">
                                    {{if criteria.items.starclassification.stars == 0}}
                                        {{>criteria.items.starclassification.i18n}}
                                    {{else}}
                                        {{for start=0 end=(criteria.items.starclassification.stars - (criteria.items.starclassification.stars % 1))}}
                                            <i class="fa-solid fa-star"></i>
                                        {{/for}}
                                        {{if (criteria.items.starclassification.stars % 1 != 0)}}
                                            <i class="fa-solid fa-star-half"></i>
                                        {{/if}}
                                    {{/if}}
                                </div>
                                {{/if}}
                                
                                <div class="d-xl-flex align-items-center">
                                    <h2 class="m-0 d-inline-flex fs-5 me-2">{{:name}}</h2>
                                    <div style="display:none;z-index: 2;" class="text-nowrap text-gray position-relative p-0 btn btn-favourites-save {{if favourite}}saved{{/if}} trppr-favourites-product-{{:id}}" onclick="$objTrpprMain.favourite(this, '{{:id}}', '{{>slug}}', '{{>name.replace("'", "")}}'); return false;">
                                        <i class="fa-solid fa-pipe"></i> {{>i18n('Add to favourites')}}
                                        <i class="fa-solid fa-xl fa-heart"></i>
                                    </div>
                                </div>
                                
                                <nav aria-label="breadcrumb" class="mt-2">
                                    <ol class="breadcrumb p-0 mb-2">
                                        {{if criteria.items.country.i18n}}
                                            <li class="home breadcrumb-item small" style="z-index: 19;">{{:criteria.items.country.i18n}}<span class="breadcrumbs__separator"></span></li>
                                        {{/if}}
                                        {{if criteria.items.district.i18n}}
                                            <li class="breadcrumb-item small" style="z-index: 18;">{{:criteria.items.district.i18n}}<span class="breadcrumbs__separator"></span></li>
                                        {{/if}}
                                        {{if criteria.items.place.i18n}}
                                            <li class="breadcrumb-item small" style="z-index: 17;">{{:criteria.items.place.i18n}}<span class="breadcrumbs__separator"></span></li>
                                        {{/if}}
                                    </ol>
                                </nav>

                                <div class="d-flex mt-2 fw-bold">
                                    {{if criteria.items.duration}}
                                        {{if criteria.items.duration.i18n}}
                                            {{:criteria.items.duration.i18n}}, 
                                        {{/if}}
                                    {{/if}}
                                    {{if criteria.items.boardtype}}
                                        {{if criteria.items.boardtype.i18n}}
                                            {{:criteria.items.boardtype.i18n}}, 
                                        {{/if}}
                                    {{/if}}
                                    {{if criteria.items.departureairport}}
                                        {{if criteria.items.departureairport.i18n}}
                                            {{:criteria.items.departureairport.i18n}}
                                        {{/if}}
                                    {{/if}}
                                </div>

                                {{if criteria.items.characteristics}}
                                <div class="characteristics mt-2">
                                    <ul class="m-0 d-none d-sm-flex row g-1">
                                        {{props criteria.items.characteristics sort="i18n" onerror='' start=0 end=4}}
                                            {{if prop.i18n  onerror=''}}
                                                <li class="col-6 text-gray"><i class="fa-solid fa-check me-1 mb-1 text-green"></i>{{>prop.i18n  onerror=''}}</li>
                                            {{/if}}
                                        {{/props}}
                                    </ul>
                                </div>
                                {{/if}}

                                <div class="mt-2 d-none d-md-flex flex-wrap">
                                {{props criteria.items.traveltype}}
                                    <span class="me-1 mb-1 badge badge-traveltype id{{>prop.id}}" title="{{>prop.i18n}}">{{>prop.i18n}}</span>
                                {{/props}}
                                </div>

                            </div>
                            <div class="col-12 col-md-6 col-lg-5 col-xl-5 text-md-end">
                                <div class="p-3 h-100 bg-lightgray  d-flex flex-column">
                                    <div class="tripicon position-relative z-2" data-bs-toggle="tooltip" title="{{:criteria.items.transporttype.i18n}} & {{if meta.includes('including_transfer') }}Transfer &{{/if}} {{:criteria.items.accommodationtype.i18n}}">
                                        {{if criteria.items.transporttype}}
                                            <i class="fa-solid fa-lg 
                                            {{if criteria.items.transporttype.id == 1}}fa-bus
                                            {{else criteria.items.transporttype.id == 2}}fa-car-side
                                            {{else criteria.items.transporttype.id == 3}}fa-ship
                                            {{else criteria.items.transporttype.id == 4}}fa-train
                                            {{else criteria.items.transporttype.id == 5}}fa-plane-departure{{/if}}
                                            " alt="{{:criteria.items.transporttype.i18n}}"></i>
                                            <i class="fa-solid fa-2xs fa-plus"></i>
                                        {{/if}}

                                        {{if meta.includes('including_transfer') }}
                                            <i class="fa-solid fa-lg fa-taxi-bus"></i>
                                            <i class="fa-solid fa-2xs fa-plus"></i>
                                        {{/if}}

                                        <i class="fa-solid fa-lg fa-hotel" alt="{{:criteria.items.accommodationtype.i18n}}"></i>
                                    </div>

                                    <div class="row flex-md-column mb-2">
                                        {{if criteria.items.startdate}}
                                            {{if criteria.items.startdate.i18n}}
                                                <div class="col mt-2">{{:criteria.items.startdate.weekday_full}}<br>{{:criteria.items.startdate.date_short}}</div>
                                            {{/if}}
                                        {{/if}}

                                        <div class="col tr-pricee mt-2">
                                            {{if prices}}
                                                {{if prices.base.i18n}}
                                                <div class="d-flex flex-column">
                                                    <div class="bottom d-flex align-items-center justify-content-md-end">
                                                        <span class="">v.a. <span class="fw-bold">{{:prices.total.i18n}}</span> p.p.</span>
                                                    </div>
                                                    <span class="basedon">{{:i18n('Based on 2 travelers')}}{{if i18n('price_mutation_info_ui', false)}}<br><br>{{>i18n('price_mutation_info_ui')}}{{/if}}</span>
                                                </div>
                                                {{/if}}
                                            {{/if}}
                                        </div>
                                    </div>

                                    <a class="btn btn-primary position-relative mt-auto w-100" href="{{if slug}}{{>slug}}&{{>query}}{{/if}}" title="{{>i18n('Book a holiday to')}} {{:name}}" onclick="return $objPage.showAccommodationLink({{:id}}, '{{:query}}');" style="z-index: 2;">{{>i18n('View')}}
                                        {{if criteria.items.accommodationtype}}
                                            {{if criteria.items.accommodationtype.i18n}}
                                                {{:criteria.items.accommodationtype.i18n}}
                                            {{/if}}
                                        {{/if}}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <a class="stretched-link" href="{{if slug}}{{>slug}}&{{>query}}{{/if}}" title="{{>i18n('Book a holiday to')}} {{:name}}" onclick="return $objPage.showAccommodationLink({{:id}}, '{{:query}}');"></a>

                    </div><!--end card-body-->
                </div>

            </div><!--end row-->
            
        </div>
    </div>
</div>