{{#if results}}
    <div class="photo-grid">
        {{#each results}}
            {{#bindBlock this}}
                <div class="photo-grid__item" {{bind}}>
                    <article class="result hotel-result" data-uid="{{UID}}">
                        <div class="photo-card">
                            <div class="photo-card__image photo-card__image--action js-result-detail-action">
                                {{#if hotel.thumb}}
                                    <div class="photo-card__image-holder js-open-gallery" data-target=".info-card__modal" data-title="{{{hotel.name}}}" data-category="{{{hotel.category}}}">
                                        {{{renderPicture hotel.thumb "tiny"}}}
                                    </div>
                                {{/if}}

								{{#if hotel.offersThumbList}}
									<div class="info-card__offer-holder">
									{{#each hotel.offersThumbList}}
                                        <a href="{{urlDescription}}" target="_blank">
                                            <img class="info-card__image-holder--offer {{#if ../hotel.recommended}}withRecommended{{/if}} hidden-xs js-popover" data-toggle="popover" data-placement="bottom" data-title="{{i18n "Offers"}}"
                                                 data-trigger="hover" data-content="{{description}}" src="{{urlImage}}" alt="" />
                                            <br>
                                        </a>
                                            {{/each}}
                                    </div>	
								{{/if}}

                                {{#if hotel.recommended}}
                                    <div class="ribbon-1" title="{{i18n "recommended"}}">
                                        <i class="glyphicon glyphicon-star"></i>
                                        <strong class="sr-only">{{i18n "recommended"}}</strong>
                                    </div>
                                {{/if}}

                                <div class="photo-card__rating-wrapper">
                                    {{#if hotel.category}}
                                        <div class="photo-card__category">{{{hotel.category}}}</div>
                                    {{/if}}
                                    {{#if @root.config.showTripadvisor}}
				                        <div class="photo-card__rating js-tripadvisor-placeholder" data-id="{{hotel.ID}}" data-provider="{{hotel.providerID}}"></div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="photo-card__content">
                                <div class="photo-card__header">
                                    {{#if (logic (logic availability "and" availability.bestDeal) "or" hotel.recommended)}}
                                       <div class="photo-card__hot-deal"><span class="label label-info">{{i18n ""}}</span></div>
                                    {{/if}}
                                    <div class="photo-card__title photo-card__title--action js-result-detail-action" title="{{{hotel.name}}}">
                                        {{{hotel.name}}}
                                    </div>
                                    <div class="photo-card__location photo-card__location--action js-result-map-toggle"><span class="photo-card__location-icon glyphicon glyphicon-map-marker"></span> {{{hotel.zone}}}</div>
                                </div>
                                <div class="photo-card__actions">
                                    {{#if @root.config.googleMapsEnabled}}
                                    {{#ifCondAnd hotel.latitude hotel.longitude}}
                                    <div class="photo-card__action-item-wrapper">
                                        <a class="btn btn-secondary btn-small btn-block photo-card__action-item photo-card__action-item--map js-result-map-toggle"><span class="hidden glyphicon glyphicon-map-marker"></span> {{i18n "map"}}</a>
                                    </div>
                                    {{/ifCondAnd}}
                                    {{/if}}
                                    <div class="photo-card__action-item-wrapper">
                                        <a href="/hotels/details.aspx?UID={{UID}}&searchSessionID={{@root.searchSessionID}}{{#if presearch}}&presearch=true{{/if}}&hashParams={{paramsToString @root.filters}}{{#ifFindParameter availability.options "requiresRepricing" true}}&research=true{{/ifFindParameter}}" class="btn btn-secondary btn-small btn-block photo-card__action-item js-result-detail-action" target="_blank">{{i18n "info"}}</a>
                                    </div>
                                    <div class="photo-card__action-item-wrapper hidden-xs hidden-sm">
                                        <a class="btn btn-secondary btn-small photo-card__action-item photo-card__action-item--comparison js-add-to-comparison{{#if compare}} is-checked{{/if}}">{{i18n "compare"}}</a>
                                    </div>

                                </div>
                                <div class="photo-card__info-wrapper">
                                    {{#if (logic @root.config.showPayAtDestination "&&" availability.hasPayAtHotel)}}
                                        <div class="photo-card__legend-item photo-card__legend-item--pay-at-hotel">{{i18n "hotelPayType:hotel"}}</div>
                                    {{/if}}
                                    {{#if (logic (not availability.bestDeal) "&&" (logic availability.isOffer "&&" availability.offerDescription))}}
                                        <div class="photo-card__offer-info offer-info">
                                            <button type="button" class="btn offer-info__item"
                                                data-toggle="popover"
                                                data-placement="bottom"
                                                data-title="{{i18n "Offers"}}" 
                                                data-trigger="focus"
                                                data-container="body"
                                                data-content="{{{availability.offerDescription}}}">
                                                <span class="glyphicon glyphicon-offer"></span>
                                            </button>
                                        </div>
                                    {{/if}}
                                </div>
                                <div class="photo-card__price">
                                    {{#if availability.price}}
                                        <div class="photo-card__bestprice bestprice">
                                            <div class="bestprice__title">{{i18n "best stay price"}}</div>
                                            <div class="bestprice__price">
                                                <span class="bestprice__amount">{{{formatCurrency availability.price availability.currency "floor"}}}</span>
                                                <span class="bestprice__conversor">
                                                    <span class='js-currency-conversor' data-amount='{{availability.price}}' data-currency='{{availability.currency}}'>
                                                        <span class="glyphicon glyphicon-calc"></span>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    {{/if}}
                                    {{#if availability.options}}
                                        <button class="btn btn-tertiary photo-card__options-toggle js-options-toggle" type="button">{{i18n "Options"}}</button>
                                    {{/if}}
                                </div>

                            </div>
                        </div>
                        <div class="result__map-placeholder"><div class="result__map result__map--large"></div></div>
                        {{#if availability.options}}
                            <section class="result__options{{#unless @root.showingMoreOptions}} result__options--collapsed{{/unless}}">        
                                {{#eachSlice availability.options @root.config.optionsToShow 'left'}}
                                    {{> optionPartial}}
                                {{/eachSlice}}
                                {{#shouldShowMoreOptions @this @root.config.optionsToShow}}
                                    <div class="result__options-overflow">
                                        {{#eachSlice availability.options @root.config.optionsToShow 'right'}}
                                            {{> optionPartial}}
                                        {{/eachSlice}}
                                    </div>
                                    <div class="result__more-options-actions">
                                        <button class='btn show-more-options result__view-more-button' type="button"><span class="glyphicon glyphicon-circle-plus"></span>{{i18n "see more options"}}</button>
                                        <button class='btn show-less-options result__view-more-button' type="button"><span class="glyphicon glyphicon-circle-minus"></span>{{i18n "see less options"}}</button>
                                    </div>
                                {{/shouldShowMoreOptions}}
                            </section>
                        {{else}}
                            <section class="result__options">                        
                                <div class="result-option result-option--photo">
                                    <div class="result-option__booking--show-prices">
                                        <button type="button" class="btn btn-primary result-option__show-prices-button js-show-prices">{{i18n "show prices"}}</button>
                                    </div>
                                </div>
                            </section>
                        {{/if}}
                    </article>
                </div>

                {{#*inline 'optionPartial'}}
                    {{#bindBlock this}}
                        <div class="result-option result-option--photo result-option--is-pay-{{payType}}" data-option-id="{{ID}}" {{bind}}>
        
                            <div class="result-option__main">

                                <div class="result-option__heading">
                                    {{#eachGroupedByName roomList}}
                                        <div class="result-option__title" title="{{name}} {{contractName}}">{{numberOfRooms this groupedListLength}}{{name}} {{contractName}}</div>
                                        <div class="result-option__subtitle">{{../boardTypeName}}</div>
                                    {{/eachGroupedByName}}
                                </div>

                                <div class="result-option__cancel-policy">
                                    {{#if nonRefundable}}
                                    <button type="button" class="result-option__cancel-policy-toggle--non-refundable js-cancel-policy-toggle">{{i18n "Norefundable"}}</button>
                                    {{else if bookable}}
                                    <button type="button" class="result-option__cancel-policy-toggle js-cancel-policy-toggle">{{i18n "what if I cancel"}}</button> 
                                    {{/if}}
                                </div>

                                {{#ifComp rateType "=" "package"}}
                                <div class="result-option__ispackage">
                                    <div class="result-option-package__table">
                                        <a class="js-open-remote-modal result-option-package__row" href="../content/contentModal.aspx?id={{@root.config.packageRateContentID}}">
                                            <span class="result-option-package__col result-option-package__col--icon glyphicon glyphicon-package"></span>
                                            <span class="result-option-package__col result-option-package__col--text">{{@root.config.packageRateText}}</span>
                                        </a>
                                    </div>
                                </div>
                                {{/ifComp}}

                                <div class="result-option__offer-info">
                                    <div class="offer-info">
                                        {{#if offers}}
                                        <button type="button" class="btn offer-info__item" data-toggle="popover" data-placement="bottom" data-title="{{i18n "Offers"}}" 
                                                data-trigger="focus" data-html="true" data-content="{{> supplementContent offers}}">

                                            <span class="glyphicon glyphicon-offer"></span>
                                        </button>
                                        {{/if}}
                                        {{#if restrictions}}
                                        <button type="button" class="btn offer-info__item" data-toggle="popover" data-placement="bottom" data-title="{{i18n "atencion"}}"
                                                data-trigger="focus" data-html="true" data-content="{{> supplementContent restrictions}}">
                                            <span class="glyphicon glyphicon-exclamation"></span>
                                        </button>
                                        {{/if}}
                                        {{#if supplements}}
                                        <button type="button" class="btn offer-info__item" data-toggle="popover" data-placement="bottom" data-title="{{i18n "Supplements"}}" 
                                                data-trigger="focus" data-html="true" data-content="{{> supplementContent supplements}}">

                                            <span class="glyphicon glyphicon-supplement"></span>
                                        </button>
                                        {{/if}}
                                    </div>
                                </div>

                                {{#*inline 'supplementContent'}}
                                    <ul>
                                        {{#each this}}
                                            <li>
                                                {{#if name}}
                                                    {{#if description}}
                                                        <b>{{name}}</b>
                                                        <br />
                                                    {{else}}
                                                        {{name}}
                                                    {{/if}}
                                                {{/if}}
                                                {{description}}
                                            </li>
                                        {{/each}}
                                    </ul>
                                {{/inline}}

                                <div class="result-option__booking">                                     
                                    {{#if price}}
                                        <div class="result-option__price">    
                                            <div class="result-option-price">
                                                <span class="result-option-price__amount">{{{formatCurrency price currency "floor"}}}</span>
                                                <span class="result-option-price__conversor">
                                                    <span class='js-currency-conversor' data-amount='{{price}}' data-currency='{{currency}}'>
                                                        <span class="glyphicon glyphicon-calc"></span>
                                                    </span>
                                                </span>
                                                
                                            </div>          
                                            {{#if priceWithoutDiscount}}
                                            <div class="result-option-price result-option-price--without-discount">
                                                <s>
                                                    <span class="result-option-price__amount">{{{formatCurrency priceWithoutDiscount currency "floor"}}}</span>
                                                </s>
                                            </div>
                                            {{/if}}
                                        </div>
                                    {{/if}}   
                                    
                                    {{#if bookable}}
                                        {{#if available}}
                                            <button type="button" class="btn btn-primary result-option__book-button">{{i18n "book"}}</button>
                                        {{else}}
                                            <button type="button" class="btn btn-primary result-option__book-button result-option__book-button--on-request">{{i18n "request"}}</button>
                                        {{/if}}    
                                    {{else}}
                                        {{#if requiresRepricing}}
                                            <a href="/hotels/details.aspx?UID={{../UID}}&searchSessionID={{@root.searchSessionID}}&hashParams={{paramsToString @root.filters}}&research=true" class="btn btn btn-primary info-card__action-item js-result-detail-action pull-right" type="button" target="_blank">{{i18n "book"}}</a>
                                        {{else}}
                                        <span class="result-option__book-not-bookable pull-right">{{i18n "option not bookable"}}</span>
                                        {{/if}}
                                    {{/if}}
                                </div>
                            </div>

                            {{#if bookable}}
                            <div class="result-option__extended-info">
                                <div class="result-option__cancel-policy-placeholder"></div>
                            </div>
                            {{/if}}
                        </div>
                    {{/bindBlock}}
                {{/inline}}

            {{/bindBlock}}
        {{/each}}
    </div>
{{/if}}