1<#assign serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()>
2<#assign themeDisplay = serviceContext.getThemeDisplay() />
3<#include "${fullTemplatesPath}/utils/api-hotels.ftl">
4<#include "${fullTemplatesPath}/utils/dictionary.ftl">
5<#include "${fullTemplatesPath}/utils/url.ftl">
6<#include "${fullTemplatesPath}/utils/general.ftl">
7<#include "${fullTemplatesPath}/utils/media-links.ftl">
8<#assign dataHotel = getHotelWithRoomsByCodeAndBrandCode(HotelCode.getData(), BrandCode.getData())>
9<#if dataHotel?size != 0 && dataHotel[0].roomLinksContent?? && dataHotel[0].roomLinksContent?size != 0>
10<#if dataHotel[0].roomLinksContent?is_hash>
11 <#assign dataRooms = [dataHotel[0].roomLinksContent]>
12<#else>
13 <#assign dataRooms = dataHotel[0].roomLinksContent>
14</#if>
15<#assign rooms = []>
16<#assign suites = []>
17<#list dataRooms as Room>
18 <#if Room.category == "standardRoom" >
19 <#assign rooms = rooms + [Room]>
20 <#else>
21 <#assign suites = suites + [Room]>
22 </#if>
23</#list>
24
25<!-- partial: component/block/room-selector/room-selector.hbs -->
26<section class="room-selector content-spacing is-hidden" data-component="room-selector" data-scroll-component>
27
28 <div class="rooms-gallery-wrapper">
29
30 <div data-tabs>
31
32 <!-- partial: component/block/sticky-tab-header/sticky-tab-header.hbs -->
33 <div class="sticky-tab-header is-hidden" data-component="sticky-tab-header" data-scroll-component>
34 <div class="content-wrapper">
35 <div class="tabs-list-wrapper" data-tabs-header>
36 <div class="drag-wrapper" data-drag-wrapper>
37 <ul class="tabs-list" data-tabs-list>
38 <#if rooms?size != 0>
39 <li class="tabs-item" data-tab-nav-item>
40 <span data-tab-label>${_ROOMS[locale]} <sup>x${rooms?size}</sup></span>
41 </li>
42 </#if>
43 <#if suites?size != 0>
44 <li class="tabs-item" data-tab-nav-item>
45 <span data-tab-label>Suites <sup>x${suites?size}</sup></span>
46 </li>
47 </#if>
48 </ul>
49 <span class="underline" data-active-indicator></span>
50 </div>
51 </div>
52 </div>
53 </div>
54 <!-- / component/block/sticky-tab-header/sticky-tab-header.hbs -->
55
56 <div class="gallery-overflow">
57 <div class="content-wrapper">
58
59 <div class="gallery-wrapper" data-rooms-wrapper data-tab-content-container>
60 <#assign tabs = [rooms, suites] >
61
62 <#list tabs as tab>
63 <#if tab?size != 0>
64 <div class="tab-content" data-tab-content>
65
66 <!-- partial: component/block/room-selector-slider/room-selector-slider.hbs -->
67 <section class="room-selector-slider is-hidden" data-component="room-selector-slider" data-scroll-component>
68 <div class="gallery-wrapper" data-gallery-wrapper>
69 <div class="rooms-overflow-wrapper">
70 <div class="rooms-wrapper" data-gallery>
71 <#list tab as room>
72 <div class="room" data-gallery-item>
73 <div class="image-wrapper" data-room-image>
74
75 <!-- partial: component/general/picture/picture.hbs -->
76 <picture class="main-visual" data-component="picture">
77 <#-- <source media="(min-width: 768px)" srcset="fiesta-americana/image/room-selector/room-01.jpg"> -->
78 <#assign image = getRoomPreviewImageXS(room.mediaLinks) >
79 <img class="visual" src="${image}" alt="${room.name}">
80 </picture>
81 <!-- / component/general/picture/picture.hbs -->
82 </div>
83 <div class="detail-wrapper">
84 <h3 class="room-name heading-4">${room.name}</h3>
85 <ul class="amenity-list">
86 <#if room.totalCapacity?has_content>
87 <li class="amenity-item">
88 <!-- partial: component/general/icon/icon.hbs -->
89 <span class="icon amenity-icon" data-component="icon" data-icon="person-icon"></span>
90 <!-- / component/general/icon/icon.hbs -->
91 ${_CAPACITY[locale]?replace("%capacity%", room.totalCapacity)}</li>
92 </#if>
93
94 <#if room.beds?has_content>
95 <li class="amenity-item">
96 <!-- partial: component/general/icon/icon.hbs -->
97 <span class="icon amenity-icon" data-component="icon" data-icon="bed-icon"></span>
98 <!-- / component/general/icon/icon.hbs -->
99 <#if !room.beds?is_string >
100 ${room.beds} ${_BED[locale]}${(room.beds != 1)?then("s", "")}</li>
101 </#if>
102 </#if>
103
104 <#if room.dimension?has_content>
105 <li class="amenity-item">
106 <!-- partial: component/general/icon/icon.hbs -->
107 <span class="icon amenity-icon" data-component="icon" data-icon="size-icon"></span>
108 <!-- / component/general/icon/icon.hbs -->
109 ${room.dimension}</li>
110 </#if>
111 </ul>
112 <div class="cta-link-wrapper">
113
114 <!-- partial: component/general/cta-link/cta-link.hbs -->
115 <a href="${getRoomBaseUrl(dataHotel[0].friendlyUrlHotel, room.friendlyUrlRoom)}" class="cta-link outlined " title="${_SEE_MORE[locale]}" data-component="cta-link">
116 <span class="button-type copy">${_SEE_MORE[locale]}</span>
117
118 <!-- partial: component/general/button-arrow/button-arrow.hbs -->
119 <div class="button-arrow direction-right size-small outlined " data-component="button-arrow">
120
121 <!-- partial: component/general/icon/icon.hbs -->
122 <span class="icon circle-hover-icon" data-component="icon" data-icon="circle"></span>
123 <!-- / component/general/icon/icon.hbs -->
124
125 <!-- partial: component/general/icon/icon.hbs -->
126 <span class="icon circle-icon" data-component="icon" data-icon="circle"></span>
127 <!-- / component/general/icon/icon.hbs -->
128 <div class="chevron-wrapper">
129
130 <!-- partial: component/general/icon/icon.hbs -->
131 <span class="icon chevron-icon" data-component="icon" data-icon="chevron-right"></span>
132 <!-- / component/general/icon/icon.hbs -->
133 </div>
134 </div>
135 <!-- / component/general/button-arrow/button-arrow.hbs -->
136 </a>
137 <!-- / component/general/cta-link/cta-link.hbs -->
138 </div>
139 </div>
140 </div>
141 </#list>
142 </div>
143 </div>
144 </div>
145
146 <div class="controls-wrapper">
147 <ul class="controls-list">
148 <li>
149 <button class="control-button" data-control-button-prev>
150 <!-- partial: component/general/button-arrow/button-arrow.hbs -->
151 <div class="button-arrow direction-left size-big outlined " data-component="button-arrow">
152
153 <!-- partial: component/general/icon/icon.hbs -->
154 <span class="icon circle-hover-icon" data-component="icon" data-icon="circle"></span>
155 <!-- / component/general/icon/icon.hbs -->
156
157 <!-- partial: component/general/icon/icon.hbs -->
158 <span class="icon circle-icon" data-component="icon" data-icon="circle"></span>
159 <!-- / component/general/icon/icon.hbs -->
160 <div class="chevron-wrapper">
161
162 <!-- partial: component/general/icon/icon.hbs -->
163 <span class="icon chevron-icon" data-component="icon" data-icon="chevron-right"></span>
164 <!-- / component/general/icon/icon.hbs -->
165 </div>
166 </div>
167 <!-- / component/general/button-arrow/button-arrow.hbs -->
168 </button>
169 </li>
170 <li>
171 <button class="control-button" data-control-button-next>
172 <!-- partial: component/general/button-arrow/button-arrow.hbs -->
173 <div class="button-arrow direction-right size-big outlined " data-component="button-arrow">
174
175 <!-- partial: component/general/icon/icon.hbs -->
176 <span class="icon circle-hover-icon" data-component="icon" data-icon="circle"></span>
177 <!-- / component/general/icon/icon.hbs -->
178
179 <!-- partial: component/general/icon/icon.hbs -->
180 <span class="icon circle-icon" data-component="icon" data-icon="circle"></span>
181 <!-- / component/general/icon/icon.hbs -->
182 <div class="chevron-wrapper">
183
184 <!-- partial: component/general/icon/icon.hbs -->
185 <span class="icon chevron-icon" data-component="icon" data-icon="chevron-right"></span>
186 <!-- / component/general/icon/icon.hbs -->
187 </div>
188 </div>
189 <!-- / component/general/button-arrow/button-arrow.hbs -->
190 </button>
191 </li>
192 </ul>
193 </div>
194
195 <div class="bullets-wrapper">
196
197 <!-- partial: component/general/bullets/bullets.hbs -->
198 <ol class="bullet-list" data-bullet-list data-component="bullets">
199 <#list tab as room>
200 <li class="bullet" data-bullet>
201 <span class="icon"></span>
202 </li>
203 </#list>
204 </ol>
205 <!-- / component/general/bullets/bullets.hbs -->
206 </div>
207
208 </section>
209 <!-- / component/block/room-selector-slider/room-selector-slider.hbs -->
210 </div>
211 </#if>
212 </#list>
213 </div>
214 </div>
215 </div>
216 </div>
217 </div>
218</section>
219<!-- / component/block/room-selector/room-selector.hbs -->
220<#else>
221<h1>ERROR!</h1>
222</#if>