1<#-- MAPEO CAMPOS NUEVOS -->
2<#assign tipo = (A_tipo.getData()!'')?has_content?then(A_tipo.getData(), "") />
3<#assign modalidad = (A_modalidad.getData()!'')?has_content?then(A_modalidad.getData(), "") />
4<#assign lugar = A_lugar.getData()!"" />
5<#assign imagen = A_imagen.getData()!"" />
6<#assign titulo = A_titulo_largo.getData()!"" />
7<#assign precio = A_precio.getData()!"" />
8<#assign fechaInicio = A_fecha_inicio.getData()!"" />
9<#assign esDirecto = modalidad?lower_case == "en directo" />
10<#assign icon = icon />
11
12<#-- ASIGNACIÓN BACKGROUND SEGÚN tipo -->
13<#assign bg = "diagonal" />
14<#assign typeText = tipo />
15<#if tipo?lower_case == "actividad">
16 <#assign bg = "diagonal" />
17 <#assign typeText = "Actividad" />
18<#elseif tipo?lower_case == "aprender">
19 <#assign bg = "red" />
20 <#assign typeText = "Aprender" />
21<#elseif tipo?lower_case == "enseñar">
22 <#assign bg = "red" />
23 <#assign typeText = "Enseñar" />
24<#elseif tipo?lower_case == "certifícate" || tipo?lower_case == "certificate">
25 <#assign bg = "dark" />
26 <#assign typeText = "Certifícate" />
27</#if>
28
29<#-- ALERTAS -->
30<#assign iconSize = "btn-icon-medium" />
31<#assign labelText = "" />
32<#if precio == "free">
33 <#assign labelText = "Gratuita" />
34<#elseif precio == "full">
35 <#assign labelText = "Aforo completo" />
36<#elseif precio == "cancelled">
37 <#assign labelText = "Cancelado" />
38<#elseif precio == "expired">
39 <#assign labelText = "Fuera de plazo" />
40<#elseif precio == "open">
41 <#assign labelText = "Inscripción abierta" />
42<#elseif precio == "last-spots">
43 <#assign labelText = "Últimas plazas" />
44</#if>
45
46<#if precio == "expired" || precio == "full" || precio == "cancelled">
47 <#assign cssAlert = "alert-danger" />
48 <#assign classStroke = "stroke-primary" />
49 <#if precio == "expired">
50 <#assign spriteIcon = "BellNotification" />
51 <#elseif precio == "full">
52 <#assign spriteIcon = "User Single" />
53 <#else>
54 <#assign spriteIcon = "Closed" iconSize = "" />
55 </#if>
56<#elseif precio == "open">
57 <#assign cssAlert = "alert-success" />
58 <#assign classStroke = "stroke-success" />
59 <#assign spriteIcon = "UserEdit" />
60<#elseif precio == "last-spots">
61 <#assign cssAlert = "alert-warning" />
62 <#assign classStroke = "stroke-warning" />
63 <#assign spriteIcon = "Rocket" />
64<#else>
65 <#assign cssAlert = "alert-info" />
66 <#assign classStroke = "stroke-lighter" />
67 <#assign spriteIcon = "Tickets" />
68</#if>
69
70<#-- CATEGORÍAS -->
71<#assign fullURL = "" />
72<#assign resourcePrimKey = .vars["reserved-article-resource-prim-key"].data?number />
73<#assign assetEntryService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") />
74<#assign assetEntry = assetEntryService.getEntry("com.liferay.journal.model.JournalArticle", resourcePrimKey) />
75<#assign categories = assetEntry.getCategories() />
76
77<#-- FECHA -->
78<#assign classDay = "d-flex align-items-baseline" />
79<#assign dateTimeData = "" />
80<#assign endTime = "" />
81<#if fechaInicio?matches("^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}$")>
82 <#assign dateTimeData = fechaInicio?datetime("yyyy-MM-dd HH:mm") />
83 <#assign duracionMin = 60 />
84 <#assign endTimeMillis = dateTimeData?long + (duracionMin * 60 * 1000) />
85 <#assign endTime = endTimeMillis?number_to_datetime />
86</#if>
87
88<div id="comp-card-calendar_${randomNamespace}" class="comp-card-calendar comp-card-calendar--highlighted"
89 role="button" tabindex="0" aria-label='Acceder al detalle de: ${A_titulo_largo.getData()!""}'>
90
91 <div class="comp-card-calendar__data comp-gradient-bg comp-gradient-bg--${bg} d-flex flex-column justify-content-between">
92 <div>
93 <#if (icon.getData())?? && icon.getData() != "">
94 <div class="comp-card-calendar__icon mb-space-48">
95 <img alt="${icon.getAttribute("alt")}" data-fileentryid="${icon.getAttribute("fileEntryId")}" src="${icon.getData()}" />
96 </div>
97 </#if>
98
99 <#if dateTimeData?has_content>
100 <div class="comp-date d-inline-flex align-items-center t-display-s">
101 <div class="${classDay}">
102 <div>${dateTimeData?string("dd")}</div>
103 <div class="text-uppercase small">${dateTimeData?string("MMM")}</div>
104 </div>
105 <div class="comp-date__separator--day d-flex flex-column justify-center"><span></span></div>
106 </div>
107 </#if>
108
109 <#if esDirecto>
110 <div class="comp-alerts-live rounded px-space-12 py-space-4 mb-space-56 mt-space-16 mb-md-space-0 d-inline-flex justify-content-center align-items-center alert mb-space-0">
111 <svg class="btn-icon mr-space-8" focusable="false" role="presentation"><use xlink:href="${siteSpritemap}#circle" /></svg>
112 <span class="t-text-m semibold">En directo</span>
113 </div>
114 </#if>
115 </div>
116
117 <div class="d-flex flex-column flex-lg-row align-items-end comp-card-calendar__data__items">
118 <div>
119 <div class="t-display-s mt-space-16 mb-space-16"><div class="clearfix small">${typeText}</div></div>
120 <div class="text-ellipsis-3 t-encabezado-xl">
121 <div class="clearfix component-paragraph text-break">${titulo}</div>
122 </div>
123 </div>
124
125 <div class="w-100 comp-card-calendar__info">
126 <div class="block-light-mode--white p-space-32 rounded mt-space-32 mt-lg-0">
127 <div class="d-flex align-items-start flex-wrap">
128 <#list categories as category>
129 <a href="/search?q=" target="" class="comp-content-tag mb-4">
130 <span class="t-tag p-space-12">${category.getName()}</span>
131 </a>
132 </#list>
133
134 <#if precio?has_content>
135 <div class="comp-alerts-labels comp-alerts-labels--h37 ${iconSize} px-space-12 py-0 d-flex justify-content-center align-content-center align-items-center alert ${cssAlert} mb-4">
136 <svg class="btn-icon ${classStroke} mr-space-8" focusable="false" role="presentation">
137 <use xlink:href="${siteSpritemap}#${spriteIcon}" />
138 </svg>
139 <span class="t-text-m">${labelText}</span>
140 </div>
141 </#if>
142 </div>
143
144 <div class="border-top pt-space-16 mt-space-16 border-bottom pb-space-16 mb-space-16">
145 <div class="comp-dates d-flex flex-column gap-3 py-space-8">
146 <#if dateTimeData?has_content>
147 <div class="d-flex align-items-center">
148 <svg class="stroke-dark" focusable="false" role="presentation"><use xlink:href="${siteSpritemap}#Calendar" /></svg>
149 <span class="semibold mr-space-4">${dateTimeData?string("dd")}</span> <span class="semibold">${dateTimeData?string("MMM")}</span>. de <span class="semibold mr-space-4 ml-space-4">${dateTimeData?string("HH:mm")} h a</span> <span class="semibold mr-space-4">${endTime?string("HH:mm")} h</span>
150 </div>
151 </#if>
152 </div>
153 </div>
154
155 <div class="d-flex align-items-end justify-content-between w-100 column-gap-4">
156 <div class="comp-card-calendar__mode d-flex align-items-center py-space-8">
157 <div class="btn-icon-medium"><svg class="btn-icon stroke-dark mr-space-8" focusable="false" role="presentation"><use xlink:href="${siteSpritemap}#User Single" /></svg></div>
158 <div class="t-text-m"><span class="text-ellipsis-1 pt-2">${modalidad}</span></div>
159 </div>
160
161 <div class="comp-card-calendar__location d-flex comp-mode dataInfo align-items-center py-space-8">
162 <div class="btn-icon-medium"><svg class="btn-icon stroke-dark mr-space-8" focusable="false" role="presentation"><use xlink:href="${siteSpritemap}#LocationPin" /></svg></div>
163 <div class="t-text-m"><span class="text-ellipsis-1 pt-2">${lugar}</span></div>
164 </div>
165
166 <button id="fragment-${randomNamespace}-button" aria-label="Guardar artículo" class="comp-button-icon-save btn-icon-medium bg-transparent rounded-circle border border-primary">
167 <div class="d-flex justify-content-center align-items-center">
168 <svg class="btn-icon stroke-primary" focusable="false" role="presentation"><use xlink:href="${siteSpritemap}#Bookmark" /></svg>
169 </div>
170 </button>
171 </div>
172 </div>
173 </div>
174 </div>
175 </div>
176
177 <div class="comp-card-calendar__img rounded img-cover">
178 <#if imagen?has_content>
179 <img alt="" src="${imagen}" />
180 </#if>
181 </div>
182</div>
183
184<script>
185Liferay.on('allPortletsReady', () => {
186 const button = document.getElementById('fragment-${randomNamespace}-button');
187 const cardElement = document.getElementById('comp-card-calendar_${randomNamespace}');
188 if (!button || !cardElement) return;
189
190 const iconContainer = button.querySelector('div');
191 const localStorageKey = 'bookmark-${resourcePrimKey}';
192
193 const isSaved = localStorage.getItem(localStorageKey) === 'true';
194 button.setAttribute('aria-pressed', isSaved ? 'true' : 'false');
195 if (isSaved) {
196 iconContainer.classList.add('active');
197 }
198
199 button.addEventListener('click', (event) => {
200 event.preventDefault();
201 event.stopPropagation();
202
203 const currentlySaved = localStorage.getItem(localStorageKey) === 'true';
204 const newState = !currentlySaved;
205
206 localStorage.setItem(localStorageKey, newState);
207 button.setAttribute('aria-pressed', newState);
208 iconContainer.classList.toggle('active', newState);
209 });
210});
211</script>
212
213 tipo=(A_tipo.getData()!'')?has_content?then(A_tipo.getData(), "")
214 modalidad=(A_modalidad.getData()!'')?has_content?then(A_modalidad.getData(), "")
