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