1<div class="bgContainer bgContainer--shapeBottomStart bgContainer--white">
2 <#if (shapeBackgroundImage.getData())?? && shapeBackgroundImage.getData() != "">
3 <img class="bgContainer__shape bgContainer__shape--1" ale="background shape" width="417" height="1172" data-fileentryid="${shapeBackgroundImage.getAttribute("fileEntryId")}" src="${shapeBackgroundImage.getData()}" />
4 </#if>
5 <!-- begin sections/filteredGrid -->
6 <section
7 class="filteredGrid filteredGrid--transparent filteredGrid--smallPaddingTop filteredGrid--smallPaddingBottom">
8 <div class="filteredGrid__inner wrapper" data-scroll-anim="">
9
10 <!-- begin components/heading -->
11 <div class="heading heading--horizontal heading--horizontal11 filteredGrid__heading"
12 data-scroll-anim-item="fadeInStart;0;0.3;easeOutCubic" style="transform: translateX(0px); opacity: 1;">
13 <h2 class="heading__title"><#if (title.getData())??>
14 ${title.getData()}
15 </#if></h2>
16 <h3 class="heading__subtitle"><#if (subtitle.getData())??>
17 ${subtitle.getData()}
18 </#if></h3>
19 <p class="heading__text"><#if (lead.getData())??>
20 ${lead.getData()}
21 </#if></p>
22 </div>
23 <!-- end components/heading -->
24 <div class="filteredGrid__filters">
25 <div class="filteredGrid__label"><#if (searchText.getData())??>${searchText.getData()}</#if></div>
26 <div class="filteredGrid__fields">
27 <#if categoryGroup.getSiblings()?has_content>
28 <#assign seq = categoryGroup.getSiblings()>
29 <#list categoryGroup.getSiblings() as cur_category_group>
30 <div id="hotel-filter-${cur_category_group?index}" class="filteredGrid__field">
31
32 <!-- begin components/select -->
33
34 <div class="select select--skies select--placeholder" data-input-label="select--filled"
35 data-custom-select="" data-custom-select-theme="skies">
36 <select id="<#if (cur_category_group.category.getData())??>${cur_category_group.category.getData()}
37</#if>" name="<#if (cur_category_group.category.getData())??>${cur_category_group.category.getData()}</#if>" class="select__select select__input--hidden" data-input-label-input="" data-custom-select-input="">
38 <option value="" class="select__option" selected="selected"></option>
39 <#if cur_category_group.option.getSiblings()?has_content>
40 <#list cur_category_group.option.getSiblings() as cur_categoryGroup_option>
41 <#if (cur_categoryGroup_option.getData())??>
42 <option value="${cur_categoryGroup_option.getData()}"
43 class="select__option">${cur_categoryGroup_option.getData()}</option>
44
45 </#if>
46 </#list>
47 </#if>
48
49 </select>
50 <label for="<#if (cur_category_group.category.getData())??>${cur_category_group.category.getData()}</#if>" class="select__label"><#if (cur_category_group.category.getData())??>
51 ${cur_category_group.category.getData()}
52 </#if>
53 </label>
54 <span class="input__error"></span>
55 </div>
56
57 <!-- end components/select -->
58 </div>
59 </#list>
60 </#if>
61
62 </div>
63 </div>
64
65 <div class="filteredGrid__grid">
66
67 <#if card.getSiblings()?has_content>
68 <#list card.getSiblings() as element>
69 <#if (element.cardLink.getData()?has_content)>
70 <a href="<#if (element.cardLink.getData())??>${element.cardLink.getData()}</#if>" class="gridTile gridTile--default filteredGrid__item" data-card" <#if getterUtil.getBoolean(element.openInNewTab.getData())>target="_blank"</#if>
71 >
72 <#else>
73 <a data-senna-off="true" href="${element.linkToPage.getFriendlyUrl()}" class="gridTile gridTile--default filteredGrid__item" data-card" <#if getterUtil.getBoolean(element.openInNewTab.getData())>target="_blank"</#if>>
74 </#if>
75 <div class="gridTile__label gridTile__label--top"><#if getterUtil.getBoolean(element.opens.getData())>OPENS<#elseif getterUtil.getBoolean(element.planned.getData())><#else></#if></div>
76 <#if element.cardCategory.getSiblings()?has_content>
77 <#list element.cardCategory.getSiblings() as cur_card_category>
78 <input class="hidden-input" type="hidden"
79 data-select-id="${cur_card_category?index}"
80 data-input-id="${element_index}"
81 value="<#if (cur_card_category.categoryValue.getData())??>${cur_card_category.categoryValue.getData()}</#if>"
82 >
83 </#list>
84 </#if>
85 <div class="gridTile__logo">
86 <#if (element.cardDefaultImage.getData())?? && element.cardDefaultImage.getData() != "">
87 <img width="140" height="30" class="gridTile__logoImg gridTile__logoImg--default"
88 alt="${element.cardDefaultImage.getAttribute("alt")}"
89 data-fileentryid="${element.cardDefaultImage.getAttribute("fileEntryId")}"
90 src="${element.cardDefaultImage.getData()}"/>
91 </#if><#if (element.cardOverlayImage.getData())?? && element.cardOverlayImage.getData() != "">
92 <img width="140" height="30" class="gridTile__logoImg gridTile__logoImg--hover"
93 alt="${element.cardOverlayImage.getAttribute("alt")}"
94 data-fileentryid="${element.cardOverlayImage.getAttribute("fileEntryId")}"
95 src="${element.cardOverlayImage.getData()}"/>
96 </#if>
97 </div>
98 <div class="gridTile__label gridTile__label--bottom"><#if (element.date.getData())??>${element.date.getData()}</#if>
99 </div>
100
101 </a>
102 </#list>
103 </#if>
104
105 </div>
106 </div>
107 </section>
108 <!-- end sections/filteredGrid -->
109</div>
110<script>
111 function getValues(select) {
112 const newArray = []
113 var inputs = select.querySelector('.select__value');
114 inputs.forEach(function (input) {
115 if (!!input.innerHTML.trim()) {
116 newArray.push(input.innerHTML.trim());
117 }
118 })
119 return newArray;
120 }
121
122 function Listen() {
123 var filterSelects = document.querySelectorAll('.select');
124 const cards = document.querySelectorAll(`[data-card]`);
125 function getCardValues(card) {
126 const CardValueArray = []
127 var inputs = card.querySelectorAll('.hidden-input');
128 inputs.forEach(function (input) {
129 if (!!input.value.trim()) {
130 CardValueArray.push(input.value.trim());
131 }
132 })
133 return CardValueArray;
134 }
135 function updateCardVisibility() {
136 cards.forEach(function (card) {
137 const cardValues = Array.from(card.querySelectorAll('.hidden-input'));
138 const cardMatches = Array.from(filterSelects).every(function (filterSelect, selectIndex) {
139 const selectedValue = filterSelect.querySelector('.select__value').innerHTML;
140 console.log("selectedValue " + selectedValue);
141 const hasMatchingValue = cardValues.some(function (cardValue) {
142 console.log(cardValue.value);
143
144 return cardValue.dataset.selectId == selectIndex && cardValue.value.trim() == selectedValue.trim();
145 });
146 return selectedValue === '' || hasMatchingValue;
147 });
148 card.style.display = cardMatches ? 'flex' : 'none';
149 });
150 }
151 filterSelects.forEach(function (filterSelect) {
152 const selectInSelect = filterSelect.querySelector('select');
153 selectInSelect.addEventListener('blur', updateCardVisibility);
154 });
155 }
156 Listen();
157
158
159</script>
