Welcome, .
dwtc.greeting.message
Welcome, Ahmed.
dwtc.greeting.message
Welcome, .
dwtc.greeting.message
テンプレート処理中にエラーが発生しました。
The string doesn't match the expected date/time/date-time format. The string to parse was: "25/06/09 11:39". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "25/06/09 11:39"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "68068712855087#53307#null" at line 711, column 169]
----
1<style>
2
3
4
5 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name{
6 text-decoration: underline;
7 }
8
9 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
10 align-items: center;
11 display: flex;
12 gap: 6px;
13 }
14
15 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
16 color: #D7CCFF;
17 font-size: 18px;
18 }
19
20 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
21 color: #D7CCFF;
22 font-family: "URW DIN-Regular", Helvetica;
23 font-weight: 400;
24 font-size: 14px;
25 letter-spacing: 0.56px;
26 line-height: 100%;
27 text-box-cap: cap alphabetic;
28 text-box-trim: trim-both;
29 text-transform: uppercase;
30 }
31
32 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
33 color: #D7CCFF;
34 font-family: "URW DIN-Regular", Helvetica;
35 font-weight: 400;
36 font-size: 14px;
37 letter-spacing: 0.56px;
38 line-height: 100%;
39 text-box-cap: cap alphabetic;
40 text-box-trim: trim-both;
41 text-transform: uppercase;
42 }
43
44 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
45 align-items: center;
46 display: flex;
47 flex-direction: row;
48 gap: 16px;
49 }
50
51 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
52 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
53 align-items: center;
54 display: flex;
55 gap: 8px;
56 }
57
58 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
59 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
60 color: #D7CCFF;
61 cursor: pointer;
62 font-size: 18px;
63 }
64
65
66 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
67 align-items: center;
68 display: flex;
69 gap: 6px;
70 }
71
72 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
73 color: #D7CCFF;
74 font-size: 18px;
75 }
76
77 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
78 color: #D7CCFF;
79 font-family: "URW DIN-Regular", Helvetica;
80 font-weight: 400;
81 font-size: 14px;
82 letter-spacing: 0.56px;
83 line-height: 100%;
84 text-box-cap: cap alphabetic;
85 text-box-trim: trim-both;
86 text-transform: uppercase;
87 }
88
89 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
90 color: #D7CCFF;
91 font-family: "URW DIN-Regular", Helvetica;
92 font-weight: 400;
93 font-size: 14px;
94 letter-spacing: 0.56px;
95 line-height: 100%;
96 text-box-cap: cap alphabetic;
97 text-box-trim: trim-both;
98 text-transform: uppercase;
99 }
100
101 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
102 align-items: center;
103 display: flex;
104 flex-direction: row;
105 gap: 16px;
106 }
107
108 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
109 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
110 align-items: center;
111 display: flex;
112 gap: 8px;
113 }
114
115 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
116 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
117 color: #D7CCFF;
118 cursor: pointer;
119 font-size: 18px;
120 }
121
122 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
123 content: "\e91c";
124 }
125
126 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
127 content: "\e91d";
128 }
129
130 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
131 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
132 color: #D7CCFF;
133 font-family: "URW DIN-Regular", Helvetica;
134 font-weight: 400;
135 font-size: 14px;
136 letter-spacing: 0.56px;
137 line-height: 100%;
138 text-box-cap: cap alphabetic;
139 text-box-trim: trim-both;
140 text-transform: uppercase;
141 }
142
143 /* Featured */
144 .header-content .featured {
145 display: flex;
146 width: 100%;
147 }
148
149 .header-content .featured .mobile-episode-description {
150 display: none;
151 }
152
153 .header-content .featured .episode-description {
154 align-items: flex-start;
155 display: flex;
156 flex-direction: column;
157 gap: 24px;
158 justify-content: flex-end;
159 max-width: 597px;
160 padding-left: 24px;
161 padding-bottom: 83px;
162 width: 100%;
163 }
164
165 .header-content .featured .episode-description .episode-intro {
166 color: #ffffff;
167 font-family: "DIN Pro-Medium", Helvetica;
168 font-size: 24px;
169 font-weight: 500;
170 letter-spacing: -0.96px;
171 line-height: 100%;
172 }
173
174 .header-content .featured .episode-description .description {
175 color: #D7CCFF;
176 font-family: "DIN Pro-Regular", Helvetica;
177 font-size: 16px;
178 font-weight: 400;
179 letter-spacing: -0.32px;
180 line-height: 120%;
181 }
182
183 .header-content .featured .episode-description .content-details {
184 align-items: center;
185 display: flex;
186 flex-direction: row;
187 gap: 20px;
188 }
189
190 .header-content .featured .episode-description .content-details .duration {
191 align-items: center;
192 display: flex;
193 gap: 6px;
194 }
195
196 .header-content .featured .episode-description .content-details .duration i {
197 color: #D7CCFF;
198 font-size: 18px;
199 }
200
201 .header-content .featured .episode-description .content-details .duration .text {
202 color: #D7CCFF;
203 font-family: "URW DIN-Regular", Helvetica;
204 font-weight: 400;
205 font-size: 14px;
206 letter-spacing: 0.56px;
207 line-height: 100%;
208 text-box-cap: cap alphabetic;
209 text-box-trim: trim-both;
210 text-transform: uppercase;
211 }
212
213 .header-content .featured .episode-description .content-details .date .text {
214 color: #D7CCFF;
215 font-family: "URW DIN-Regular", Helvetica;
216 font-weight: 400;
217 font-size: 14px;
218 letter-spacing: 0.56px;
219 line-height: 100%;
220 text-box-cap: cap alphabetic;
221 text-box-trim: trim-both;
222 text-transform: uppercase;
223 }
224
225
226 .header-content .featured .episode-description .content-details .activity {
227 align-items: center;
228 display: flex;
229 flex-direction: row;
230 gap: 16px;
231 }
232
233 .header-content .featured .episode-description .content-details .activity .comments,
234 .header-content .featured .episode-description .content-details .activity .likes {
235 align-items: center;
236 display: flex;
237 gap: 8px;
238 }
239
240 .header-content .featured .episode-description .content-details .activity .comments i,
241 .header-content .featured .episode-description .content-details .activity .likes i {
242 color: #D7CCFF;
243 cursor: pointer;
244 font-size: 18px;
245 }
246
247 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
248 content: "\e91c";
249 }
250
251 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
252 content: "\e91d";
253 }
254
255 .DWTC-hub-d {
256 display: flex;
257 flex-direction: column;
258 align-items: flex-start;
259 position: relative;
260 }
261
262 .DWTC-hub-d .hero-top {
263 display: flex;
264 flex-direction: column;
265 height: 100%;
266 align-items: flex-start;
267 gap: 132px;
268 padding: 42px 32px;
269 position: relative;
270 align-self: stretch;
271 width: 100%;
272 overflow: hidden;
273 }
274
275 .DWTC-hub-d .hero-top .hero-image {
276 position: absolute;
277 top: 0;
278 left: 0;
279 right: 0;
280 bottom: 0;
281 object-fit: cover;
282 width: 100%;
283 height: 100%;
284 }
285
286
287
288
289 .hero-top .cta-container {
290 align-items: flex-end;
291 display: flex;
292 flex-grow: 1;
293 justify-content: flex-end;
294 width: fit-content;
295 z-index: 1;
296 position: absolute;
297 left: 50%;
298 top: 50%;
299 transform: translate(-50%, -50%);
300 }
301
302 .hero-top .cta-container .view-button {
303 align-items: center;
304 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
305 border: 1px solid rgba(244, 244, 244, 0.56);
306 border-radius: 40px;
307 display: flex;
308 gap: 16px;
309 height: 54px;
310 padding: 20px 0px;
311 transition: background-color 0.3s ease;
312 width: 186px;
313 }
314
315 .hero-top .cta-container .view-button .arrow-wrapper {
316 align-items: center;
317 background-color: #000;
318 border-radius: 50%;
319 display: flex;
320 height: 46px;
321 justify-content: center;
322 margin-left: 4px;
323 width: 46px;
324 }
325
326 .hero-top .cta-container .view-button .arrow-wrapper i{ color: #ffffff; font-size: 16px;}
327
328 .hero-top .cta-container .view-button:hover {
329 background: none;
330 background-color: #000;
331 border-color: #000;
332 }
333
334 .hero-top .cta-container .view-button .label {
335 color: #fff;
336 font-family: "DIN Pro-Medium", Helvetica;
337 font-weight: 500;
338 font-size: 18px;
339 letter-spacing: -0.72px;
340 line-height: 100%;
341 text-box-cap: both alphabetic;
342 text-box-trim: trim-both;
343 transition: color 0.3s ease;
344 }
345
346 .hero-top .cta-container .view-button:hover .label {
347 color: #ffffff;
348 }
349
350 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
351 background-color: #fff;
352 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
353 mask-image: url("assets/images/svg/btn-arrow-right.svg");
354 -webkit-mask-repeat: no-repeat;
355 mask-repeat: no-repeat;
356 background-position: 50% 50%;
357 width: 14px;
358 height: 10px;
359 transition: background-color 0.3s ease;
360 }
361
362 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
363 background-color: #fff;
364 }
365
366
367
368 @media (max-width: 1750px) {
369
370 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
371 color: #D7CCFF;
372 font-size: 18px;
373 }
374
375 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
376 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
377 color: #D7CCFF;
378 font-size: 18px;
379 cursor: pointer;
380 }
381
382 }
383
384
385
386 @media (max-width: 991.98px) {
387 .DWTC-hub-d .hero-top {
388 padding: 32px 28px;
389 }
390 }
391
392
393 @media (max-width: 768px) {
394
395 .dwtc-hub-play-button {
396 font-size: 10px;
397 }
398 }
399
400 @media (max-width: 575px) {
401
402 .dwtc-hub-play-button {
403 font-size: 10px;
404 }
405 }
406
407
408
409 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
410 display: none;
411 }
412
413 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
414 display: block !important;
415 }
416
417 .dwtc-way-ihero .header-content .heading-container {
418 border: none;
419 }
420
421 .dwtc-way-ihero .header-content .content-date {
422 display: none;
423 }
424
425 .dwtc-way-ihero .header-content .content-details {
426 display: none !important;
427 }
428
429 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
430 display: block !important;
431 color: #ffffff;
432 font-family: "DIN Pro-Light", Helvetica;
433 font-size: 24px;
434 font-weight: 300;
435 letter-spacing: -0.96px;
436 line-height: 120%;
437 }
438
439 @media (max-width: 1160px) {
440 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
441 font-size: 16px;
442 letter-spacing: -0.64px;
443 line-height: 100%;
444 }
445 }
446</style>
447
448<#macro formatTimeAgo inputDate>
449 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
450 <#attempt>
451 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
452 <#recover>
453 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
454 </#attempt>
455
456 <#assign now=.now>
457 <#assign diffInMillis=now?long - parsedDate?long>
458 <#assign diffInSeconds=diffInMillis / 1000>
459 <#assign diffInMinutes=diffInSeconds / 60>
460 <#assign diffInHours=diffInMinutes / 60>
461 <#assign diffInDays=diffInHours / 24>
462
463 <#if diffInSeconds < 60>
464 ${diffInSeconds?int} seconds
465 <#elseif diffInMinutes < 60>
466 ${diffInMinutes?int} minutes
467 <#elseif diffInHours < 24>
468 ${diffInHours?int} hours
469 <#else>
470 ${diffInDays?int} days
471 </#if>
472</#macro>
473
474<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
475<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
476
477<#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
478 <#if categories?has_content && categories??>
479<div class="d-none" id="object-selected-categories">
480 <#list categories as category>
481 <div class="taxonomy-category">
482 <div class="id">
483 ${category.taxonomyCategoryId}
484 </div>
485 <div class="name">
486 ${category.taxonomyCategoryName}
487 </div>
488 </div>
489 </#list>
490</div>
491 </#if>
492</#if>
493
494<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
495<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
496
497 <#assign previewURL="" />
498 <#assign mimeType="" />
499
500<#if (.data_model["ObjectField_65537#previewURL"].getData())?? && .data_model["ObjectField_65537#previewURL"].getData() != "">
501 <#assign previewURL=.data_model["ObjectField_65537#previewURL"].getData()!"" />
502 <#assign mimeType=.data_model["ObjectField_65537#mimeType"].getData()!"" />
503</#if>
504
505
506
507<div class="d-none" id="hub-content-id">
508 ${ObjectEntry_objectEntryId.getData()}
509 </div>
510<#if categories?has_content && categories??>
511 <#list categories as category>
512 <#switch category.taxonomyCategoryName?lower_case>
513 <#case "spotify">
514 <#-- Code for Podcast Section --></#-->
515 <div class="hero-top">
516 <#if previewURL?has_content && mimeType?has_content>
517 <#if mimeType?starts_with("image/")>
518 <div>
519 <img class="hero-image" src="${previewURL}" alt="Media Image" />
520 </div>
521 <#elseif mimeType?starts_with("video/")>
522 <div>
523 <video class="hero-image" src="${previewURL}" muted loop playsinline preload="auto" id="hero-video"></video>
524 </div>
525 <div class="cta-container">
526 <button class="view-button">
527 <div class="arrow-wrapper">
528 <i class="dwtc-hub-arrow-small"></i>
529 </div>
530
531 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
532 ${languageUtil.get(locale, "see-video")}
533 </div>
534 </button>
535 </div>
536 </#if>
537 </#if>
538 <div class="container-fluid">
539 <div class="header-content">
540 <div class="title-wrapper ">
541 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
542 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
543 </div>
544 <div class="content-container">
545 <div class="featured">
546 <div class="heading-container">
547 <div class="heading-wrapper" id="player-wrapper">
548 <div class="spotify-player-wrapper">
549 <div class="player">
550 <div class="spotify-icon dwtc-hub-spotify"></div>
551
552 <#if (.data_model["ObjectField_65533#previewURL"].getData())?? &&
553 .data_model["ObjectField_65533#previewURL"].getData() !="">
554 <audio id="audio" src="${.data_model["ObjectField_65533#previewURL"].getData()}"></audio>
555 </#if>
556 <div class="player-content">
557 <div class="cover-art d-flex align-items-center justify-content-center" >
558 <img src="/documents/d/guest/dwtc-logo-blue-outline" alt="Logo" />
559 </div>
560 <div class="control-section">
561
562 <div class="video-heading">
563 <div id="mediaTitle">${ObjectField_title.getData()}</div>
564
565 </div>
566 <div class="bottom-section">
567 <div class="seek-controls">
568 <button id="backward" class="player-rewind-backward"></button>
569 <input type="range" id="seekBar" class="seek-bar" min="0" value="0"
570 max="372.715083">
571 <button id="forward" class="player-rewind-forward"></button>
572 <div class="player-time">
573 <span id="duration">0:00</span>
574
575 </div>
576 <div class="player-dots">...</div>
577 <button id="playPause">
578 <i class="dwtc-hub-play-button"></i>
579 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
580 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
581 </svg>
582 </button>
583 </div>
584 </div>
585 </div>
586 </div>
587 </div>
588 </div>
589
590 <div class="mobile-episode-description">
591 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
592
593 <p class="description">
594 ${ObjectField_shortDescription.getData()}
595 </p>
596
597 <div class="content-details">
598 <div class="duration">
599 <i class="dwtc-hub-clock"></i>
600 <div class="text">
601 0 Sec
602 </div>
603 </div>
604
605 <div class="date">
606 <div class="text">
607 <#if (ObjectEntry_modifiedDate.getData())??>
608 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
609 </#if>
610 </div>
611 </div>
612
613 <div class="activity">
614 <div class="comments">
615 <i class="dwtc-hub-chat-bubble"></i>
616 <div class="text">${contentCommentData.totalCount}</div>
617 </div>
618
619 <div class="likes">
620 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
621 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
622 </div>
623 </div>
624 </div>
625 </div>
626 </div>
627 </div>
628 <div class="episode-description">
629 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
630 <p class="description">
631 ${ObjectField_shortDescription.getData()}
632 </p>
633 <div class="content-details">
634 <div class="duration">
635 <i class="dwtc-hub-clock"></i>
636 <div class="text">
637 0 Sec
638 </div>
639 </div>
640 <div class="date">
641 <div class="text">
642 <#if (ObjectEntry_modifiedDate.getData())??>
643 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
644 </#if>
645 </div>
646 </div>
647 <div class="activity">
648 <div class="comments">
649 <i class="dwtc-hub-chat-bubble"></i>
650 <div class="text">${contentCommentData.totalCount}</div>
651 </div>
652 <div class="likes">
653 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
654 <div class="text like-count" id="dwtc-hub-like-count">0</div>
655 </div>
656 </div>
657 </div>
658 </div>
659 </div>
660 </div>
661
662 </div>
663 </div>
664
665 <#break>
666 <#case "article">
667 <#case "youtube">
668 <#case "instagram">
669 <#case "linkedin">
670 <#case "announcements">
671 <#case "news">
672 <#-- Code for Events Section --></#-->
673 <div class="hero-top">
674 <#if previewURL?has_content && mimeType?has_content>
675 <#if mimeType?starts_with("image/")>
676 <div>
677 <img class="hero-image" src="${previewURL}" alt="Media Image" />
678 </div>
679 <#elseif mimeType?starts_with("video/")>
680 <div>
681 <video class="hero-image" src="${previewURL}" muted loop playsinline
682 preload="auto" id="hero-video"></video>
683 </div>
684 <div class="cta-container">
685 <button class="view-button">
686 <div class="arrow-wrapper">
687 <i class="dwtc-hub-arrow-small"></i>
688 </div>
689
690 <div class="label" data-lfr-editable-id="play-button-text"
691 data-lfr-editable-type="text">${languageUtil.get(locale, "see-video")}</div>
692 </button>
693 </div>
694 </#if>
695 </#if>
696 <div class="container-fluid">
697 <div class="header-content">
698 <div class="title-wrapper ">
699 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
700 ${category.taxonomyCategoryName}</h1>
701 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
702 </div>
703
704 <div class="content-container">
705 <div class="article-header">
706 <div class="heading-container">
707 <div class="heading-wrapper">
708 <!-- <div class="content-date">
709
710 <#if ObjectEntry_createDate.getData()??>
711 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
712
713 </#if>
714
715 </div> -->
716 <h2 class="content-title">
717 ${ObjectField_title.getData()}</h2>
718 <p class="short-description d-none">
719 ${ObjectField_shortDescription.getData()}
720 </p>
721 <#if category.taxonomyCategoryName?lower_case == "youtube" || category.taxonomyCategoryName?lower_case == "instagram" || category.taxonomyCategoryName?lower_case == "linkedin">
722 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
723 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
724 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}</div>
725 </a>
726 </#if>
727 <div class="content-details">
728 <div class="duration">
729 <i class="dwtc-hub-clock"></i>
730 <div class="text">
731 0 Sec
732 </div>
733 </div>
734
735 <div class="date">
736 <div class="text">
737 <#if (ObjectEntry_modifiedDate.getData())??>
738
739 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
740 </#if>
741 </div>
742 </div>
743
744 <div class="activity">
745 <div class="comments">
746 <i class="dwtc-hub-chat-bubble"></i>
747 <div class="text">${contentCommentData.totalCount}</div>
748 </div>
749
750 <div class="likes">
751 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
752 <div class="text" id="dwtc-hub-like-count">0</div>
753 </div>
754 </div>
755 </div>
756 </div>
757 </div>
758 </div>
759 </div>
760 </div>
761 </div>
762 <#break>
763 </#switch>
764 </#list>
765</#if>
766 <script>
767 $(document).ready(function () {
768 const $button = $(".view-button");
769 const $video = $(".hero-image");
770
771
772 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
773 $button.on("click", function () {
774 const videoEl = $video.get(0);
775 if (videoEl.paused) {
776 videoEl.play();
777 } else {
778 videoEl.pause();
779 }
780 });
781 };
782
783 });
784 </script>
The string doesn't match the expected date/time/date-time format. The string to parse was: "25/06/09 11:39". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "25/06/09 11:39"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "68068712855087#53307#null" at line 711, column 169]
----
1<style>
2
3
4
5 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name{
6 text-decoration: underline;
7 }
8
9 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
10 align-items: center;
11 display: flex;
12 gap: 6px;
13 }
14
15 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
16 color: #D7CCFF;
17 font-size: 18px;
18 }
19
20 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
21 color: #D7CCFF;
22 font-family: "URW DIN-Regular", Helvetica;
23 font-weight: 400;
24 font-size: 14px;
25 letter-spacing: 0.56px;
26 line-height: 100%;
27 text-box-cap: cap alphabetic;
28 text-box-trim: trim-both;
29 text-transform: uppercase;
30 }
31
32 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
33 color: #D7CCFF;
34 font-family: "URW DIN-Regular", Helvetica;
35 font-weight: 400;
36 font-size: 14px;
37 letter-spacing: 0.56px;
38 line-height: 100%;
39 text-box-cap: cap alphabetic;
40 text-box-trim: trim-both;
41 text-transform: uppercase;
42 }
43
44 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
45 align-items: center;
46 display: flex;
47 flex-direction: row;
48 gap: 16px;
49 }
50
51 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
52 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
53 align-items: center;
54 display: flex;
55 gap: 8px;
56 }
57
58 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
59 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
60 color: #D7CCFF;
61 cursor: pointer;
62 font-size: 18px;
63 }
64
65
66 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
67 align-items: center;
68 display: flex;
69 gap: 6px;
70 }
71
72 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
73 color: #D7CCFF;
74 font-size: 18px;
75 }
76
77 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
78 color: #D7CCFF;
79 font-family: "URW DIN-Regular", Helvetica;
80 font-weight: 400;
81 font-size: 14px;
82 letter-spacing: 0.56px;
83 line-height: 100%;
84 text-box-cap: cap alphabetic;
85 text-box-trim: trim-both;
86 text-transform: uppercase;
87 }
88
89 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
90 color: #D7CCFF;
91 font-family: "URW DIN-Regular", Helvetica;
92 font-weight: 400;
93 font-size: 14px;
94 letter-spacing: 0.56px;
95 line-height: 100%;
96 text-box-cap: cap alphabetic;
97 text-box-trim: trim-both;
98 text-transform: uppercase;
99 }
100
101 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
102 align-items: center;
103 display: flex;
104 flex-direction: row;
105 gap: 16px;
106 }
107
108 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
109 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
110 align-items: center;
111 display: flex;
112 gap: 8px;
113 }
114
115 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
116 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
117 color: #D7CCFF;
118 cursor: pointer;
119 font-size: 18px;
120 }
121
122 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
123 content: "\e91c";
124 }
125
126 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
127 content: "\e91d";
128 }
129
130 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
131 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
132 color: #D7CCFF;
133 font-family: "URW DIN-Regular", Helvetica;
134 font-weight: 400;
135 font-size: 14px;
136 letter-spacing: 0.56px;
137 line-height: 100%;
138 text-box-cap: cap alphabetic;
139 text-box-trim: trim-both;
140 text-transform: uppercase;
141 }
142
143 /* Featured */
144 .header-content .featured {
145 display: flex;
146 width: 100%;
147 }
148
149 .header-content .featured .mobile-episode-description {
150 display: none;
151 }
152
153 .header-content .featured .episode-description {
154 align-items: flex-start;
155 display: flex;
156 flex-direction: column;
157 gap: 24px;
158 justify-content: flex-end;
159 max-width: 597px;
160 padding-left: 24px;
161 padding-bottom: 83px;
162 width: 100%;
163 }
164
165 .header-content .featured .episode-description .episode-intro {
166 color: #ffffff;
167 font-family: "DIN Pro-Medium", Helvetica;
168 font-size: 24px;
169 font-weight: 500;
170 letter-spacing: -0.96px;
171 line-height: 100%;
172 }
173
174 .header-content .featured .episode-description .description {
175 color: #D7CCFF;
176 font-family: "DIN Pro-Regular", Helvetica;
177 font-size: 16px;
178 font-weight: 400;
179 letter-spacing: -0.32px;
180 line-height: 120%;
181 }
182
183 .header-content .featured .episode-description .content-details {
184 align-items: center;
185 display: flex;
186 flex-direction: row;
187 gap: 20px;
188 }
189
190 .header-content .featured .episode-description .content-details .duration {
191 align-items: center;
192 display: flex;
193 gap: 6px;
194 }
195
196 .header-content .featured .episode-description .content-details .duration i {
197 color: #D7CCFF;
198 font-size: 18px;
199 }
200
201 .header-content .featured .episode-description .content-details .duration .text {
202 color: #D7CCFF;
203 font-family: "URW DIN-Regular", Helvetica;
204 font-weight: 400;
205 font-size: 14px;
206 letter-spacing: 0.56px;
207 line-height: 100%;
208 text-box-cap: cap alphabetic;
209 text-box-trim: trim-both;
210 text-transform: uppercase;
211 }
212
213 .header-content .featured .episode-description .content-details .date .text {
214 color: #D7CCFF;
215 font-family: "URW DIN-Regular", Helvetica;
216 font-weight: 400;
217 font-size: 14px;
218 letter-spacing: 0.56px;
219 line-height: 100%;
220 text-box-cap: cap alphabetic;
221 text-box-trim: trim-both;
222 text-transform: uppercase;
223 }
224
225
226 .header-content .featured .episode-description .content-details .activity {
227 align-items: center;
228 display: flex;
229 flex-direction: row;
230 gap: 16px;
231 }
232
233 .header-content .featured .episode-description .content-details .activity .comments,
234 .header-content .featured .episode-description .content-details .activity .likes {
235 align-items: center;
236 display: flex;
237 gap: 8px;
238 }
239
240 .header-content .featured .episode-description .content-details .activity .comments i,
241 .header-content .featured .episode-description .content-details .activity .likes i {
242 color: #D7CCFF;
243 cursor: pointer;
244 font-size: 18px;
245 }
246
247 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
248 content: "\e91c";
249 }
250
251 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
252 content: "\e91d";
253 }
254
255 .DWTC-hub-d {
256 display: flex;
257 flex-direction: column;
258 align-items: flex-start;
259 position: relative;
260 }
261
262 .DWTC-hub-d .hero-top {
263 display: flex;
264 flex-direction: column;
265 height: 100%;
266 align-items: flex-start;
267 gap: 132px;
268 padding: 42px 32px;
269 position: relative;
270 align-self: stretch;
271 width: 100%;
272 overflow: hidden;
273 }
274
275 .DWTC-hub-d .hero-top .hero-image {
276 position: absolute;
277 top: 0;
278 left: 0;
279 right: 0;
280 bottom: 0;
281 object-fit: cover;
282 width: 100%;
283 height: 100%;
284 }
285
286
287
288
289 .hero-top .cta-container {
290 align-items: flex-end;
291 display: flex;
292 flex-grow: 1;
293 justify-content: flex-end;
294 width: fit-content;
295 z-index: 1;
296 position: absolute;
297 left: 50%;
298 top: 50%;
299 transform: translate(-50%, -50%);
300 }
301
302 .hero-top .cta-container .view-button {
303 align-items: center;
304 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
305 border: 1px solid rgba(244, 244, 244, 0.56);
306 border-radius: 40px;
307 display: flex;
308 gap: 16px;
309 height: 54px;
310 padding: 20px 0px;
311 transition: background-color 0.3s ease;
312 width: 186px;
313 }
314
315 .hero-top .cta-container .view-button .arrow-wrapper {
316 align-items: center;
317 background-color: #000;
318 border-radius: 50%;
319 display: flex;
320 height: 46px;
321 justify-content: center;
322 margin-left: 4px;
323 width: 46px;
324 }
325
326 .hero-top .cta-container .view-button .arrow-wrapper i{ color: #ffffff; font-size: 16px;}
327
328 .hero-top .cta-container .view-button:hover {
329 background: none;
330 background-color: #000;
331 border-color: #000;
332 }
333
334 .hero-top .cta-container .view-button .label {
335 color: #fff;
336 font-family: "DIN Pro-Medium", Helvetica;
337 font-weight: 500;
338 font-size: 18px;
339 letter-spacing: -0.72px;
340 line-height: 100%;
341 text-box-cap: both alphabetic;
342 text-box-trim: trim-both;
343 transition: color 0.3s ease;
344 }
345
346 .hero-top .cta-container .view-button:hover .label {
347 color: #ffffff;
348 }
349
350 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
351 background-color: #fff;
352 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
353 mask-image: url("assets/images/svg/btn-arrow-right.svg");
354 -webkit-mask-repeat: no-repeat;
355 mask-repeat: no-repeat;
356 background-position: 50% 50%;
357 width: 14px;
358 height: 10px;
359 transition: background-color 0.3s ease;
360 }
361
362 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
363 background-color: #fff;
364 }
365
366
367
368 @media (max-width: 1750px) {
369
370 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
371 color: #D7CCFF;
372 font-size: 18px;
373 }
374
375 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
376 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
377 color: #D7CCFF;
378 font-size: 18px;
379 cursor: pointer;
380 }
381
382 }
383
384
385
386 @media (max-width: 991.98px) {
387 .DWTC-hub-d .hero-top {
388 padding: 32px 28px;
389 }
390 }
391
392
393 @media (max-width: 768px) {
394
395 .dwtc-hub-play-button {
396 font-size: 10px;
397 }
398 }
399
400 @media (max-width: 575px) {
401
402 .dwtc-hub-play-button {
403 font-size: 10px;
404 }
405 }
406
407
408
409 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
410 display: none;
411 }
412
413 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
414 display: block !important;
415 }
416
417 .dwtc-way-ihero .header-content .heading-container {
418 border: none;
419 }
420
421 .dwtc-way-ihero .header-content .content-date {
422 display: none;
423 }
424
425 .dwtc-way-ihero .header-content .content-details {
426 display: none !important;
427 }
428
429 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
430 display: block !important;
431 color: #ffffff;
432 font-family: "DIN Pro-Light", Helvetica;
433 font-size: 24px;
434 font-weight: 300;
435 letter-spacing: -0.96px;
436 line-height: 120%;
437 }
438
439 @media (max-width: 1160px) {
440 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
441 font-size: 16px;
442 letter-spacing: -0.64px;
443 line-height: 100%;
444 }
445 }
446</style>
447
448<#macro formatTimeAgo inputDate>
449 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
450 <#attempt>
451 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
452 <#recover>
453 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
454 </#attempt>
455
456 <#assign now=.now>
457 <#assign diffInMillis=now?long - parsedDate?long>
458 <#assign diffInSeconds=diffInMillis / 1000>
459 <#assign diffInMinutes=diffInSeconds / 60>
460 <#assign diffInHours=diffInMinutes / 60>
461 <#assign diffInDays=diffInHours / 24>
462
463 <#if diffInSeconds < 60>
464 ${diffInSeconds?int} seconds
465 <#elseif diffInMinutes < 60>
466 ${diffInMinutes?int} minutes
467 <#elseif diffInHours < 24>
468 ${diffInHours?int} hours
469 <#else>
470 ${diffInDays?int} days
471 </#if>
472</#macro>
473
474<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
475<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
476
477<#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
478 <#if categories?has_content && categories??>
479<div class="d-none" id="object-selected-categories">
480 <#list categories as category>
481 <div class="taxonomy-category">
482 <div class="id">
483 ${category.taxonomyCategoryId}
484 </div>
485 <div class="name">
486 ${category.taxonomyCategoryName}
487 </div>
488 </div>
489 </#list>
490</div>
491 </#if>
492</#if>
493
494<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
495<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
496
497 <#assign previewURL="" />
498 <#assign mimeType="" />
499
500<#if (.data_model["ObjectField_65537#previewURL"].getData())?? && .data_model["ObjectField_65537#previewURL"].getData() != "">
501 <#assign previewURL=.data_model["ObjectField_65537#previewURL"].getData()!"" />
502 <#assign mimeType=.data_model["ObjectField_65537#mimeType"].getData()!"" />
503</#if>
504
505
506
507<div class="d-none" id="hub-content-id">
508 ${ObjectEntry_objectEntryId.getData()}
509 </div>
510<#if categories?has_content && categories??>
511 <#list categories as category>
512 <#switch category.taxonomyCategoryName?lower_case>
513 <#case "spotify">
514 <#-- Code for Podcast Section --></#-->
515 <div class="hero-top">
516 <#if previewURL?has_content && mimeType?has_content>
517 <#if mimeType?starts_with("image/")>
518 <div>
519 <img class="hero-image" src="${previewURL}" alt="Media Image" />
520 </div>
521 <#elseif mimeType?starts_with("video/")>
522 <div>
523 <video class="hero-image" src="${previewURL}" muted loop playsinline preload="auto" id="hero-video"></video>
524 </div>
525 <div class="cta-container">
526 <button class="view-button">
527 <div class="arrow-wrapper">
528 <i class="dwtc-hub-arrow-small"></i>
529 </div>
530
531 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
532 ${languageUtil.get(locale, "see-video")}
533 </div>
534 </button>
535 </div>
536 </#if>
537 </#if>
538 <div class="container-fluid">
539 <div class="header-content">
540 <div class="title-wrapper ">
541 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
542 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
543 </div>
544 <div class="content-container">
545 <div class="featured">
546 <div class="heading-container">
547 <div class="heading-wrapper" id="player-wrapper">
548 <div class="spotify-player-wrapper">
549 <div class="player">
550 <div class="spotify-icon dwtc-hub-spotify"></div>
551
552 <#if (.data_model["ObjectField_65533#previewURL"].getData())?? &&
553 .data_model["ObjectField_65533#previewURL"].getData() !="">
554 <audio id="audio" src="${.data_model["ObjectField_65533#previewURL"].getData()}"></audio>
555 </#if>
556 <div class="player-content">
557 <div class="cover-art d-flex align-items-center justify-content-center" >
558 <img src="/documents/d/guest/dwtc-logo-blue-outline" alt="Logo" />
559 </div>
560 <div class="control-section">
561
562 <div class="video-heading">
563 <div id="mediaTitle">${ObjectField_title.getData()}</div>
564
565 </div>
566 <div class="bottom-section">
567 <div class="seek-controls">
568 <button id="backward" class="player-rewind-backward"></button>
569 <input type="range" id="seekBar" class="seek-bar" min="0" value="0"
570 max="372.715083">
571 <button id="forward" class="player-rewind-forward"></button>
572 <div class="player-time">
573 <span id="duration">0:00</span>
574
575 </div>
576 <div class="player-dots">...</div>
577 <button id="playPause">
578 <i class="dwtc-hub-play-button"></i>
579 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
580 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
581 </svg>
582 </button>
583 </div>
584 </div>
585 </div>
586 </div>
587 </div>
588 </div>
589
590 <div class="mobile-episode-description">
591 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
592
593 <p class="description">
594 ${ObjectField_shortDescription.getData()}
595 </p>
596
597 <div class="content-details">
598 <div class="duration">
599 <i class="dwtc-hub-clock"></i>
600 <div class="text">
601 0 Sec
602 </div>
603 </div>
604
605 <div class="date">
606 <div class="text">
607 <#if (ObjectEntry_modifiedDate.getData())??>
608 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
609 </#if>
610 </div>
611 </div>
612
613 <div class="activity">
614 <div class="comments">
615 <i class="dwtc-hub-chat-bubble"></i>
616 <div class="text">${contentCommentData.totalCount}</div>
617 </div>
618
619 <div class="likes">
620 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
621 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
622 </div>
623 </div>
624 </div>
625 </div>
626 </div>
627 </div>
628 <div class="episode-description">
629 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
630 <p class="description">
631 ${ObjectField_shortDescription.getData()}
632 </p>
633 <div class="content-details">
634 <div class="duration">
635 <i class="dwtc-hub-clock"></i>
636 <div class="text">
637 0 Sec
638 </div>
639 </div>
640 <div class="date">
641 <div class="text">
642 <#if (ObjectEntry_modifiedDate.getData())??>
643 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
644 </#if>
645 </div>
646 </div>
647 <div class="activity">
648 <div class="comments">
649 <i class="dwtc-hub-chat-bubble"></i>
650 <div class="text">${contentCommentData.totalCount}</div>
651 </div>
652 <div class="likes">
653 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
654 <div class="text like-count" id="dwtc-hub-like-count">0</div>
655 </div>
656 </div>
657 </div>
658 </div>
659 </div>
660 </div>
661
662 </div>
663 </div>
664
665 <#break>
666 <#case "article">
667 <#case "youtube">
668 <#case "instagram">
669 <#case "linkedin">
670 <#case "announcements">
671 <#case "news">
672 <#-- Code for Events Section --></#-->
673 <div class="hero-top">
674 <#if previewURL?has_content && mimeType?has_content>
675 <#if mimeType?starts_with("image/")>
676 <div>
677 <img class="hero-image" src="${previewURL}" alt="Media Image" />
678 </div>
679 <#elseif mimeType?starts_with("video/")>
680 <div>
681 <video class="hero-image" src="${previewURL}" muted loop playsinline
682 preload="auto" id="hero-video"></video>
683 </div>
684 <div class="cta-container">
685 <button class="view-button">
686 <div class="arrow-wrapper">
687 <i class="dwtc-hub-arrow-small"></i>
688 </div>
689
690 <div class="label" data-lfr-editable-id="play-button-text"
691 data-lfr-editable-type="text">${languageUtil.get(locale, "see-video")}</div>
692 </button>
693 </div>
694 </#if>
695 </#if>
696 <div class="container-fluid">
697 <div class="header-content">
698 <div class="title-wrapper ">
699 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
700 ${category.taxonomyCategoryName}</h1>
701 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
702 </div>
703
704 <div class="content-container">
705 <div class="article-header">
706 <div class="heading-container">
707 <div class="heading-wrapper">
708 <!-- <div class="content-date">
709
710 <#if ObjectEntry_createDate.getData()??>
711 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
712
713 </#if>
714
715 </div> -->
716 <h2 class="content-title">
717 ${ObjectField_title.getData()}</h2>
718 <p class="short-description d-none">
719 ${ObjectField_shortDescription.getData()}
720 </p>
721 <#if category.taxonomyCategoryName?lower_case == "youtube" || category.taxonomyCategoryName?lower_case == "instagram" || category.taxonomyCategoryName?lower_case == "linkedin">
722 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
723 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
724 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}</div>
725 </a>
726 </#if>
727 <div class="content-details">
728 <div class="duration">
729 <i class="dwtc-hub-clock"></i>
730 <div class="text">
731 0 Sec
732 </div>
733 </div>
734
735 <div class="date">
736 <div class="text">
737 <#if (ObjectEntry_modifiedDate.getData())??>
738
739 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
740 </#if>
741 </div>
742 </div>
743
744 <div class="activity">
745 <div class="comments">
746 <i class="dwtc-hub-chat-bubble"></i>
747 <div class="text">${contentCommentData.totalCount}</div>
748 </div>
749
750 <div class="likes">
751 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
752 <div class="text" id="dwtc-hub-like-count">0</div>
753 </div>
754 </div>
755 </div>
756 </div>
757 </div>
758 </div>
759 </div>
760 </div>
761 </div>
762 <#break>
763 </#switch>
764 </#list>
765</#if>
766 <script>
767 $(document).ready(function () {
768 const $button = $(".view-button");
769 const $video = $(".hero-image");
770
771
772 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
773 $button.on("click", function () {
774 const videoEl = $video.get(0);
775 if (videoEl.paused) {
776 videoEl.play();
777 } else {
778 videoEl.pause();
779 }
780 });
781 };
782
783 });
784 </script>
Technology integration, personalisation and a strong USP are key for existing and emerging fitness brands targeting an increasingly health aware GCC audience. Jack Thomas, co-founder of The Fit Guide, explains why this sector is ripe for growth
Health and wellness is a growing business across the GCC with the industry valued at $63.4 billion in 2022 and forecasted to grow to $94.6bn by 2028, according to market research company IMARC Group.
This reflects a growing interest in all aspects of personal wellbeing spurred by rising adoption of digital health technologies and overall demand for wellness services. At the same time, the brick-and-mortar fitness space, which encompasses big box brands, homegrown clubs, and a growing number of specialised fitness facilities,
A nuanced market
The GCC market does not follow a ‘one size fits all’ approach to fitness engagement and facility membership with nuanced cultural and workout genre preferences differentiating demand and opportunity from the UAE to Saudi Arabia,
From street corner gyms to big box brands, the competitive landscape is varied. In terms of competitiveness rankings, Dubai scores extremely highly for member engagement according to 2023 research conducted by The Fit Guide, a global, independent rating system for fitness clubs and studios in key cities. It also performs well for front desk staff product and package knowledge as well as client name usage, which has been identified as a global weak spot.
Incorporating a brand experience or sensory element within public areas is also a key consumer touchpoint with Dubai scoring above the global average at 63 per cent whereas Sydney, for example, scored 39 per cent.
When it comes to penetration, Kuwait has the highest rate in the region, according to 2021 research by Statista, with nine per cent of the population having a gym membership versus six per cent in the UAE and 2.7 per cent in Oman.
Markets across the Gulf may be less mature than their international counterparts and have a different demographic profile, but they are catching up. The market is wide open with numerous demand gaps to fill, which attracts fitness entrepreneurs looking to gain first-mover advantage, but the introduction of new concepts also requires investment into public awareness, which can slow opportunities for growth.
Big box versus boutique
International brands and big box gyms dominate most markets within the region while the UAE stands out with a more diverse fitness experience offering, characterised by high attendance rates, advanced technological integration and a growing demand for personalisation.
The Fit Guide research shows there is proven demand in Dubai for Pilates, strength training and higher quality big box gyms that offer premium add-ons, sleek fit-outs and competitive rates. UAE-based Warehouse Gym, for example, has raised the bar with recovery treatments like cryotherapy and infrared sauna on offer, and elevated workout classes such as multisensory Blackbox sessions. Elsewhere in the region, Saudi Arabia is a nascent market ripe for development with government plans to raise levels of physical activity under its Vision 2030 strategy. Another UAE-born brand, GymNation, which recently announced a management full equity buyout, is gearing up to launch its first six locations in the Kingdom, with expansion into Bahrain, Kuwait and Qatar also in the pipeline.
According to the 2022-released Saudi Arabian Fitness Services Market Outlook to 2025 report by Ken Research, there are around 28 active fitness brands in the Kingdom. Big box gyms are booming with the likes of Gold’s Gym and Fitness First operating facilities in various locations. Homegrown Saudi brand, Fitness Time, which currently operates 160 locations across the country, recently reported a 51.43 per cent surge in year-on-year net profits in the first nine months of 2023.
Franchise models are also proving popular. UK-founded gym chain Fitness First entered the region in 2006 and was later acquired by the UAE’s Landmark Group, which grew the Middle East and North Africa portfolio from 16 to more than 49 clubs.