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: "٠٢/٠٥/٢٥ ٠٦:٥٠ ص". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "٠٢/٠٥/٢٥ ٠٦:٥٠ ص"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "60755508628980#20120#null" at line 697, column 193]
----
1<style>
2 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
3 text-decoration: underline;
4 }
5
6 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
7 align-items: center;
8 display: flex;
9 gap: 6px;
10 }
11
12 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
13 color: #D7CCFF;
14 font-size: 18px;
15 }
16
17 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
18 color: #D7CCFF;
19 font-family: "URW DIN-Regular", Helvetica;
20 font-weight: 400;
21 font-size: 14px;
22 letter-spacing: 0.56px;
23 line-height: 100%;
24 text-box-cap: cap alphabetic;
25 text-box-trim: trim-both;
26 text-transform: uppercase;
27 }
28
29 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
30 color: #D7CCFF;
31 font-family: "URW DIN-Regular", Helvetica;
32 font-weight: 400;
33 font-size: 14px;
34 letter-spacing: 0.56px;
35 line-height: 100%;
36 text-box-cap: cap alphabetic;
37 text-box-trim: trim-both;
38 text-transform: uppercase;
39 }
40
41 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
42 align-items: center;
43 display: flex;
44 flex-direction: row;
45 gap: 16px;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
49 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
50 align-items: center;
51 display: flex;
52 gap: 8px;
53 }
54
55 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
56 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
57 color: #D7CCFF;
58 cursor: pointer;
59 font-size: 18px;
60 }
61
62
63 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
64 align-items: center;
65 display: flex;
66 gap: 6px;
67 }
68
69 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
70 color: #D7CCFF;
71 font-size: 18px;
72 }
73
74 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
75 color: #D7CCFF;
76 font-family: "URW DIN-Regular", Helvetica;
77 font-weight: 400;
78 font-size: 14px;
79 letter-spacing: 0.56px;
80 line-height: 100%;
81 text-box-cap: cap alphabetic;
82 text-box-trim: trim-both;
83 text-transform: uppercase;
84 }
85
86 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
87 color: #D7CCFF;
88 font-family: "URW DIN-Regular", Helvetica;
89 font-weight: 400;
90 font-size: 14px;
91 letter-spacing: 0.56px;
92 line-height: 100%;
93 text-box-cap: cap alphabetic;
94 text-box-trim: trim-both;
95 text-transform: uppercase;
96 }
97
98 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
99 align-items: center;
100 display: flex;
101 flex-direction: row;
102 gap: 16px;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
106 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
107 align-items: center;
108 display: flex;
109 gap: 8px;
110 }
111
112 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
113 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
114 color: #D7CCFF;
115 cursor: pointer;
116 font-size: 18px;
117 }
118
119 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
120 content: "\e91c";
121 }
122
123 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
124 content: "\e91d";
125 }
126
127 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
128 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
129 color: #D7CCFF;
130 font-family: "URW DIN-Regular", Helvetica;
131 font-weight: 400;
132 font-size: 14px;
133 letter-spacing: 0.56px;
134 line-height: 100%;
135 text-box-cap: cap alphabetic;
136 text-box-trim: trim-both;
137 text-transform: uppercase;
138 }
139
140 /* Featured */
141 .header-content .featured {
142 display: flex;
143 width: 100%;
144 }
145
146 .header-content .featured .mobile-episode-description {
147 display: none;
148 }
149
150 .header-content .featured .episode-description {
151 align-items: flex-start;
152 display: flex;
153 flex-direction: column;
154 gap: 24px;
155 justify-content: flex-end;
156 max-width: 597px;
157 padding-left: 24px;
158 padding-bottom: 83px;
159 width: 100%;
160 }
161
162 .header-content .featured .episode-description .episode-intro {
163 color: #ffffff;
164 font-family: "DIN Pro-Medium", Helvetica;
165 font-size: 24px;
166 font-weight: 500;
167 letter-spacing: -0.96px;
168 line-height: 100%;
169 }
170
171 .header-content .featured .episode-description .description {
172 color: #D7CCFF;
173 font-family: "DIN Pro-Regular", Helvetica;
174 font-size: 16px;
175 font-weight: 400;
176 letter-spacing: -0.32px;
177 line-height: 120%;
178 }
179
180 .header-content .featured .episode-description .content-details {
181 align-items: center;
182 display: flex;
183 flex-direction: row;
184 gap: 20px;
185 }
186
187 .header-content .featured .episode-description .content-details .duration {
188 align-items: center;
189 display: flex;
190 gap: 6px;
191 }
192
193 .header-content .featured .episode-description .content-details .duration i {
194 color: #D7CCFF;
195 font-size: 18px;
196 }
197
198 .header-content .featured .episode-description .content-details .duration .text {
199 color: #D7CCFF;
200 font-family: "URW DIN-Regular", Helvetica;
201 font-weight: 400;
202 font-size: 14px;
203 letter-spacing: 0.56px;
204 line-height: 100%;
205 text-box-cap: cap alphabetic;
206 text-box-trim: trim-both;
207 text-transform: uppercase;
208 }
209
210 .header-content .featured .episode-description .content-details .date .text {
211 color: #D7CCFF;
212 font-family: "URW DIN-Regular", Helvetica;
213 font-weight: 400;
214 font-size: 14px;
215 letter-spacing: 0.56px;
216 line-height: 100%;
217 text-box-cap: cap alphabetic;
218 text-box-trim: trim-both;
219 text-transform: uppercase;
220 }
221
222
223 .header-content .featured .episode-description .content-details .activity {
224 align-items: center;
225 display: flex;
226 flex-direction: row;
227 gap: 16px;
228 }
229
230 .header-content .featured .episode-description .content-details .activity .comments,
231 .header-content .featured .episode-description .content-details .activity .likes {
232 align-items: center;
233 display: flex;
234 gap: 8px;
235 }
236
237 .header-content .featured .episode-description .content-details .activity .comments i,
238 .header-content .featured .episode-description .content-details .activity .likes i {
239 color: #D7CCFF;
240 cursor: pointer;
241 font-size: 18px;
242 }
243
244 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
245 content: "\e91c";
246 }
247
248 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
249 content: "\e91d";
250 }
251
252 .DWTC-hub-d {
253 display: flex;
254 flex-direction: column;
255 align-items: flex-start;
256 position: relative;
257 }
258
259 .DWTC-hub-d .hero-top {
260 display: flex;
261 flex-direction: column;
262 height: 100%;
263 align-items: flex-start;
264 gap: 132px;
265 padding: 42px 32px;
266 position: relative;
267 align-self: stretch;
268 width: 100%;
269 overflow: hidden;
270 }
271
272 .DWTC-hub-d .hero-top .hero-image {
273 position: absolute;
274 top: 0;
275 left: 0;
276 right: 0;
277 bottom: 0;
278 object-fit: cover;
279 width: 100%;
280 height: 100%;
281 }
282
283 .hero-top .cta-container {
284 align-items: flex-end;
285 display: flex;
286 flex-grow: 1;
287 justify-content: flex-end;
288 width: fit-content;
289 z-index: 1;
290 position: absolute;
291 left: 50%;
292 top: 50%;
293 transform: translate(-50%, -50%);
294 }
295
296 .hero-top .cta-container .view-button {
297 align-items: center;
298 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
299 border: 1px solid rgba(244, 244, 244, 0.56);
300 border-radius: 40px;
301 display: flex;
302 gap: 16px;
303 height: 54px;
304 padding: 20px 0px;
305 transition: background-color 0.3s ease;
306 width: 186px;
307 }
308
309 .hero-top .cta-container .view-button .arrow-wrapper {
310 align-items: center;
311 background-color: #000;
312 border-radius: 50%;
313 display: flex;
314 height: 46px;
315 justify-content: center;
316 margin-left: 4px;
317 width: 46px;
318 }
319
320 .hero-top .cta-container .view-button .arrow-wrapper i {
321 color: #ffffff;
322 font-size: 16px;
323 }
324
325 .hero-top .cta-container .view-button:hover {
326 background: none;
327 background-color: #000;
328 border-color: #000;
329 }
330
331 .hero-top .cta-container .view-button .label {
332 color: #fff;
333 font-family: "DIN Pro-Medium", Helvetica;
334 font-weight: 500;
335 font-size: 18px;
336 letter-spacing: -0.72px;
337 line-height: 100%;
338 text-box-cap: both alphabetic;
339 text-box-trim: trim-both;
340 transition: color 0.3s ease;
341 }
342
343 .hero-top .cta-container .view-button:hover .label {
344 color: #ffffff;
345 }
346
347 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
348 background-color: #fff;
349 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
350 mask-image: url("assets/images/svg/btn-arrow-right.svg");
351 -webkit-mask-repeat: no-repeat;
352 mask-repeat: no-repeat;
353 background-position: 50% 50%;
354 width: 14px;
355 height: 10px;
356 transition: background-color 0.3s ease;
357 }
358
359 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
360 background-color: #fff;
361 }
362
363 @media (max-width: 1750px) {
364 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
365 color: #D7CCFF;
366 font-size: 18px;
367 }
368
369 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
370 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
371 color: #D7CCFF;
372 font-size: 18px;
373 cursor: pointer;
374 }
375 }
376
377 @media (max-width: 991.98px) {
378 .DWTC-hub-d .hero-top {
379 padding: 32px 28px;
380 }
381 }
382
383 @media (max-width: 768px) {
384 .dwtc-hub-play-button {
385 font-size: 10px;
386 }
387 }
388
389 @media (max-width: 575px) {
390 .dwtc-hub-play-button {
391 font-size: 10px;
392 }
393 }
394
395 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
396 display: none;
397 }
398
399 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
400 display: block !important;
401 }
402
403 .dwtc-way-ihero .header-content .heading-container {
404 border: none;
405 }
406
407 .dwtc-way-ihero .header-content .content-date {
408 display: none;
409 }
410
411 .dwtc-way-ihero .header-content .content-details {
412 display: none !important;
413 }
414
415 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
416 display: block !important;
417 color: #ffffff;
418 font-family: "DIN Pro-Light", Helvetica;
419 font-size: 24px;
420 font-weight: 300;
421 letter-spacing: -0.96px;
422 line-height: 120%;
423 }
424
425 @media (max-width: 1160px) {
426 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
427 font-size: 16px;
428 letter-spacing: -0.64px;
429 line-height: 100%;
430 }
431 }
432</style>
433
434<#macro formatTimeAgo inputDate>
435 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
436 <#attempt>
437 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
438 <#recover>
439 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
440 </#attempt>
441
442 <#assign now=.now>
443 <#assign diffInMillis=now?long - parsedDate?long>
444 <#assign diffInSeconds=diffInMillis / 1000>
445 <#assign diffInMinutes=diffInSeconds / 60>
446 <#assign diffInHours=diffInMinutes / 60>
447 <#assign diffInDays=diffInHours / 24>
448
449 <#if diffInSeconds < 60>
450 ${diffInSeconds?int} seconds
451 <#elseif diffInMinutes < 60>
452 ${diffInMinutes?int} minutes
453 <#elseif diffInHours < 24>
454 ${diffInHours?int} hours
455 <#else>
456 ${diffInDays?int} days
457 </#if>
458</#macro>
459
460<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
461
462<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
463 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
464 <#if categories?has_content && categories??>
465 <div class="d-none" id="object-selected-categories">
466 <#list categories as category>
467 <div class="taxonomy-category">
468 <div class="id">
469 ${category.taxonomyCategoryId}
470 </div>
471 <div class="name">
472 ${category.taxonomyCategoryName}
473 </div>
474 </div>
475 </#list>
476 </div>
477 </#if>
478</#if>
479
480<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
481<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
482<#assign videoPreviewURL="" />
483<#assign previewURL="" />
484
485<#if (.data_model["ObjectField_117605#previewURL"].getData())?? &&
486 .data_model["ObjectField_117605#previewURL"].getData() !="">
487 <#assign videoPreviewURL=.data_model["ObjectField_117605#previewURL"].getData()!"">
488</#if>
489
490<#if (.data_model["ObjectField_90598#previewURL"].getData())?? &&
491.data_model["ObjectField_90598#previewURL"].getData() !="">
492 <#assign previewURL=.data_model["ObjectField_90598#previewURL"].getData()!"">
493</#if>
494
495<div class="d-none" id="hub-content-id">
496 ${ObjectEntry_objectEntryId.getData()}
497</div>
498
499<#if categories?has_content && categories??>
500 <#list categories as category>
501 <#switch category.taxonomyCategoryName?lower_case>
502 <#case "spotify">
503 <#-- Code for Podcast Section --></#-->
504 <div class="hero-top">
505 <#if videoPreviewURL==''>
506 <div>
507 <img class="hero-image" src="${previewURL}" alt="Media Image" />
508 </div>
509 <#else>
510 <div>
511 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
512 id="hero-video"></video>
513 </div>
514 <div class="cta-container">
515 <button class="view-button">
516 <div class="arrow-wrapper">
517 <i class="dwtc-hub-arrow-small"></i>
518 </div>
519
520 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
521 ${languageUtil.get(locale, "see-video")}
522 </div>
523 </button>
524 </div>
525 </#if>
526 <div class="container-fluid">
527 <div class="header-content">
528 <div class="title-wrapper ">
529 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
530 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
531 </div>
532 <div class="content-container">
533 <div class="featured">
534 <div class="heading-container">
535 <div class="heading-wrapper" id="player-wrapper">
536 <div class="spotify-player-wrapper">
537 <div class="player">
538 <div class="spotify-icon dwtc-hub-spotify"></div>
539
540 <#if (.data_model["ObjectField_75707#previewURL"].getData())?? &&
541 .data_model["ObjectField_75707#previewURL"].getData() !="">
542 <audio id="audio" src="${.data_model["ObjectField_75707#previewURL"].getData()}"></audio>
543 </#if>
544 <div class="player-content">
545 <div class="cover-art d-flex align-items-center justify-content-center">
546 <img src="/documents/d/the-hub/dwtc-logo-blue-outline" alt="Logo" />
547 </div>
548 <div class="control-section">
549
550 <div class="video-heading">
551 <div id="mediaTitle">${ObjectField_title.getData()}</div>
552
553 </div>
554 <div class="bottom-section">
555 <div class="seek-controls">
556 <button id="backward" class="player-rewind-backward"></button>
557 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
558 <button id="forward" class="player-rewind-forward"></button>
559 <div class="player-time">
560 <span id="duration">0:00</span>
561
562 </div>
563 <div class="player-dots">...</div>
564 <button id="playPause">
565 <i class="dwtc-hub-play-button"></i>
566 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
567 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
568 </svg>
569 </button>
570 </div>
571 </div>
572 </div>
573 </div>
574 </div>
575 </div>
576
577 <div class="mobile-episode-description">
578 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
579
580 <p class="description">
581 ${ObjectField_shortDescription.getData()}
582 </p>
583
584 <div class="content-details">
585 <div class="duration">
586 <i class="dwtc-hub-clock"></i>
587 <div class="text">
588 0 Sec
589 </div>
590 </div>
591
592 <div class="date">
593 <div class="text">
594 <#if (ObjectEntry_modifiedDate.getData())??>
595 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
596 </#if>
597 </div>
598 </div>
599
600 <div class="activity">
601 <div class="comments">
602 <i class="dwtc-hub-chat-bubble"></i>
603 <div class="text">${contentCommentData.totalCount}</div>
604 </div>
605
606 <div class="likes">
607 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
608 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
609 </div>
610 </div>
611 </div>
612 </div>
613 </div>
614 </div>
615 <div class="episode-description">
616 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
617 <p class="description">
618 ${ObjectField_shortDescription.getData()}
619 </p>
620 <div class="content-details">
621 <div class="duration">
622 <i class="dwtc-hub-clock"></i>
623 <div class="text">
624 0 Sec
625 </div>
626 </div>
627 <div class="date">
628 <div class="text">
629 <#if (ObjectEntry_modifiedDate.getData())??>
630 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
631 </#if>
632 </div>
633 </div>
634 <div class="activity">
635 <div class="comments">
636 <i class="dwtc-hub-chat-bubble"></i>
637 <div class="text">${contentCommentData.totalCount}</div>
638 </div>
639 <div class="likes">
640 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
641 <div class="text like-count" id="dwtc-hub-like-count">0</div>
642 </div>
643 </div>
644 </div>
645 </div>
646 </div>
647 </div>
648
649 </div>
650 </div>
651 </div>
652
653 <#break>
654 <#case "article">
655 <#case "youtube">
656 <#case "instagram">
657 <#case "linkedin">
658 <#case "announcements">
659 <#case "news">
660 <#-- Code for Events Section --></#-->
661 <div class="hero-top">
662 <#if videoPreviewURL==''>
663 <div>
664 <img class="hero-image" src="${previewURL}" alt="Media Image" />
665 </div>
666 <#else>
667 <div>
668 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
669 id="hero-video"></video>
670 </div>
671 <div class="cta-container">
672 <button class="view-button">
673 <div class="arrow-wrapper">
674 <i class="dwtc-hub-arrow-small"></i>
675 </div>
676
677 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
678 ${languageUtil.get(locale, "see-video")}</div>
679 </button>
680 </div>
681 </#if>
682 <div class="container-fluid">
683 <div class="header-content">
684 <div class="title-wrapper ">
685 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
686 ${category.taxonomyCategoryName}</h1>
687 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
688 </div>
689
690 <div class="content-container">
691 <div class="article-header">
692 <div class="heading-container">
693 <div class="heading-wrapper">
694 <!-- <div class="content-date">
695
696 <#if ObjectEntry_createDate.getData()??>
697 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
698
699 </#if>
700
701 </div> -->
702 <h2 class="content-title">
703 ${ObjectField_title.getData()}</h2>
704 <p class="short-description d-none">
705 ${ObjectField_shortDescription.getData()}
706 </p>
707 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
708 category.taxonomyCategoryName?lower_case=="instagram" ||
709 category.taxonomyCategoryName?lower_case=="linkedin">
710 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
711 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
712 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
713 </div>
714 </a>
715 </#if>
716 <div class="content-details">
717 <div class="duration">
718 <i class="dwtc-hub-clock"></i>
719 <div class="text">
720 0 Sec
721 </div>
722 </div>
723
724 <div class="date">
725 <div class="text">
726 <#if (ObjectEntry_modifiedDate.getData())??>
727
728 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,
729 yyyy")}
730 </#if>
731 </div>
732 </div>
733
734 <div class="activity">
735 <div class="comments">
736 <i class="dwtc-hub-chat-bubble"></i>
737 <div class="text">${contentCommentData.totalCount}</div>
738 </div>
739
740 <div class="likes">
741 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
742 <div class="text" id="dwtc-hub-like-count">0</div>
743 </div>
744 </div>
745 </div>
746 </div>
747 </div>
748 </div>
749 </div>
750 </div>
751 </div>
752 </div>
753 <#break>
754 </#switch>
755 </#list>
756</#if>
757
758<script>
759 $(document).ready(function () {
760 const $button = $(".view-button");
761 const $video = $(".hero-image");
762
763
764 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
765 $button.on("click", function () {
766 const videoEl = $video.get(0);
767 if (videoEl.paused) {
768 videoEl.play();
769 } else {
770 videoEl.pause();
771 }
772 });
773 };
774
775 });
776</script>
The string doesn't match the expected date/time/date-time format. The string to parse was: "٠٢/٠٥/٢٥ ٠٦:٥٠ ص". The expected format was: "M/d/yy h:mm a".
The nested reason given follows:
Unparseable date: "٠٢/٠٥/٢٥ ٠٦:٥٠ ص"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${ObjectEntry_createDate.getData()?da... [in template "60755508628980#20120#null" at line 697, column 193]
----
1<style>
2 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .provider-container:hover .provider-name {
3 text-decoration: underline;
4 }
5
6 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
7 align-items: center;
8 display: flex;
9 gap: 6px;
10 }
11
12 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
13 color: #D7CCFF;
14 font-size: 18px;
15 }
16
17 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
18 color: #D7CCFF;
19 font-family: "URW DIN-Regular", Helvetica;
20 font-weight: 400;
21 font-size: 14px;
22 letter-spacing: 0.56px;
23 line-height: 100%;
24 text-box-cap: cap alphabetic;
25 text-box-trim: trim-both;
26 text-transform: uppercase;
27 }
28
29 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
30 color: #D7CCFF;
31 font-family: "URW DIN-Regular", Helvetica;
32 font-weight: 400;
33 font-size: 14px;
34 letter-spacing: 0.56px;
35 line-height: 100%;
36 text-box-cap: cap alphabetic;
37 text-box-trim: trim-both;
38 text-transform: uppercase;
39 }
40
41 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
42 align-items: center;
43 display: flex;
44 flex-direction: row;
45 gap: 16px;
46 }
47
48 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
49 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
50 align-items: center;
51 display: flex;
52 gap: 8px;
53 }
54
55 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
56 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
57 color: #D7CCFF;
58 cursor: pointer;
59 font-size: 18px;
60 }
61
62
63 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration {
64 align-items: center;
65 display: flex;
66 gap: 6px;
67 }
68
69 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration i {
70 color: #D7CCFF;
71 font-size: 18px;
72 }
73
74 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .duration .text {
75 color: #D7CCFF;
76 font-family: "URW DIN-Regular", Helvetica;
77 font-weight: 400;
78 font-size: 14px;
79 letter-spacing: 0.56px;
80 line-height: 100%;
81 text-box-cap: cap alphabetic;
82 text-box-trim: trim-both;
83 text-transform: uppercase;
84 }
85
86 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .date .text {
87 color: #D7CCFF;
88 font-family: "URW DIN-Regular", Helvetica;
89 font-weight: 400;
90 font-size: 14px;
91 letter-spacing: 0.56px;
92 line-height: 100%;
93 text-box-cap: cap alphabetic;
94 text-box-trim: trim-both;
95 text-transform: uppercase;
96 }
97
98 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity {
99 align-items: center;
100 display: flex;
101 flex-direction: row;
102 gap: 16px;
103 }
104
105 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments,
106 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes {
107 align-items: center;
108 display: flex;
109 gap: 8px;
110 }
111
112 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i,
113 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i {
114 color: #D7CCFF;
115 cursor: pointer;
116 font-size: 18px;
117 }
118
119 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments i:hover::before {
120 content: "\e91c";
121 }
122
123 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes i:hover::before {
124 content: "\e91d";
125 }
126
127 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .comments .text,
128 .header-content .content-container .article-header .heading-container .heading-wrapper .content-details .activity .likes .text {
129 color: #D7CCFF;
130 font-family: "URW DIN-Regular", Helvetica;
131 font-weight: 400;
132 font-size: 14px;
133 letter-spacing: 0.56px;
134 line-height: 100%;
135 text-box-cap: cap alphabetic;
136 text-box-trim: trim-both;
137 text-transform: uppercase;
138 }
139
140 /* Featured */
141 .header-content .featured {
142 display: flex;
143 width: 100%;
144 }
145
146 .header-content .featured .mobile-episode-description {
147 display: none;
148 }
149
150 .header-content .featured .episode-description {
151 align-items: flex-start;
152 display: flex;
153 flex-direction: column;
154 gap: 24px;
155 justify-content: flex-end;
156 max-width: 597px;
157 padding-left: 24px;
158 padding-bottom: 83px;
159 width: 100%;
160 }
161
162 .header-content .featured .episode-description .episode-intro {
163 color: #ffffff;
164 font-family: "DIN Pro-Medium", Helvetica;
165 font-size: 24px;
166 font-weight: 500;
167 letter-spacing: -0.96px;
168 line-height: 100%;
169 }
170
171 .header-content .featured .episode-description .description {
172 color: #D7CCFF;
173 font-family: "DIN Pro-Regular", Helvetica;
174 font-size: 16px;
175 font-weight: 400;
176 letter-spacing: -0.32px;
177 line-height: 120%;
178 }
179
180 .header-content .featured .episode-description .content-details {
181 align-items: center;
182 display: flex;
183 flex-direction: row;
184 gap: 20px;
185 }
186
187 .header-content .featured .episode-description .content-details .duration {
188 align-items: center;
189 display: flex;
190 gap: 6px;
191 }
192
193 .header-content .featured .episode-description .content-details .duration i {
194 color: #D7CCFF;
195 font-size: 18px;
196 }
197
198 .header-content .featured .episode-description .content-details .duration .text {
199 color: #D7CCFF;
200 font-family: "URW DIN-Regular", Helvetica;
201 font-weight: 400;
202 font-size: 14px;
203 letter-spacing: 0.56px;
204 line-height: 100%;
205 text-box-cap: cap alphabetic;
206 text-box-trim: trim-both;
207 text-transform: uppercase;
208 }
209
210 .header-content .featured .episode-description .content-details .date .text {
211 color: #D7CCFF;
212 font-family: "URW DIN-Regular", Helvetica;
213 font-weight: 400;
214 font-size: 14px;
215 letter-spacing: 0.56px;
216 line-height: 100%;
217 text-box-cap: cap alphabetic;
218 text-box-trim: trim-both;
219 text-transform: uppercase;
220 }
221
222
223 .header-content .featured .episode-description .content-details .activity {
224 align-items: center;
225 display: flex;
226 flex-direction: row;
227 gap: 16px;
228 }
229
230 .header-content .featured .episode-description .content-details .activity .comments,
231 .header-content .featured .episode-description .content-details .activity .likes {
232 align-items: center;
233 display: flex;
234 gap: 8px;
235 }
236
237 .header-content .featured .episode-description .content-details .activity .comments i,
238 .header-content .featured .episode-description .content-details .activity .likes i {
239 color: #D7CCFF;
240 cursor: pointer;
241 font-size: 18px;
242 }
243
244 .header-content .featured .episode-description .content-details .activity .comments i:hover::before {
245 content: "\e91c";
246 }
247
248 .header-content .featured .episode-description .content-details .activity .likes i:hover::before {
249 content: "\e91d";
250 }
251
252 .DWTC-hub-d {
253 display: flex;
254 flex-direction: column;
255 align-items: flex-start;
256 position: relative;
257 }
258
259 .DWTC-hub-d .hero-top {
260 display: flex;
261 flex-direction: column;
262 height: 100%;
263 align-items: flex-start;
264 gap: 132px;
265 padding: 42px 32px;
266 position: relative;
267 align-self: stretch;
268 width: 100%;
269 overflow: hidden;
270 }
271
272 .DWTC-hub-d .hero-top .hero-image {
273 position: absolute;
274 top: 0;
275 left: 0;
276 right: 0;
277 bottom: 0;
278 object-fit: cover;
279 width: 100%;
280 height: 100%;
281 }
282
283 .hero-top .cta-container {
284 align-items: flex-end;
285 display: flex;
286 flex-grow: 1;
287 justify-content: flex-end;
288 width: fit-content;
289 z-index: 1;
290 position: absolute;
291 left: 50%;
292 top: 50%;
293 transform: translate(-50%, -50%);
294 }
295
296 .hero-top .cta-container .view-button {
297 align-items: center;
298 background: radial-gradient(107.32% 141.42% at 0% 0%, rgba(244, 244, 244, 0.28) 0%, rgba(233, 233, 233, 0.34) 100%);
299 border: 1px solid rgba(244, 244, 244, 0.56);
300 border-radius: 40px;
301 display: flex;
302 gap: 16px;
303 height: 54px;
304 padding: 20px 0px;
305 transition: background-color 0.3s ease;
306 width: 186px;
307 }
308
309 .hero-top .cta-container .view-button .arrow-wrapper {
310 align-items: center;
311 background-color: #000;
312 border-radius: 50%;
313 display: flex;
314 height: 46px;
315 justify-content: center;
316 margin-left: 4px;
317 width: 46px;
318 }
319
320 .hero-top .cta-container .view-button .arrow-wrapper i {
321 color: #ffffff;
322 font-size: 16px;
323 }
324
325 .hero-top .cta-container .view-button:hover {
326 background: none;
327 background-color: #000;
328 border-color: #000;
329 }
330
331 .hero-top .cta-container .view-button .label {
332 color: #fff;
333 font-family: "DIN Pro-Medium", Helvetica;
334 font-weight: 500;
335 font-size: 18px;
336 letter-spacing: -0.72px;
337 line-height: 100%;
338 text-box-cap: both alphabetic;
339 text-box-trim: trim-both;
340 transition: color 0.3s ease;
341 }
342
343 .hero-top .cta-container .view-button:hover .label {
344 color: #ffffff;
345 }
346
347 .hero-top .cta-container .view-button .arrow-wrapper .arrow-right {
348 background-color: #fff;
349 -webkit-mask-image: url("assets/images/svg/btn-arrow-right.svg");
350 mask-image: url("assets/images/svg/btn-arrow-right.svg");
351 -webkit-mask-repeat: no-repeat;
352 mask-repeat: no-repeat;
353 background-position: 50% 50%;
354 width: 14px;
355 height: 10px;
356 transition: background-color 0.3s ease;
357 }
358
359 .hero-top .cta-container .view-button:hover .arrow-wrapper .arrow-right {
360 background-color: #fff;
361 }
362
363 @media (max-width: 1750px) {
364 .header-content .content-container .featured .mobile-episode-description .content-details .duration i {
365 color: #D7CCFF;
366 font-size: 18px;
367 }
368
369 .header-content .content-container .featured .mobile-episode-description .content-details .activity .comments,
370 .header-content .content-container .featured .mobile-episode-description .content-details .activity .likes i {
371 color: #D7CCFF;
372 font-size: 18px;
373 cursor: pointer;
374 }
375 }
376
377 @media (max-width: 991.98px) {
378 .DWTC-hub-d .hero-top {
379 padding: 32px 28px;
380 }
381 }
382
383 @media (max-width: 768px) {
384 .dwtc-hub-play-button {
385 font-size: 10px;
386 }
387 }
388
389 @media (max-width: 575px) {
390 .dwtc-hub-play-button {
391 font-size: 10px;
392 }
393 }
394
395 .dwtc-way-ihero .header-content .title-wrapper h1.detail-title {
396 display: none;
397 }
398
399 .dwtc-way-ihero .header-content .title-wrapper h1.dwtc-way-title {
400 display: block !important;
401 }
402
403 .dwtc-way-ihero .header-content .heading-container {
404 border: none;
405 }
406
407 .dwtc-way-ihero .header-content .content-date {
408 display: none;
409 }
410
411 .dwtc-way-ihero .header-content .content-details {
412 display: none !important;
413 }
414
415 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
416 display: block !important;
417 color: #ffffff;
418 font-family: "DIN Pro-Light", Helvetica;
419 font-size: 24px;
420 font-weight: 300;
421 letter-spacing: -0.96px;
422 line-height: 120%;
423 }
424
425 @media (max-width: 1160px) {
426 .dwtc-way-ihero .header-content .content-container .article-header .heading-container .heading-wrapper .short-description {
427 font-size: 16px;
428 letter-spacing: -0.64px;
429 line-height: 100%;
430 }
431 }
432</style>
433
434<#macro formatTimeAgo inputDate>
435 <#assign cleanedDate=inputDate?replace("[ ,]", " " , "r" )?trim>
436 <#attempt>
437 <#assign parsedDate=cleanedDate?datetime("M/dd/yy hh:mm a")>
438 <#recover>
439 <#assign parsedDate=cleanedDate?datetime("M/dd/yyyy hh:mm a")>
440 </#attempt>
441
442 <#assign now=.now>
443 <#assign diffInMillis=now?long - parsedDate?long>
444 <#assign diffInSeconds=diffInMillis / 1000>
445 <#assign diffInMinutes=diffInSeconds / 60>
446 <#assign diffInHours=diffInMinutes / 60>
447 <#assign diffInDays=diffInHours / 24>
448
449 <#if diffInSeconds < 60>
450 ${diffInSeconds?int} seconds
451 <#elseif diffInMinutes < 60>
452 ${diffInMinutes?int} minutes
453 <#elseif diffInHours < 24>
454 ${diffInHours?int} hours
455 <#else>
456 ${diffInDays?int} days
457 </#if>
458</#macro>
459
460<#assign hubContentDataResponse=restClient.get("/c/dwtchubcontents/${ObjectEntry_objectEntryId.getData()}?fields=taxonomyCategoryBriefs") />
461
462<#if hubContentDataResponse?has_content && hubContentDataResponse.taxonomyCategoryBriefs??>
463 <#assign categories=hubContentDataResponse.taxonomyCategoryBriefs />
464 <#if categories?has_content && categories??>
465 <div class="d-none" id="object-selected-categories">
466 <#list categories as category>
467 <div class="taxonomy-category">
468 <div class="id">
469 ${category.taxonomyCategoryId}
470 </div>
471 <div class="name">
472 ${category.taxonomyCategoryName}
473 </div>
474 </div>
475 </#list>
476 </div>
477 </#if>
478</#if>
479
480<#assign scopeGroupId=themeDisplay.getScopeGroupId()>
481<#assign contentCommentData = restClient.get("/c/usercomments/scopes/${scopeGroupId}?filter=r_hubContentUserComments_c_dwtcHubContentId eq '${ObjectEntry_objectEntryId.getData()}'")>
482<#assign videoPreviewURL="" />
483<#assign previewURL="" />
484
485<#if (.data_model["ObjectField_117605#previewURL"].getData())?? &&
486 .data_model["ObjectField_117605#previewURL"].getData() !="">
487 <#assign videoPreviewURL=.data_model["ObjectField_117605#previewURL"].getData()!"">
488</#if>
489
490<#if (.data_model["ObjectField_90598#previewURL"].getData())?? &&
491.data_model["ObjectField_90598#previewURL"].getData() !="">
492 <#assign previewURL=.data_model["ObjectField_90598#previewURL"].getData()!"">
493</#if>
494
495<div class="d-none" id="hub-content-id">
496 ${ObjectEntry_objectEntryId.getData()}
497</div>
498
499<#if categories?has_content && categories??>
500 <#list categories as category>
501 <#switch category.taxonomyCategoryName?lower_case>
502 <#case "spotify">
503 <#-- Code for Podcast Section --></#-->
504 <div class="hero-top">
505 <#if videoPreviewURL==''>
506 <div>
507 <img class="hero-image" src="${previewURL}" alt="Media Image" />
508 </div>
509 <#else>
510 <div>
511 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
512 id="hero-video"></video>
513 </div>
514 <div class="cta-container">
515 <button class="view-button">
516 <div class="arrow-wrapper">
517 <i class="dwtc-hub-arrow-small"></i>
518 </div>
519
520 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
521 ${languageUtil.get(locale, "see-video")}
522 </div>
523 </button>
524 </div>
525 </#if>
526 <div class="container-fluid">
527 <div class="header-content">
528 <div class="title-wrapper ">
529 <h1 class="detail-title mb-3"><span class='strong'>DWTC</span> Hub ${category.taxonomyCategoryName}</h1>
530 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
531 </div>
532 <div class="content-container">
533 <div class="featured">
534 <div class="heading-container">
535 <div class="heading-wrapper" id="player-wrapper">
536 <div class="spotify-player-wrapper">
537 <div class="player">
538 <div class="spotify-icon dwtc-hub-spotify"></div>
539
540 <#if (.data_model["ObjectField_75707#previewURL"].getData())?? &&
541 .data_model["ObjectField_75707#previewURL"].getData() !="">
542 <audio id="audio" src="${.data_model["ObjectField_75707#previewURL"].getData()}"></audio>
543 </#if>
544 <div class="player-content">
545 <div class="cover-art d-flex align-items-center justify-content-center">
546 <img src="/documents/d/the-hub/dwtc-logo-blue-outline" alt="Logo" />
547 </div>
548 <div class="control-section">
549
550 <div class="video-heading">
551 <div id="mediaTitle">${ObjectField_title.getData()}</div>
552
553 </div>
554 <div class="bottom-section">
555 <div class="seek-controls">
556 <button id="backward" class="player-rewind-backward"></button>
557 <input type="range" id="seekBar" class="seek-bar" min="0" value="0" max="372.715083">
558 <button id="forward" class="player-rewind-forward"></button>
559 <div class="player-time">
560 <span id="duration">0:00</span>
561
562 </div>
563 <div class="player-dots">...</div>
564 <button id="playPause">
565 <i class="dwtc-hub-play-button"></i>
566 <svg class="lexicon-icon lexicon-icon-pause d-none" role="presentation">
567 <use href="/o/classic-theme/images/clay/icons.svg#pause"></use>
568 </svg>
569 </button>
570 </div>
571 </div>
572 </div>
573 </div>
574 </div>
575 </div>
576
577 <div class="mobile-episode-description">
578 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
579
580 <p class="description">
581 ${ObjectField_shortDescription.getData()}
582 </p>
583
584 <div class="content-details">
585 <div class="duration">
586 <i class="dwtc-hub-clock"></i>
587 <div class="text">
588 0 Sec
589 </div>
590 </div>
591
592 <div class="date">
593 <div class="text">
594 <#if (ObjectEntry_modifiedDate.getData())??>
595 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
596 </#if>
597 </div>
598 </div>
599
600 <div class="activity">
601 <div class="comments">
602 <i class="dwtc-hub-chat-bubble"></i>
603 <div class="text">${contentCommentData.totalCount}</div>
604 </div>
605
606 <div class="likes">
607 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-mobile-btn"></i>
608 <div class="text like-count" id="dwtc-hub-like--mobile-count">0</div>
609 </div>
610 </div>
611 </div>
612 </div>
613 </div>
614 </div>
615 <div class="episode-description">
616 <div class="episode-intro">${languageUtil.get(locale, "about-the-episode")}</div>
617 <p class="description">
618 ${ObjectField_shortDescription.getData()}
619 </p>
620 <div class="content-details">
621 <div class="duration">
622 <i class="dwtc-hub-clock"></i>
623 <div class="text">
624 0 Sec
625 </div>
626 </div>
627 <div class="date">
628 <div class="text">
629 <#if (ObjectEntry_modifiedDate.getData())??>
630 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d, yyyy")}
631 </#if>
632 </div>
633 </div>
634 <div class="activity">
635 <div class="comments">
636 <i class="dwtc-hub-chat-bubble"></i>
637 <div class="text">${contentCommentData.totalCount}</div>
638 </div>
639 <div class="likes">
640 <i class="dwtc-hub-like like-btn" id="dwtc-hub-like-btn"></i>
641 <div class="text like-count" id="dwtc-hub-like-count">0</div>
642 </div>
643 </div>
644 </div>
645 </div>
646 </div>
647 </div>
648
649 </div>
650 </div>
651 </div>
652
653 <#break>
654 <#case "article">
655 <#case "youtube">
656 <#case "instagram">
657 <#case "linkedin">
658 <#case "announcements">
659 <#case "news">
660 <#-- Code for Events Section --></#-->
661 <div class="hero-top">
662 <#if videoPreviewURL==''>
663 <div>
664 <img class="hero-image" src="${previewURL}" alt="Media Image" />
665 </div>
666 <#else>
667 <div>
668 <video class="hero-image" src="${videoPreviewURL}" poster="${previewURL}" muted loop playsinline preload="auto"
669 id="hero-video"></video>
670 </div>
671 <div class="cta-container">
672 <button class="view-button">
673 <div class="arrow-wrapper">
674 <i class="dwtc-hub-arrow-small"></i>
675 </div>
676
677 <div class="label" data-lfr-editable-id="play-button-text" data-lfr-editable-type="text">
678 ${languageUtil.get(locale, "see-video")}</div>
679 </button>
680 </div>
681 </#if>
682 <div class="container-fluid">
683 <div class="header-content">
684 <div class="title-wrapper ">
685 <h1 class="detail-title"><span class='strong'>DWTC</span> Hub
686 ${category.taxonomyCategoryName}</h1>
687 <h1 class="dwtc-way-title d-none"><span class='strong'>DWTC</span> Way</h1>
688 </div>
689
690 <div class="content-container">
691 <div class="article-header">
692 <div class="heading-container">
693 <div class="heading-wrapper">
694 <!-- <div class="content-date">
695
696 <#if ObjectEntry_createDate.getData()??>
697 ${ObjectEntry_createDate.getData()?date("M/d/yy h:mm a")?string("dd MMM yyyy")}
698
699 </#if>
700
701 </div> -->
702 <h2 class="content-title">
703 ${ObjectField_title.getData()}</h2>
704 <p class="short-description d-none">
705 ${ObjectField_shortDescription.getData()}
706 </p>
707 <#if category.taxonomyCategoryName?lower_case=="youtube" ||
708 category.taxonomyCategoryName?lower_case=="instagram" ||
709 category.taxonomyCategoryName?lower_case=="linkedin">
710 <a class="provider-container d-none" href="${ObjectField_postUrl.getData()}" target="_blank">
711 <i class="dwtc-hub-${category.taxonomyCategoryName?lower_case}"></i>
712 <div class="provider-name">VIA ${category.taxonomyCategoryName?upper_case}
713 </div>
714 </a>
715 </#if>
716 <div class="content-details">
717 <div class="duration">
718 <i class="dwtc-hub-clock"></i>
719 <div class="text">
720 0 Sec
721 </div>
722 </div>
723
724 <div class="date">
725 <div class="text">
726 <#if (ObjectEntry_modifiedDate.getData())??>
727
728 ${ObjectEntry_modifiedDate.getData()?date("M/d/yy h:mm a")?string("MMM d,
729 yyyy")}
730 </#if>
731 </div>
732 </div>
733
734 <div class="activity">
735 <div class="comments">
736 <i class="dwtc-hub-chat-bubble"></i>
737 <div class="text">${contentCommentData.totalCount}</div>
738 </div>
739
740 <div class="likes">
741 <i class="dwtc-hub-like" id="dwtc-hub-like-btn"></i>
742 <div class="text" id="dwtc-hub-like-count">0</div>
743 </div>
744 </div>
745 </div>
746 </div>
747 </div>
748 </div>
749 </div>
750 </div>
751 </div>
752 </div>
753 <#break>
754 </#switch>
755 </#list>
756</#if>
757
758<script>
759 $(document).ready(function () {
760 const $button = $(".view-button");
761 const $video = $(".hero-image");
762
763
764 if ($video.length && $video.prop("tagName").toLowerCase() === "video") {
765 $button.on("click", function () {
766 const videoEl = $video.get(0);
767 if (videoEl.paused) {
768 videoEl.play();
769 } else {
770 videoEl.pause();
771 }
772 });
773 };
774
775 });
776</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.
Regional investors, including private, family and investment funds are leading a franchising boom in Saudi Arabia, according to a 2022 report online franchise portal, Top Franchise. It noted that, over the past decade, the number of franchises and franchise brands successfully operating across the Kingdom has increased more than tenfold. For example, British no-frills chain PureGym, currently has 18 locations across the Kingdom.
While established mass market, easy-to-understand brands and their regional counterparts have historically performed better, the entry of a growing community of boutique fitness facilities is adding a new layer of competition, albeit niche.
Boutique brands gaining a foothold in the GCC include 1Rebel from the UK, which opened in Riyadh through a licensing agreement with Fahad Alhagbani, who is also co-founder and CEO of Saudi-based Armah Sports. Popular US kickboxing concept 9Round has also successfully tapped into the Saudi market with almost 50 branches, as well as multiple venues in the UAE, Kuwait, Bahrain, Oman and Qatar.