PageSourceSearch

https://www.smartysenglish.com/s/store

html smartysenglish.com collected 2026-10-08 14:03:08 UTC 234,646 bytes, 4,889 lines download raw bytes

1
2
3
4
5
6<!DOCTYPE html>
7<html>
8<head>
9	<title>Smartys English Academy</title>
10	<meta name="keywords" content="Learn English Online, Learn how to speak English fluently, Speak like a Native, Communicate with confidence"/>
11	<meta name="description" content="Smartys English Academy Online"/>
12	
13
14
15
16
17 
18
19 
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37		
38		
39			
40		
41
42
43
44
45
46
47	
48	
49
50
51	
52		
53	
54	
55
56
57	
58	
59		
60	
61
62
63
64 
65 
66 	
67 	
68		<meta name="viewport" content="width=device-width, initial-scale=1.0">
69 	
70 	
71  
72    
73   		
74   		
75   		
76   		
77   		
78   		
79   		
80    
81    <meta name="google" content="notranslate">
82    
83    	
84        	<link rel="canonical" href="https://www.smartysenglish.com/s/store" />
85  
86
87
88<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
89<link rel="icon" href="/favicon.ico" type="image/x-icon">
90
91
92
93
94
95
96	
97		
97<script>var orgCountry = "TH";</script>
97
98	
99	
100
101
102<link id="theme" href="https://d502jbuhuh9wk.cloudfront.net/resources/themes/default/spectre.min.css" rel="stylesheet">
103
104<link rel="preconnect" href="https://fonts.googleapis.com"> 
105<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
106
107<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" as="style" onload="this.onload=null;this.rel='stylesheet'">
108<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" ></noscript>
109
110<link rel="preload" href="https://d502jbuhuh9wk.cloudfront.net/resources/css/intlTelInput.css?v=1" as="style" onload="this.onload=null;this.rel='stylesheet'">
111<noscript><link rel="stylesheet" href="https://d502jbuhuh9wk.cloudfront.net/resources/css/intlTelInput.css?v=1" ></noscript>
112
113<link rel="preload" href="https://d502jbuhuh9wk.cloudfront.net/fontawesome/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
114<noscript><link rel="stylesheet" href="https://d502jbuhuh9wk.cloudfront.net/fontawesome/css/all.min.css" ></noscript>
115
116<link id="theme-exp" href="https://d502jbuhuh9wk.cloudfront.net/resources/themes/default/spectre-exp.min.css" rel="stylesheet">
117
118
119
120	
121	<link href="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/stylesheets/sstyles_0f8f8346b730ed7f9d44d25335e652c6.css" rel="stylesheet">
122	<link rel="stylesheet" href="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/stylesheets/sstore_052a28d8fc16dab749345a09dfcd63bf.css"/>
123	
124	<link rel="stylesheet" href="https://d502jbuhuh9wk.cloudfront.net/resources/stylesheets/gtheme3.css?v=7"/>
125	
126	<style type="text/css">
127		#loginLoader{
128			position: absolute;
129	    	left: 0;
130	    	right: 0;
131	    	margin-left: auto;
132	    	margin-right: auto;
133	    	width: 100px;
134	    	top: 50%;
135		}
136	    .customSocialBtn {
137	      	display: flex; 
138	    	white-space: nowrap;
139	    	justify-content: center;
140	    	align-items: center;
141	    	padding: 11px 67px;
142	    	position: static;
143	    	left: 0px;
144	    	top: 40px;
145	    	cursor: pointer;
146	    	margin: auto;
147	    	border: none;
148	    	gap: 10px;
149	    	/*width: 364px;
150	    	height: 48px;
151	      	 background: #000000; */
152	    	/*For New Button Remove Bellow Codes and Uncomment upper Code  */
153	    	background: white;
154	      	border-radius: 4px;
155	      	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%);
156	      	width: 245px;
157	      	height: 40px;
158	    }
159	  
160	    .customSocialBtn img.icon {     
161	    	height: 20px;
162	    	width: 20px;
163	    }
164	    .customSocialBtn span.buttonText {
165	    	font-style: normal;
166	    	font-weight: 900;
167	    	font-size: 16px;
168	    	line-height: 120%;
169			opacity: 0.9;
170	    	font-family: 'Roboto', sans-serif;
171	    	/* color: #F7F7F7; */
172	    	/*For New Button Remove Bellow Codes and Uncomment upper Code  */
173	    	color: #808080;
174	    }
175	</style>
176	
177	
178		
179		
180		 
181			<style type="text/css">
182				
183					.main.container { margin-top: calc(var(--headerHeight) + 25px); }
184				
185			</style>
186		
187	
188	
189		
190		
191			<style type="text/css">
192				footer a, footer+div a {
193					color: var(--footerTextColor) !important;
194				}
195				footer .socialIcons {text-align: right;}
196				@media (max-width: 600px) {
197					footer .linksCont a { display: block !important; }
198					footer .socialIcons {text-align: center;margin-top: 20px;}
199				}
200			</style>
201		
202	
203
204
205
206
207
208<style type="text/css">
209	:root {
210	 	--themeColor: #5755d9;
211	 	--themeBGColor: #fff;
212		--headerHeight: 80px;
213		--headerTextColor: #0a0959;
214		--headerBGColor: #fdfbfb;
215		--footerTextColor: #FAF0F0;
216	}
217
218
219	:root {
220	 	--themeColor: #317AE7;
221	 	--themeBGColor: #EFF5FE;
222	 	--themeCornerRadius: 25px;
223	 	--themeGrayColor: #F5F5F5;
224	 }
225
226</style>
227
228<style type="text/css">
229	
230    
231
232</style>
233
234
235
236	<!-- Facebook Pixel Code -->
237	
237<script>
vendor: 426 bytes, lines 237-246
237
238	  !function(f,b,e,v,n,t,s)
239	  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
240	  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
241	  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
242	  n.queue=[];t=b.createElement(e);t.async=!0;
243	  t.src=v;s=b.getElementsByTagName(e)[0];
244	  s.parentNode.insertBefore(t,s)}(window, document,'script',
245	  'https://connect.facebook.net/en_US/fbevents.js');
246	  fbq('init', '
246214056081572485
vendor: 34 bytes, lines 246-248
246');
247	  fbq('track', 'PageView');
248	
248</script>
248
249	<noscript><img height="1" width="1" style="display:none"
250	  src="https://www.facebook.com/tr?id=214056081572485&ev=PageView&noscript=1"
251	/></noscript>
252	<!-- End Facebook Pixel Code -->
253
254
255<script type="text/javascript">
256	window.onload = function(event) {
257	   document.querySelectorAll('header .avatar img').forEach(function(img){
258		   	if(img.naturalWidth == 0) {
259		   		img.style.display='none';
260		   	}
261	   })
262	};
263	var RESCDN = "https://d502jbuhuh9wk.cloudfront.net";
264	
265	function showCourseDefaultCover(img, cid) {
266		var rndm = ((parseInt(cid.replace(/[a-z]/g, '')) % 10) % 6) + 1;
267		rndm = isNaN(rndm) ? 1 : rndm;
268		if(img === null) {
269			return RESCDN + "/resources/images/cc"+rndm+".jpg";
270		}
271		
272		img.src = RESCDN + "/resources/images/cc"+rndm+".jpg";
273	}
274</script>
274
275
276
277
278	
279	
280
281
282
283
284
285
286
287<script type="text/javascript">var learnerConsentMsg = `We've updated our <a href='/termsofuse' target='_blank' style='text-decoration:underline'>terms and conditions</a> and <a href='/privacy-policy' target='_blank' style='text-decoration:underline'>privacy policy</a>.<br>By proceeding, you agree to our new terms.`;</script>
287
288
289<script type="text/javascript">var creatorConsentMsg = `We've updated our <a href='https://graphy.com/legal/terms' target='_blank' style='text-decoration:underline'>terms and conditions</a> and <a href='https://graphy.com/legal/privacy' target='_blank' style='text-decoration:underline'>privacy policy</a>.<br>By proceeding, you agree to our new terms.`;</script>
289
290
291<script type="text/javascript">var cookieMsg = `We use cookies to personalise your experience and to analyse our website traffic. By continuing to use our website, you consent to our cookies.`;</script>
291
292
293
294
295
296	
296<script>var orgTermsOfUseVersion = parseInt("2");</script>
296
297
298
299
300<script type="text/template" id="consentPromptTemplate">
301<div class="spectre">
302	<div class="modal active" id="consentPrompt">
303		    <a href="javascript:void(0);" class="modal-overlay" aria-label="Close"></a>
304		    <div class="modal-container" style="max-width:325px">
305		      <div class="modal-header" style="padding:0.8rem 0.8rem 0px 0.8rem;">
306		        <div class="modal-title h5 text-center">Updated Terms</div>
307		      </div>
308		      <div class="modal-body">
309		        
310				<form id="consentForm" style="text-align:center; font-size:13px">
311					<div class="content"></div><br>
312					<div class="text-center">
313						<button id="consentBtn" type="button" class="btn close btn-primary">I Agree</button>
314					</div>
315				</form>
316
317		    </div>
318		  </div>
319</div>
320</script>
320
321
322
323<script>
324	var hideCookiePopup = false;
325	var cookieConsentEnabled = true;
326	if(!cookieConsentEnabled){
327		hideCookiePopup = true;
328	}
329	var SPORG = {subscriptionPlan: "launch", checkout_version: "2", customer_type: "r"};
330</script>
vendor: 1 bytes, line 330
330
331<script type="text/template" id="cookiePopupTemplate">
332<div class="spectre" style="position: fixed; bottom: 0; width: 100%; opacity:1; z-index: 9999;">
333		<div class="modal-container p-0" id="cookiePopup">        
334			<form id="cookiePopupForm">
335				<div class="columns" style="align-items: center;">
336					<div class="column col-sm-12 content text-center"></div>
337					<div class="column col-sm-12 text-center">
338						<a href="/privacy-policy" class="btn" target="_blank" id="viewPrivacyPolicyBtn" style="margin-right:15px;">View privacy policy</a>
339						<button id="acceptCookiesBtn" type="button" class="btn close btn-primary">Accept cookies</button>
340					</div>
341				</div>
342			</form>
343		</div>
344</div>
345</script>
vendor: 88 bytes, lines 345-359
345
346
347
348
349	
350		
351		
352			
353		
354	
355
356
357
358
359 <script async src="http://www.googletagmanager.com/gtag/js?id=
359G-D5KCT07VSM
vendor: 13 bytes, lines 359-360
359"></script>
360	
360<script>
361  		
vendor: 140 bytes, lines 361-365
361window.dataLayer = window.dataLayer || [];
362  		function gtag(){dataLayer.push(arguments);}
363  		gtag('js', new Date());
364
365  		gtag('config', '
365G-D5KCT07VSM
vendor: 7 bytes, lines 365-366
365');
366  	
366</script>
366
367
368
369
370
371
372
373
374
375	
376
377
378<!-- Google Tag Manager -->
379<script>
vendor: 327 bytes, lines 379-383
379(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
380new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
381j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
382'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
383})(window,document,'script','dataLayer','
383GTM-KW7N9P2
vendor: 4 bytes, line 383
383');
384</script>
384
385<!-- End Google Tag Manager -->
386 
387 	
387<script defer type="text/javascript" src="https://api.pirsch.io/pirsch-extended.js" 
388    id="pirschextendedjs" 
389    data-code="8L8QPXS50ZtKmjOGcafmTt2agnDCSojn"></script>
389
390 
391	<meta name="google-site-verification" content="" />
392</head>
393<body class="theme3">
394	
395		
396		
397			
398
399
400
401<div class="header spectre fixed"
402	style="background-color: #fdfbfb;">
403	
404	<header class="navbar container" style="min-height: 80px;">
405		  
406		  <div id="navbar-section-btn">
407		  	
408				<a href="javascript:void(0);" amplitude-event="navbar_link_tapped_user_landing_page" amplitude-payload='{"custom_domain": "www.smartysenglish.com","button":"cart"}' class="nav-link badge cartBtn mr-2" data-badge="0"><i class="material-icons">shopping_cart</i></a>
409			
410		  	<a class="btn btn-link btn-action ml-2" id="header-collapse-btn"  href="javascript:void(0);">
411				<i class="icon-menu material-icons">menu</i>
412		  	</a>
413		  </div>
414		  <section class="navbar-section" style="min-height: 80px;">
415		    <a href="/" amplitude-event="navbar_link_tapped_user_landing_page" amplitude-payload='{"custom_domain": "www.smartysenglish.com","button":"profile_logo"}'><img alt="logo" onerror="this.src='https://d502jbuhuh9wk.cloudfront.net/resources/images/yourlogohere.jpg'" src='https://d502jbuhuh9wk.cloudfront.net/logos/636a2a65e4b0641b33686328.png?v=9'/></a>
416		  </section>
417		  
418		  <section class="navbar-section menu-links">
419			
420				<a href="/s/store" class="nav-link" data-id="courses" amplitude-event="navbar_link_tapped_user_landing_page" amplitude-payload='{"custom_domain": "www.smartysenglish.com","button":"store"}'>Courses</a>
421			
422			
423				<a href="/blog" class="nav-link" data-id="blog" amplitude-event="navbar_link_tapped_user_landing_page" amplitude-payload='{"custom_domain": "www.smartysenglish.com","button":"blog"}'>Blog</a>
424			
425			
426				<a href="/aboutus" class="nav-link" data-id="about" amplitude-event="navbar_link_tapped_user_landing_page" amplitude-payload='{"custom_domain": "www.smartysenglish.com","button":"about"}'>About</a>
427			
428			
429				
430					<a class="nav-link" href="/s/pages/smartys-home" data-id="7oonm3x7k" >Smartys</a>
431				
432					<a class="nav-link" href="/contactus" data-id="d2pwpub9a" >Contact</a>
433				
434			
435			
436				<a href="/s/avatar" target="_blank" class="nav-link" amplitude-event="aiavatar_tapped" amplitude-payload='{"source":"nav_bar"}'>AI Avatar</a>
437			
438			
439			
440			
441				<a href="/memberships" class="nav-link" amplitude-event="membership_tapped" amplitude-payload='{"membership_id": "66165ce788807f00cb2788a7","source":"nav_bar"}' href="javascript:void(0);">Membership</a>
442			
443			
444				
445				
446					
447						
448						
449							<a href="javascript:void(0);" class="nav-link badge cartBtn hide-md" data-badge="0"><i class="fa-regular fa-cart-shopping"></i></a>
450						
451					
452		    			<a href="javascript:void(0);" class="btn btn-primary loginBtn">Login</a>
453				
454			
455		  </section>
456	</header>
457	
458	
459</div>
460		
461	
462	<div class="spectre">
463	<div class="main container" style="margin-top: 80px;">
464		<div class="columns pt-2">
465			<div class="column col-4 col-sm-12">
466				<div class="dropdown categoriesBtn col-12">
467					  <a href="#" class="btn btn-lg btn-primary dropdown-toggle" tabindex="0"><span class="icon-text">Category</span> <i class="material-icons">arrow_drop_down</i></a>
468					  <ul class="menu"></ul>
469				</div>
470			</div>
471		</div>
472		
473			
474				<div class="columns" style="margin-top: 50px;" id="courseslist">
475					<div class="column col-12 loading loading-lg"></div>
476					<div class="empty col-12" style="display: none;">
477						<p class="empty-title">
478							
479							Keep a lookout for our courses, they're coming soon
480						
481			  			</p>
482			  			
483					</div>
484				</div>
485			
486			
487		
488	</div>
489	</div>
490
491
492
493
494	
495		
496		
497			
498
499
500
501
502
503
504
505
506
507
508<div class="yogya-footer" style="display: flex !important;align-items:center;justify-content:center;clear:both;width: 100%;flex-direction: column; row-gap:30px; background: #F7F7F7; color: #232228; padding: 80px 10px;">
509	
510		
511		
512			
513				
514				
515					<a style="display: flex !important;align-items:center;justify-content:center;text-decoration: none !important;background: #000 !important;color: #fff !important;padding: 12px 20px !important;border-radius: 4px !important;font-size: 14px !important;font-weight: 600 !important;line-height: 20px !important;" rel="nofollow" href="https://graphy.com/products/create-and-sell-course-online?utm_campaign=smartysenglishacademy&utm_source=gc&utm_device=website&gref=smartysenglishacademy" target="_blank"><img alt="Launch your Graphy" style="height: 20px; width: 11px; margin-right: 12px;" src="/resources/images/grvector.svg">Launch your Graphy</a>
516					<div class="text-center" style="font-size: 12px;font-weight: 400;line-height: 20px;letter-spacing: 0.015em;">100K+ creators trust <a href="https://graphy.com/products/create-and-sell-course-online?utm_campaign=smartysenglishacademy&utm_source=gc&utm_device=website&gref=smartysenglishacademy" target="_blank" rel="nofollow" style="color: #000 !important;text-decoration: underline !important;padding: 0 !important;font-size: inherit !important;">Graphy</a> to teach online</div>
517				
518			
519		
520	
521	<div style="display: flex !important;align-items:center;justify-content:center;column-gap: 12px;">
522		<a href="https://www.facebook.com/SmartysEnglishAcademy/" class="fbPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;
522display: flex;align-items:center;justify-content:center;"><i class="fa-brands fa-facebook-f" style="font-size: 11px"></i></a>
523		<a href="https://www.instagram.com/smartysenglish/" class="instaPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;display: flex;align-items:center;justify-content:center;"><i class="fa-brands fa-instagram" style="font-size: 11px"></i></a> 
524		<a href="https://twitter.com/smartysenglish" class="twitterPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;display: flex;align-items:center;justify-content:center;" ><span style="font-size: 11px">&#x1D54F;</span></a> 
525		<a href="https://www.linkedin.com/in/smartysenglish/" class="linkedinPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;display: flex;align-items:center;justify-content:center;" ><i class="fa-brands fa-linkedin-in" style="font-size: 11px"></i></a> 
526		<a href="https://www.youtube.com/c/GraphyUniversity" class="yPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;display: flex;align-items:center;justify-content:center;" ><i class="fa-brands fa-youtube" style="font-size: 11px"></i></a>
527		<a href="" class="telegramPage" target="_blank" style="text-decoration: none !important;color:#000 !important;font-size: inherit !important;height:24px;width:24px;border: 1px solid #E5E5E5;display: flex;align-items:center;justify-content:center;" ><i class="fa-brands fa-telegram" style="font-size: 11px"></i></a>
528	</div>
529	<div style="display: flex !important;align-items:center;justify-content:center;font-size: 14px;font-weight: 500;line-height: 20px;letter-spacing: 0.015em;column-gap: 12px;flex-wrap: wrap;">
530		<span>Smartys English Academy <i class="fa-regular fa-copyright"></i> 2026</span> <i class="fa-solid fa-circle" style="font-size: 4px;"></i> 
531		<a href="/privacypolicy" style="color: #232228 !important; padding: 0 !important;font-size: inherit !important;text-decoration: underline !important">Privacy policy</a>  <i class="fa-solid fa-circle" style="font-size: 4px;"></i> 
532		<a href="/termsofuse" style="color: #232228 !important;padding: 0 !important;font-size: inherit !important;text-decoration: underline !important">Terms of use</a> <i class="fa-solid fa-circle" style="font-size: 4px;"></i> 
533		<a href="/contactus" style="color: #232228 !important;padding: 0 !important;font-size: inherit !important;text-decoration: underline !important">Contact us</a> <i class="fa-solid fa-circle" style="font-size: 4px;"></i> 
534		<a href="/refundpolicy" style="color: #232228 !important;padding: 0 !important;font-size: inherit !important;text-decoration: underline !important">Refund policy</a>
535	</div>
536</div>
537
538
539
540
541
542		
543	
544
545
546	
547	
548
549
550
551
552<script>const customDomain = "www.smartysenglish.com";</script>
552
553
554   
555  
556
557<script>
558var disabledLocleVar='Disabled';
559var enabledLocaleVar='Enabled';
560var smsLocaleVar='SMS';
561var webpushLocaleVar='Web Push';
562var mobilepushLocaleVar='Mobile Push';
563var invoicenumberLocaleVar='Invoice Number';
564var productLocaleVar='Product';
565var dateLocaleVar='Date';
566var amountLocaleVar='Amount';
567var detailsLocaleVar='Details';
568var subscriptionPlanLocaleVar='Subscription Plan';
569var addonsLocaleVar='Add Ons';
570var showLocalVar='Show';
571var hideLocaleVar='Hide';
572</script>
572 
573<div class="spectre">
574
575	
576	
577		
578		
579		
580			
581				
581<script>
582					var isPopupLogin = true;
583					var login = '';
584					var message = '';
585					function closeLoginPopup() {
586						$("#loginFormHtml").removeClass("active");
587						$("body").removeClass("overflowYDisable");
588					}
589				</script>
589
590				
591				
592				
593					
594				
595
596				<div class="modal" id="loginFormHtml">
597					<iframe id="microfe-popup-login" src="/t/public/login" loading="lazy"
598						style="width: calc(100% + 10px); height: 100vh; border: none;"
599						onload="$(this).parent().removeClass('loading');"></iframe>
600				</div>
601			
602		
603	 
604	
605
606	<div class="modal" id="cartHtml">
607		<a href="javascript:void(0);" class="modal-overlay close"
608			aria-label="Close"></a>
609		<div class="modal-container" style="max-width: 800px;">
610			<div class="modal-header">
611				<a href="javascript:void(0);"
612					class="close btn btn-clear float-right" aria-label="Close"></a>
613				<div class="modal-title h5">
614					<i class="fa-regular fa-shopping-cart"></i>
615					Cart
616					(<span class="cartCount">0</span>
617					Items
618					)
619				</div>
620			</div>
621			<div class="modal-body" style="max-height: 70vh;">
622				<div class="content">
623
624					<div class="text-center msg loading"></div>
625					<div class="text-center msg noItems" style="display: none;">
626						There are no items in your cart<br/>
627						<a class="btn btn-primary" href="/s/store"
628							style="margin: 20px auto;">
629							Add More
630						</a>
631					</div>
632					<div class="items msg" style="display: none;">
633						<div class="m-0 cartDiv">
634							<table class="table cartTable">
635								<thead>
636									<tr>
637										<th colspan="2">Item Details</th>
638										<th class="text-right">Price</th>
639										<th style="width: 50px;"></th>
640									</tr>
641								</thead>
642								<tbody></tbody>
643							</table>
644						</div>
645						<div class="suggestCart mt-2 bg-gray p-2" style="display: none;">
646							<h6>You may also be interested in</h6>
647							<div class="columns loading" id="cartRelatedCont"></div>
648						</div>
649					</div>
650				</div>
651			</div>
652			<div class="modal-footer">
653				<div class="msg items clearfix">
654					
655						
656						
657							<div class="float-left text-gray">
658								Note: Promo Codes can be applied after checkout
659							</div>
660						
661						
662					
663					<div class="float-right">
664						Total Amount
665						<span class="text-primary curr">฿<span
666							class="totalAmount">0</span></span>
667					</div>
668				</div>
669				<div class="msg items clearfix mt-2">
670					<a class="btn float-left" href="/s/store" amplitude-event="add_more_course_checkout">
671						Add More
672					</a>
673					
674					
675						
676							
677						
678						
679					
680					<a class="btn btn-primary float-right" href="/s/checkout" amplitude-event="checkout_tapped_course_checkout" amplitude-payload='{"currency": "THB" }'>Checkout</a>
681				</div>
682			</div>
683		</div>
684	</div>
685	<div class="modal" id="newCheckoutHtml" style="padding: 0; z-index: 10000;">
686	<div id="newCheckoutLoader" class="loading loading-lg" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); z-index: 1000;display:none;"></div>
687		<!-- <a href="javascript:void(0);" class="modal-overlay close"
688			aria-label="Close"></a>
689		<div class="modal-container" style=""> -->
690		
691
692			<iframe onload="hideCheckoutLoader()" id="newCheckoutIframe" sandbox="allow-top-navigation allow-modals allow-popups allow-presentation allow-orientation-lock allow-pointer-lock allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation allow-scripts allow-same-origin allow-forms" style = "width: calc(100% + 10px); height: 100%; border: none;"  src=""></iframe>
693				
694		<!-- </div> -->
695	</div>
696</div>
697
698<script type="text/template" id="cartItemTemplate">
699		<tr data-id="<@- item.id @>" data-type="<@- item.type @>" data-title="<@- item.title @>" data-price="<@- item.price @>" data-coursecategory="<@- item.courseCategory @>">
700			<@ var itemType = item.type; @>
701			<td style="width:150px;">	
702				<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item.id +"/"+ item.id +"_scaled_cover.jpg?v=" + coverVersion; if(isNaN(coverVersion)) { curl = showCourseDefaultCover(null, item.id)   } @>
703				<img alt="<@- item.title @> cover" style="width:100%;max-height:100px;" class="img-fit-contain lazy"  onerror="showCourseDefaultCover(this, '<@- item.id @>')" 
704						data-src='<@- curl @>' />
705			</td>
706			<td class="itemTitle"><@- item.title @><@ if(item.description !== undefined) { @><div class='text-gray variantDescription'><@ print(item.description) @></div><@ } @></td>
707			<td class="text-right curr"><@ if(item.priceWithoutTax !== undefined && 'VAT' != '') { @><@ print(getDisplayAmount(item.priceWithoutTax)) @><br><small><@ print(getDisplayAmount(item.price)) @> incl. <@- item.gstRate @>% VAT</small><@ } else { @><@ print(getDisplayAmount(item.price)) @> <@ if(item.gstRate > 0 && 'VAT' != '') { print("<br><small>incl. " +item.gstRate+"% VAT</small>") } @><@ } @> 				
708			<@ if(item.pgChargesLearnerPercent !==undefined && getDisplayAmount(item.pgChargesLearnerPercent).includes('₹')) {@> <br><small>Internet handling fees: <@print(getDisplayAmount(item.pgChargesLearnerPercent/100*item.price))@></small> <@} @>
709			</td>
710			<td>
710<button class="btn btn-sm btn-error btn-action circle removeItemBtn" data-url="/s/cart/remove/<@- item.id @>"><i class="material-icons">clear</i></button></td>
711		</tr>
712	</script>
vendor: 1 bytes, line 712
712
713<script type="text/template" id="cartcoursecard-template">
714		<div class="column col-2 col-md-4 scourse <@- item['spayee:resource']['spayee:courseType'] @>" title="<@- item["spayee:resource"]["spayee:title"] @>">
715			  <a class="card" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
716				<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item["spayee:resource"]["spayee:coverVersion"]; if(isNaN(item["spayee:resource"]["spayee:coverVersion"])) { curl = showCourseDefaultCover(null, item._id)   } @>
717		              <img style="width: 100%;" alt="<@- item['spayee:resource']['spayee:title'] @> cover" class="lazy" data-src="<@- curl  @>" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
718					  <div class="card-footer" style="padding: 0.2rem;"><span class="ctitle text-ellipsis d-block" style="color:#2f4f4f;font-size:small;"><@- item["spayee:resource"]["spayee:title"] @></span></div>
719		      </a>
720		</div>
721	</script>
vendor: 1 bytes, line 721
721
722<script type="text/template" id="coursecard-template">
723		<div class="column scourse <@- item['spayee:resource']['spayee:courseType'] @> hidePackageRibbon<@- item['spayee:resource']['spayee:hidePackageRibbon'] @>">
724					
725					
726					
727					<@ var itemCategory =  (item['spayee:resource']['spayee:filter1'] !== undefined)? item['spayee:resource']['spayee:filter1'][0]:'' @>
728
729					<a class="card courseDiscId" style="height:100%" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" data-id="<@- item._id@>" data-dcid="<@-item._id@>"
730						amplitude-event="course_card_tapped_checkout"
731						amplitude-payload='{"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "package_id" : "course_id" @>": "<@- item._id @>","is_a_package":"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "true" : "false" @>","price_on_card":"<@- removeCurrencySymbol(getCourseDisplayPrice('฿', '', item, '11.0', '', false)) @>","currency":"THB","multiple_pricing_plans_exist":"<@- isMultiplePlansAvailable('', item) @>","wallet_coins_enabled_on_school":"true","category":"<@- itemCategory @>"}'
732					>
733					
734						
735					
736		              <div class="card-image relative <@ print(item["spayee:resource"]["spayee:availableForMembership"] ? 'includedInMembership' : '') @>">
737						<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id + "/" + item._id +"_scaled_cover.jpg?v=" + item["spayee:resource"]["spayee:coverVersion"]; if(isNaN(item["spayee:resource"]["spayee:coverVersion"])) { curl = showCourseDefaultCover(null, item._id);   } @>
738						<div class="blurbg lazy" data-bg="<@- curl @>"></div>
739		                <img alt="<@- item['spayee:resource']['spayee:title'] @> cover" class="lazy" data-src="<@- curl @>" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
740		              </div>
741		              <div class="card-body text-ellipsis">
742							<span class="ctitle" style="color:#2f4f4f;text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;"><@- item["spayee:resource"]["spayee:title"] @></span><br>
743
744							<@ if(item.rating !== undefined) { @>
745								<span class="text-gray ratingIcons icon-text">
746								<@ for(var i=1;i<6;i++) { @>
747									<@ if(item.rating.avgRating >= i) { @><i class="material-icons text-primary">star</i><@ }else if(item.rating.avgRating > i-1 && item.rating.avgRating < i) { @><i class="material-icons text-primary">star_half</i><@ }else { @>
748									<i class="material-icons">star_border</i>								
749								<@ } } @></span><small class="d-inline-block pl-1 text-dark"><@ print(formatRating(item['rating']['avgRating'])) @> (<@- item['rating']['total'] @> ratings)</small>
750							<@ }else { @> <span class="text-gray ratingIcons icon-text">&nbsp;</span> <@ } @>
751							<br>
752							<span class="text-gray">
753								<@ if(item['spayee:resource']['spayee:courseType'] === 'package') { @>
754									<@ print(item["courses-count"]!==undefined?item["courses-count"]:"0") @> Courses
755								<@ }else { @>
756									<@ print(item["spayee:resource"]["spayee:publisher"]!==undefined?htmlEntities(item["spayee:resource"]["spayee:publisher"]):"&nbsp;") @>
757								<@ } @>
758							</span>
759					  </div>
760		              <div class="card-footer">
761						<@ print(getCourseDisplayPrice('฿', '', item, '11.0', '', true)) @>
762						<span class="text-gray" style="font-size:small">
763							<@ if(item['spayee:resource']['spayee:instalmentPlanId']!=null && item['spayee:resource']['spayee:instalmentPlanId'] !== "") { @>
764								<@ print(getCourseInstalmentDisplayPrice('', item))@>
765								<@ }else { @>
766								<@ "&nbsp;" @>
767							<@ } @>
768						</span>
769		              </div>
770					<div style="padding: 0 0.8rem 0.8rem 0.8rem;">
771						<span class="text-gray" style="font-size:small">
772							<@ if(getMultiplePlanLabel('', item)>1) {@>
773							<i class="material-icons text-primary" style="font-size:small">discount</i>
774							<@ print(' Flexible pricing plans') } @>
775						</span>
776					</div>
777		            </a>
778		</div>
779	</script>
779
780
781<script type="text/template" id="blogcard-template">
782		<div class="column col-3 col-md-6 col-sm-6 col-xs-12 scourse" style="margin-bottom: 20px;">
783					<a class="card" title="<@- item['spayee:resource']['spayee:title'] @>" href="/blog/<@- item['spayee:resource']['spayee:url'] @>">
784		              <div class="card-image relative">
785						<@ if(item['spayee:resource']['spayee:cover'] !== undefined && item['spayee:resource']['spayee:cover']) { @>
786							<div class="blurbg lazy" data-bg="https://d502jbuhuh9wk.cloudfront.net/articles/<@- item._id @>/cover.jpg<@ print(item["spayee:resource"]["spayee:coverVersion"] !== undefined?"?v="+item["spayee:resource"]["spayee:coverVersion"]:"") @>"></div>
787							<img alt="<@- item['spayee:resource']['spayee:title'] @> cover" class="img-responsive centered relative lazy" style="max-height: 100%;" data-src="https://d502jbuhuh9wk.cloudfront.net/articles/<@- item._id @>/cover.jpg?v=<@- item['spayee:resource']['spayee:coverVersion'] @>" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
788						<@ }else { @>
789							<div class="blurbg lazy" data-bg="https://d502jbuhuh9wk.cloudfront.net/resources/images/defaultCourseCover.png"></div>
790							<img alt="<@- item['spayee:resource']['spayee:title'] @> cover" class="img-responsive centered relative lazy" style="max-height: 100%;" data-src='https://d502jbuhuh9wk.cloudfront.net/resources/images/defaultCourseCover.png'>
791						<@ } @>
792		              </div>
793		              <div class="card-body text-ellipsis"><span style="color:#2f4f4f;"><@- item["spayee:resource"]["spayee:title"] @></span></div>
794		              <div class="card-footer" style="padding: 0.4rem;">
795						<span class="text-gray float-left text-ellipsis" style="max-width: calc(100% - 110px);"><@ print(item["spayee:resource"]["spayee:author"]!==undefined?htmlEntities(item["spayee:resource"]["spayee:author"]):"") @></span>
796						<@ var pdate = item.createdDate.$date; if(item['spayee:resource']['spayee:publishDate'] !== undefined && item['spayee:resource']['spayee:publishDate'] !== '') { pdate = item['spayee:resource']['spayee:publishDate']; } @>
797						<time class="float-right text-warning"><@ print(formatDate(new Date(pdate))) @></time>
798		              </div>
799		            </a>
800		</div>
801	</script>
801
802	
803	
803<script type="text/javascript">
804	  var uuid = function (a) {
805		  // https://github.com/amplitude/Amplitude-Javascript/blob/master/src/uuid.js
806		  return a // if the placeholder was passed, return
807		    ? // a random number from 0 to 15
808		      (
809		        a ^ // unless b is 8,
810		        ((Math.random() * // in which case
811		          16) >> // a random number from
812		          (a / 4))
813		      ) // 8 to 11
814		        .toString(16) // in hexadecimal
815		    : // or otherwise a concatenated string:
816		      (
817		        [1e7] + // 10000000 +
818		        -1e3 + // -1000 +
819		        -4e3 + // -4000 +
820		        -8e3 + // -80000000 +
821		        -1e11
822		      ) // -100000000000,
823		        .replace(
824		          // replacing
825		          /[018]/g, // zeroes, ones, and eights with
826		          uuid, // random hex digits
827		        );
828	  };
829		
830	  (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
831	  ;r.type="text/javascript"
832	  ;r.integrity="sha384-tzcaaCH5+KXD4sGaDozev6oElQhsVfbJvdi3//c2YvbY02LrNlbpGdt3Wq4rWonS"
833	  ;r.crossOrigin="anonymous";r.async=true
834	  ;r.src="https://cdn.amplitude.com/libs/amplitude-8.5.0-min.gz.js"
835	  ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
836	  console.log("[Amplitude] Error: could not load SDK")}}
837	  ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
838	  ;function s(e,t){e.prototype[t]=function(){
839	  this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
840	  var o=function(){this._q=[];return this}
841	  ;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"]
842	  ;for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;var u=function(){this._q=[]
843	  ;return this}
844	  ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
845	  ;for(var p=0;p<l.length;p++){s(u,l[p])}n.Revenue=u
846	  ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
847	  ;function v(e){function t(t){e[t]=function(){
848	  e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
849	  for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
850	  e=(!e||e.length===0?"$default_instance":e).toLowerCase()
851	  ;if(!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e])
852	  }return n._iq[e]};e.amplitude=n})(window,document);
853	
854	  amplitude.getInstance().init('e56929a4c3888c23e97a7e70e34ccf6c');
855	  amplitude.getInstance().setUserId(null);
856	  //amplitude.getInstance().regenerateDeviceId();
857
858    var userProperties = {
859			custom_domain: "www.smartysenglish.com",
860			org_id: "636a2a65e4b0641b33686328",
861			default_google_login_enabled: 'true' == 'true',
862			personalized_google_login_enabled: '' != '' && 'true' == 'false' ? true : false,
863			facebook_login_enabled: '' == 'true' ? true : false
864	  };
865	  amplitude.getInstance().setUserProperties(userProperties);
866    
867/*     var deviceId = uuid();
868	  amplitude.getInstance().setDeviceId(deviceId);
869	  sessionStorage.setItem('amplitudeDeviceId', deviceId); */
870	</script>
870
871	
872	
872<script type="text/javascript">
873		window.signupParams = {source: "store", platform: "web", sourceId: null};
874		var showGraphyFomoFlag = '';
875		
876			showGraphyFomoFlag = '636a2a65e4b0641b33686328';
877		
878	</script>
878
879
880	
880<script type="text/javascript">
881		function hideCheckoutLoader() {
882			if(typeof window.hideLoader =="function") {
883				window.hideLoader();
884			}
885		}
886		var checkoutRedirectGuestUsers = 'signup';
887	</script>
887
888
889
890
891
892
893
894<script type="text/template" id="spcoursecard-2-template">
895		<div class="column third">
896			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
897			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
898			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
899			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
900			<h4 class="size-21 text-ellipsis" style="text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"><@- item['spayee:resource']['spayee:title'] @></h4>
901			<p class="size-16"><@ if(item.rating !== undefined) { @>
902								<span class="text-gray ratingIcons icon-text">
903								<@ for(var i=1;i<6;i++) { @>
904									<@ if(item.rating.avgRating >= i) { @><i class="material-icons text-primary">star</i><@ }else if(item.rating.avgRating > i-1 && item.rating.avgRating < i) { @><i class="material-icons text-primary">star_half</i><@ }else { @>
905									<i class="material-icons">star_border</i>								
906								<@ } } @></span><span><@ print(formatRating(item['rating']['avgRating'])) @> (<@- item['rating']['total'] @> ratings)</span>
907			<@ }else { @> <span class="text-gray ratingIcons icon-text">&nbsp;</span> <@ } @></p>
908			<p class="size-16 text-ellipsis"><@ if(item['spayee:resource']['spayee:courseType'] === 'package') { @><@ print(item["courses-count"]!==undefined?item["courses-count"]:"0") @> Courses<@ }else { @>
909				<@ print(item["spayee:resource"]["spayee:publisher"]!==undefined?item["spayee:resource"]["spayee:publisher"]:"&nbsp;") @><@ } @></p>
910			
911			<p class="size-18"><span style="color: rgb(21, 101, 192);"><@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', true)) @></span><br></p>
912			<div style="margin:1em 0"></div>
913			</a>
914		</div>
915	</script>
vendor: 1 bytes, line 915
915
916<script type="text/template" id="spcoursecard-1-template">
917		<div class="column third">
918			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
919			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
920			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
921			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')">
922			<h4 class="size-21 text-ellipsis" style="text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"><@- item['spayee:resource']['spayee:title'] @></h4>
923			<div class="size-16 text-ellipsis" style="max-height: 3rem;"><@ print(item['spayee:resource']['spayee:shortDescription']!==undefined?item['spayee:resource']['spayee:shortDescription']:"") @></div>
924
925			<p class="size-18"><span style="color: rgb(21, 101, 192);"><@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', true)) @></span><br></p>
926			<div style="margin:1em 0"></div>
927			</a>
928		</div>
929	</script>
vendor: 1 bytes, line 929
929
930<script type="text/template" id="spcoursecard-3-template">
931		<div class="column third">
932			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
933			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
934			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
935			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')">
936			<h4 class="size-21 text-ellipsis" style="text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"><@- item['spayee:resource']['spayee:title'] @></h4>
937			<div class="size-16 text-ellipsis" style="max-height: 3rem;"><@ print(item['spayee:resource']['spayee:shortDescription']!==undefined?item['spayee:resource']['spayee:shortDescription']:"") @></div>
938			<p class="size-16 text-ellipsis"><@ if(item['spayee:resource']['spayee:courseType'] === 'package') { @><@ print(item["courses-count"]!==undefined?item["courses-count"]:"0") @> Courses<@ }else { @>
939				<@ print(item["spayee:resource"]["spayee:publisher"]!==undefined?item["spayee:resource"]["spayee:publisher"]:"&nbsp;") @><@ } @></p>
940			<p class="size-18"><span style="color: rgb(21, 101, 192);"><@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', true)) @></span><br></p>
941			<div style="margin:1em 0"></div>
942			</a>
943		</div>
944	</script>
944
945	
946<script type="text/template" id="spcoursecard-4-template">
947		<div class="column third text-center" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 0px;">
948			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
949			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
950			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
951			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')">
952			</a>
953			<h3 class="size-18 text-center" style="text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"><b class="text-primary"><@- item['spayee:resource']['spayee:title'] @></b></h3>
954			<div class="discription"><@ print(item['spayee:resource']['spayee:shortDescription']!==undefined?item['spayee:resource']['spayee:shortDescription']:"") @></div>
955			<p class="size-18 price text-primary"><@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', true)) @></p>
956			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" class="buy-btn btn btn-primary" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}'>Buy now<br></a>
957		</div>
958	</script>
958	
959<script type="text/template" id="spcoursecard-5-template">
960		<div class="column third" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 0px;">
961			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
962			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>			
963			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
964			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')">
965			</a>
966			<h3 class="sub-heading"><b class="size-18 text-primary"><@- item['spayee:resource']['spayee:title'] @></b></h4>
967			<p class="size-16 description text-primary"> <@ if(item['spayee:resource']['spayee:courseType'] === 'package') { @><@ print(item["courses-count"]!==undefined?item["courses-count"]:"0") @> Courses<@ }else { @>
968				Instructor : <@ print(item["spayee:resource"]["spayee:publisher"]!==undefined?item["spayee:resource"]["spayee:publisher"]:"&nbsp;") @><@ } @></p>
969			<@if(item.rating){@>
970				<p class="size-16 description text-primary">Rating: &nbsp;
971 					<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
972						<@if(item.rating){@> 
973							<@if(item.rating.avgRating){@> 
974								<@ if(item.rating.avgRating >= ratingsSize) {@> 
975									<i class="icon ion-android-star text-primary"></i>&nbsp; 
976								<@ } else if(item.rating.avgRating > ratingsSize-1 && item.rating.avgRating < ratingsSize) { @> 
977									<i class="icon ion-android-star-half text-primary"></i>&nbsp; 
978								<@ } @>
979							<@}@>		
980		  				<@}@>
981					<@}@>
982				</p>
983			<@}@>
984		
985			<p class="size-18 price text-primary">Price : <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', true)) @></p>
986			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" class="buy-btn btn btn-primary" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}'>Buy now</a>
987		</div>
988	</script>
988
989	
990<script type="text/template" id="spcoursecard-6-template">
991		<div class="column third">
992			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
993			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
994				
995				
996				<@  var itemCategory =  (item['spayee:resource']['spayee:filter1'] !== undefined)? item['spayee:resource']['spayee:filter1'][0]:''@>
997				
998				<@ if (item['spayee:resource']['spayee:availableForMarket']==="true" ) { @> 
999				   <a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="course_card_tapped_checkout" amplitude-payload='{"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "package_id" : "course_id" @>": "<@- item._id @>","is_a_package":"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "true" : "false" @>","price_on_card":"<@- removeCurrencySymbol(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>","currency":"THB","multiple_pricing_plans_exist":"<@- isMultiplePlansAvailable(sessionCountry, item) @>","wallet_coins_enabled_on_school":"<@- true @>","category":"<@- itemCategory @>"}'>
1000				<@ } else { @>
1001 				   <a title="<@- item['spayee:resource']['spayee:title'] @>" amplitude-event="course_card_tapped_checkout" amplitude-payload='{"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "package_id" : "course_id" @>": "<@- item._id @>","is_a_package":"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "true" : "false" @>","price_on_card":"<@- removeCurrencySymbol(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>","currency":"THB","multiple_pricing_plans_exist":"<@- isMultiplePlansAvailable(sessionCountry, item) @>","wallet_coins_enabled_on_school":"<@- true @>","category":"<@- itemCategory @>"}'>  
1002                <@ } @>
1003			
1004			
1005			<img class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')" style="border-radius: 20px; margin-bottom: 0px; width: 100%; height: 190px;object-fit:cover;">
1006			</a>
1007			<div style="font-weight: 800; line-height: 1.1; text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;" class="text-ellipsis"><@- item['spayee:resource']['spayee:title'] @></div>
1008			<p class="size-16 description text-primary"><@ if(item['spayee:resource']['spayee:courseType'] === 'package') { @> Courses<@ } @></p>
1009			<p class="size-18 price text-primary"><@ if (item['spayee:resource']['spayee:availableForMarket']==="true" ) @> <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @></p>
1010			<@ if (item.isMembershipPage != undefined && !item.isMembershipPage) { @>
1011            
1012				
1013					<@ var itemCategory =  (item['spayee:resource']['spayee:filter1'] !== undefined)? item['spayee:resource']['spayee:filter1'][0]:'' @>
1014					<@ if(isMultiplePlansAvailable(sessionCountry, item) === false) { @>
1015						<a title="<@- item['spayee:resource']['spayee:title'] @>" href="/single-checkout/<@- item['_id'] @>?pid=<@ print(getCoursePid(sessionCountry, item)) @>" class="buy-btn btn btn-primary" amplitude-event="course_buy_now_tapped_checkout" amplitude-payload='{"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "package_id" : "course_id" @>": "<@- item._id @>","is_a_package":"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "true" : "false" @>","price_on_card":"<@- removeCurrencySymbol(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>","currency":"THB","multiple_pricing_plans_exist":"<@- isMultiplePlansAvailable(sessionCountry, item) @>","wallet_coins_enabled_on_school":"<@- true @>","category":"<@- itemCategory @>"}' style="border: none;padding: 16px 61px; font-size: 16px; letter-spacing: 0.08px; line-height: 16px; font-weight: 600; text-decoration: none; display: block; text-align: center;">
1016							Buy now
1017						</a>
1018					<@ } else { @>
1019
1020						<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" class="buy-btn btn btn-primary" amplitude-event="course_buy_now_tapped_checkout" amplitude-payload='{"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "package_id" : "course_id" @>": "<@- item._id @>","is_a_package":"<@-  item['spayee:resource']['spayee:courseType']== 'package' ? "true" : "false" @>","price_on_card":"<@- removeCurrencySymbol(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>","currency":"THB","multiple_pricing_plans_exist":"<@- isMultiplePlansAvailable(sessionCountry, item) @>","wallet_coins_enabled_on_school":"<@- true @>","category":"<@- itemCategory @>"}' style="border: none;padding: 16px 61px; font-size: 16px; letter-spacing: 0.08px; line-height: 16px; font-weight: 600; text-decoration: none; display: block; text-align: center;">
1021							Buy now
1022						</a>
1023					<@ } @>
1024				
1025				
1026			
1027			<@ } @>
1028		</div>
1029	</script>
1029			
1030	
1031	
1032<script type="text/template" id="spcoursecard-7-template">
1033		<div class="column third course-mob-block">
1034			<div class="inner-course-block">
1035			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
1036			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>			
1037			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>"  amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none;">
1038			<img class="lazy" data-style="width: 100%; height: auto;" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')" >
1039			</a>
1040			<div class="course-price-block">
1041			<p class="text-ellipsis" title="<@- item['spayee:resource']['spayee:title'] @>" style="font-size: 18px; font-weight: 700; line-height: 1.3rem; width: 100%; margin-top: 0px; margin-bottom: 0px; min-height: 47px; text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
1042				<@- item['spayee:resource']['spayee:title'] @>
1043			</p>
1044			<p class="text-primary" style="word-break: break-all; font-size: 14px; font-weight: 500; line-height: 1.5; margin-top: 16px; margin-bottom: 0px;">
1045					<@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1046			</p>
1047			</div>
1048			<a title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" class="buy-btn btn btn-primary" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border: none; cursor: pointer; border-radius: 4px; padding: 13px 28px; line-height: 1.5; font-weight: 600; font-size: 14px; letter-spacing: 0.15px; margin-top: 28px;">
1049				Enroll now
1050			</a>
1051			</div>
1052		</div>
1053</script>
1053		
1054	
1055<script type="text/template" id="spcoursecard-8-template">
1056	 <div class="row clearfix" style="margin-bottom: 24px; margin-top: 14px;">
1057			<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id);   } @>
1058			<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
1059                    <div class="column third center" style="padding-left: 0px; padding-right: 0px;">
1060                        <img
1061                            class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover"  onerror="showCourseDefaultCover(this, '<@- item._id @>')"
1062                            style="margin-top: 0px; margin-bottom: 0px;"
1063                        />
1064                    </div>
1065                    <div class="column two-third course-block-mob" style="display: flex; flex-direction: column; justify-content: center;">
1066                        <div class="course-price-block">	
1067							<h3 style="color: rgb(255, 255, 255); font-size: 18px; font-weight: 700; line-height: 1.1; margin-bottom: 0px; margin-top: 0px; text-wrap: balance;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
1068								<@- item['spayee:resource']['spayee:title'] @>
1069							</h3>
1070                        	<div class="sortDescription8">
1071                            	<@ print(item['spayee:resource']['spayee:shortDescription']!==undefined?item['spayee:resource']['spayee:shortDescription']:"") @>
1072                        	</div>
1073						</div>
1074
1075                        <a class="buy-btn btn btn-primary" title="<@- item['spayee:resource']['spayee:title'] @>" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" style="width: fit-content; text-align: left; display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; cursor: pointer; background-color: rgb(231, 215, 73); color: rgb(0, 0, 0);border-radius: 0px;padding: 16px 48px;line-height: 16px;font-weight: 700;font-size: 16px;letter-spacing: 0.08px;border-image: initial;">
1076                            Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1077                        </a>
1078					</div>
1079        </div>
1080	</script>
1080	
1081
1082
1083	<!-- vegas TEMPLATE 9 NEW-->
1084	
1084<script type="text/template" id="spcoursecard-9-template" >
1085    <div class="column third text-center course-card-fixed-height" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 2rem; text-align:left;">
1086        <div style="border:1px solid #D7D7D7; border-radius:24px; padding-bottom: 20px; height: 100%; display: flex; flex-direction: column;">
1087            <@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id); } @>
1088            <@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
1089            
1090            <a style="color:black; text-align:left;" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}'>
1091                <img style="height:200px; width:100%; object-fit:fill; margin:0px 0px; border-top-left-radius:24px; border-top-right-radius:24px;" class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
1092            </a>
1093            
1094			<div style="padding:10px 20px; flex-grow: 1; display: flex; flex-direction: column;" class="course-card-content">
1095				<h3 
1096					class="size-18 text-left" 
1097					title="<@- item['spayee:resource']['spayee:title'] @>" 
1098					style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; margin-bottom: 12px; color: black;"
1099				>
1100					<b style="color:black;"><@- item['spayee:resource']['spayee:title'] @></b>
1101				</h3>
1102			
1103				<div 
1104					class="size-16 text-ellipsis course-card-text" 
1105					title="<@= (item['spayee:resource']['spayee:shortDescription'] || ' ').replace(/<[^>]*>/g, '') @>" 
1106					style="max-height: 3rem; min-height: 3rem; margin-bottom: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;"
1107				>
1108				<@= (item['spayee:resource']['spayee:shortDescription'] || '').replace(/<[^>]*>/g, '') @>
1109				</div>
1110			</div>
1111			
1112                <div style="margin-top: auto; margin-left:10px;">
1113                    <a style="background-color:#FB5607 !important; border:0px !important; border-radius:62px !important; padding:10px 16px !important; width: fit-content; display: inline-block; text-decoration: none; color: white; padding: 12px 24px; font-weight: 600 !important; font-size: 16px;letter-spacing:0px; !important" 
1114                       class="buy-btn btn btn-primary" 
1115                       title="<@- item['spayee:resource']['spayee:title'] @>" 
1116                       amplitude-event="buy_now_tapped_course_checkout" 
1117                       amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' 
1118                       href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1119                        Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1120                    </a>
1121                </div>
1122            </div>
1123        </div>
1124    </div>
1125</script>
1125
1126
1127			<!--Blaze Course nEW tEMPLATE 10-->
1128			
1128<script type="text/template" id="spcoursecard-10-template">
1129							<div class="column third text-center course-card-fixed-height" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 10px;margin-top:10px; text-align:left;">
1130								<div style="height: 100%; display: flex; flex-direction: column;">
1131									<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id); } @>
1132									<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
1133									
1134									<a style="color:black; text-align:left;" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' style="text-decoration: none; color:black; font-size:24px;">
1135										<img style="height:320px;  object-fit:cover; margin:0px 0px;" class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
1136									</a>
1137									
1138									<div style=" flex-grow: 1; display: flex; flex-direction: column;" class="course-card-content">
1139										<h3 
1140			    class="size-18 text-left" 
1141			    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; margin-bottom: 12px; color: white;"
1142			>
1143			    <b title="<@= item['spayee:resource']['spayee:title'] @>" style="color:white;">
1144			        <@- item['spayee:resource']['spayee:title'] @>
1145			    </b>
1146			</h3>
1147										
1148										<div title="<@= (item['spayee:resource']['spayee:shortDescription'] || ' ').replace(/<[^>]*>/g, '') @>" class="size-16 text-ellipsis course-card-text" style="max-height: 3rem; min-height: 3rem; margin-bottom: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;color:white;">
1149											<@= (item['spayee:resource']['spayee:shortDescription'] || '').replace(/<[^>]*>/g, '') @>
1150										</div>
1151										
1152										<div style="margin-top: auto;">
1153											<a style="width:100% !important;font-weight:600 !important; letter-spacing:0px; color:black !important; background-color:#D8FD46 !important; border:0px !important; border-radius:0px !important; padding:20px 36px !important; width: fit-content; display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; cursor: pointer; padding: 16px 28px; line-height: 16px; font-weight: 700; font-size: 16px; letter-spacing: 0px; border-image: initial;" 
1154											class="buy-btn btn btn-primary" 
1155											title="<@- item['spayee:resource']['spayee:title'] @>" 
1156											amplitude-event="buy_now_tapped_course_checkout" 
1157											amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' 
1158											href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1159											 Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1160										 </a>
1161			
1162										</div>
1163									</div>
1164								</div>
1165							</div>
1166						</script>
1166
1167			
1168			<!--Olive Course 11-->
1169			
1169<script type="text/template" id="spcoursecard-11-template" >
1170				<@ 
1171				// Calculate colors based on index
1172				var colorIndex = (typeof window.courseCardColorIndex === 'undefined') ? 0 : window.courseCardColorIndex;
1173				var colors = [
1174					{ bg: '#FFA46B', btnBg: '#361500' },  // Orange card → Dark brown button
1175					{ bg: '#87A1F6', btnBg: '#001A71' },  // Blue card → Dark blue button
1176					{ bg: '#B073DC', btnBg: '#34005A' }  // Purple card → Dark brown button (default)
1177				];
1178				var currentColor = colors[colorIndex % 3];
1179				window.courseCardColorIndex = colorIndex + 1;
1180				@>
1181				
1182				<div class="column third text-center course-card course-card-fixed-height" style="padding: 0 15px; margin-bottom: 30px;">
1183					<div class="course-card-wrapper" style="background-color: <@- currentColor.bg @>; height: 100%; border-radius: 32px; overflow: hidden;">
1184						<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; 
1185						if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id); } @>
1186						
1187						<a class="course-image-link" style="display: block; padding: 16px;padding-bottom:0px" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1188							<img style="height:320px; width:100%; object-fit:cover; border-radius: 32px;" class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
1189						</a>
1190						
1191						<div style="padding: 20px;" class="course-card-content">
1192							<h3 style="font-size:24px; text-transform:uppercase; color: black; margin: 0 0 15px 0; text-align: left;white-space:nowrap; overflow: hidden; text-overflow: ellipsis;width: 100%;display:block;">
1193								<b title="<@= item['spayee:resource']['spayee:title'] @>"><@- item['spayee:resource']['spayee:title'] @></b>
1194							</h3>
1195							<div title="<@= (item['spayee:resource']['spayee:shortDescription'] || ' ').replace(/<[^>]*>/g, '') @>" class="size-16 text-ellipsis course-card-text" style="max-height: 3rem; min-height: 3rem; color:black; margin-bottom: 12px;text-align: left;">
1196								<@ print(item['spayee:resource']['spayee:shortDescription']!==undefined?item['spayee:resource']['spayee:shortDescription']:"&nbsp;") @>
1197							</div>
1198							<a class="enroll-button" 
1199							   style="display: block; 
1200									  background-color: <@- currentColor.btnBg @>; 
1201									  color: white !important; 
1202									  padding: 12px; 
1203									  text-align: center; 
1204									  font-weight: 600; 
1205									  text-decoration: none;
1206									  border-radius: 32px;"
1207							   href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1208								Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1209							</a>
1210						</div>
1211					</div>
1212				</div>
1213				
1214			</script>
1214
1215			
1216
1217			<!-- Nebula Course 12-->
1218			
1218<script type="text/template" id="spcoursecard-12-template" >
1219				<div class="column third text-center course-card-fixed-height" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 2rem; text-align:left;">
1220					<div style="border:0px; border-radius:16px; padding-bottom: 20px; height: 100%; display: flex; flex-direction: column;">
1221						<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id); } @>
1222						<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
1223						
1224						<a style="color:black; text-align:left;" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}'>
1225							<img style="height:240px; width:100%; object-fit:fill; margin:0px 0px; border-radius:16px; " class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
1226						</a>
1227						
1228						<div style="padding:10px 0px; flex-grow: 1; display: flex; flex-direction: column;" class="course-card-content">
1229							<h3 
1230								class="size-18 text-left" 
1231								title="<@- item['spayee:resource']['spayee:title'] @>" 
1232								style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; margin-bottom: 12px; color: black;"
1233							>
1234								<b style="color:black;"><@- item['spayee:resource']['spayee:title'] @></b>
1235							</h3>
1236						
1237							<div 
1238								class="size-16 text-ellipsis course-card-text" 
1239								title="<@= (item['spayee:resource']['spayee:shortDescription'] || ' ').replace(/<[^>]*>/g, '') @>" 
1240								style="max-height: 3rem; min-height: 3rem; margin-bottom: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;"
1241							>
1242							<@= (item['spayee:resource']['spayee:shortDescription'] || '').replace(/<[^>]*>/g, '') @>
1243							</div>
1244						</div>
1245							
1246							<div style="margin-top: auto; margin-left:0px;">
1247								<a style="background-color:#6715FF !important;  border-radius:12px !important; padding:10px 16px !important; width: fit-content; display: inline-block; text-decoration: none; color: white; padding: 12px 24px; font-weight: 600 !important; font-size: 16px;letter-spacing:0px; !important" 
1248								   class="buy-btn btn btn-primary" 
1249								   title="<@- item['spayee:resource']['spayee:title'] @>" 
1250								   amplitude-event="buy_now_tapped_course_checkout" 
1251								   amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' 
1252								   href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1253									Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1254								</a>
1255							</div>
1256						</div>
1257					</div>
1258				</div>
1259			</script>
1259
1260
1261
1262
1263		<!--Dusk Course-13-->
1264		
1264<script type="text/template" id="spcoursecard-13-template" >
1265			<div class="column third text-center course-card-fixed-height" style="padding-left: 1rem; padding-right: 1rem; margin-bottom: 2rem; text-align:left;">
1266				<div style="border:0px; border-radius:16px; padding-bottom: 20px; height: 100%; display: flex; flex-direction: column;">
1267					<@ var curl = "https://d502jbuhuh9wk.cloudfront.net/courses/"+ item._id +"/"+ item._id +"_scaled_cover.jpg?v=" + item['spayee:resource']['spayee:coverVersion']; if(isNaN(item['spayee:resource']['spayee:coverVersion'])) { curl = showCourseDefaultCover(null, item._id); } @>
1268					<@ var planName = getCoursePlanName(sessionCountry, item), price = getCoursePrice(sessionCountry, item, '11.0', ''), isPackage = item['spayee:resource']['spayee.courseType'] == 'package', courseId = isPackage ? '' : item._id, packageId = isPackage ? item._id : ''; @>
1269					
1270					<a style="color:black; text-align:left;" title="<@- item['spayee:resource']['spayee:title'] @>" href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>" amplitude-event="buy_now_tapped_course_checkout" amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}'>
1271						<img style="height:240px; width:100%; object-fit:fill; margin:0px 0px; border-radius:16px; " class="lazy" data-src="<@- curl @>" alt="<@- item['spayee:resource']['spayee:title'] @> cover" onerror="showCourseDefaultCover(this, '<@- item._id @>')">
1272					</a>
1273					
1274					<div style="padding:10px 0px; flex-grow: 1; display: flex; flex-direction: column;" class="course-card-content">
1275						<h3 
1276							class="size-18 text-left" 
1277							title="<@- item['spayee:resource']['spayee:title'] @>" 
1278							style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; margin-bottom: 12px; color: black;"
1279						>
1280							<b style="color:black;"><@- item['spayee:resource']['spayee:title'] @></b>
1281						</h3>
1282					
1283						<div 
1284							class="size-16 text-ellipsis course-card-text" 
1285							title="<@= (item['spayee:resource']['spayee:shortDescription'] || ' ').replace(/<[^>]*>/g, '') @>" 
1286							style="max-height: 3rem; min-height: 3rem; margin-bottom: 12px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;"
1287						>
1288						<@= (item['spayee:resource']['spayee:shortDescription'] || '').replace(/<[^>]*>/g, '') @>
1289						</div>
1290					</div>
1291					
1292				   
1293						
1294						<div style="margin-top: auto; margin-left:0px;">
1295							<a style="background-color:#282400 !important;border:0px ;  border-radius:41px !important; padding:10px 24px !important; width: fit-content; display: inline-block; text-decoration: none; color: white; padding: 12px 24px; font-weight: 600 !important; font-size: 16px;letter-spacing:0px; !important" 
1296							   class="buy-btn btn btn-primary" 
1297							   title="<@- item['spayee:resource']['spayee:title'] @>" 
1298							   amplitude-event="buy_now_tapped_course_checkout" 
1299							   amplitude-payload='{"plan_name": "<@- planName @>", "price": <@- price @>, "currency": "THB", "course_id": "<@- courseId @>", "is_package": <@- isPackage @>, "package_id": "<@- packageId @>"}' 
1300							   href="<@ print(getCourseLandingPageUrl(item._id, item['spayee:resource']['spayee:courseUrl'])) @>">
1301								Enroll for <@ print(getCourseDisplayPrice('฿', sessionCountry, item, '11.0', '', false)) @>
1302							</a>
1303						</div>
1304					</div>
1305				</div>
1306			</div>
1307		</script>
1307
1308			
1309			
1310
1311
1312
1313
1314
1315
1316
1317<!-- Curriculum 1st Template -->
1318<script type="text/template" id="coursecurr-1-template">
1319       <table class="table courseContents">
1320        <thead>
1321            <tr>
1322                <td style="width: 50px;"></td>
1323                <td style="width: 50px;"></td>
1324                <td></td>
1325            </tr>
1326        </thead>
1327        <tbody>
1328            <@ $.each(item, function(index, value) { @>
1329            <tr>
1330                <td><i class="material-icons courseItemIcon" data-type="<@- value.type @>"></i></td>
1331                <td colspan="2">
1332                    <@- value.title @> 
1333					<@ if(value.type == 'aiheading') { @>
1334						<small>(coming soon)</small><@ } @>
1335					<@ if(assetInfo && value.type == 'video' && value.duration !== undefined && value.duration > 0) { @>
1336						<small>(<@ print(Math.floor(value.duration)) @>:00)</small><@ } @>
1337					<@ if(assetInfo && value.type == 'pdf' && value.pages !== undefined && value.pages > 0) { @>
1338						<small>(<@- value.pages @> pages)</small>
1339					<@ } @>
1340                </td>
1341            </tr>
1342            <@ if(value.items != undefined) { @> <@ $.each(value['items'], function(index1, value1) { @>
1343            <tr>
1344                <td></td>
1345                <td><i class="material-icons courseItemIcon" data-type="<@- value1.type @>"></i></td>
1346                <td>
1347                    <@- value1.title @>
1348					<@ if(assetInfo && value.type == 'video' && value1.duration !== undefined && value1.duration > 0) { @><small>(<@ print(Math.floor(value1.duration)) @>:00)</small><@ } @>
1349					<@ if(assetInfo && value1.type =='pdf' && value1.pages !== undefined && value1.pages > 0) { @><small>(<@- value1.pages @> pages)</small><@ } @>
1350					<@ if(value1.type =='aiheading') { @><small>(coming soon)</small><@ } @>
1351                </td>
1352            </tr>
1353            <@ }); @> <@ } @> <@ }); @>
1354        </tbody>
1355    </table>
1356</script>
1356
1357
1358
1359<!-- Curriculum 2nd Template -->
1360<script type="text/template" id="coursecurr-2-template">
1361    <div class="column full curriculum2"  spellcheck="false">
1362      <div class="course-content1" >
1363    	<p style="font-size: 15px; font-weight: 400; margin-top: 0px;">
1364    		<@if(summary.modules && summary.modules>0){@>
1365    			<@print(summary.modules)@> Modules &nbsp;<i class="icon ion-android-folder-open"></i>&nbsp; &nbsp; <@if(summary.sessions && summary.sessions>0 && curriculumAssetInfo){@>|<@}@>&nbsp; &nbsp;
1366    		<@}@>
1367    		<@if(summary.sessions && summary.sessions>0 && curriculumAssetInfo){@>
1368    			<@print(summary.sessions)@> Sessions <i class="icon ion-android-laptop"></i>&nbsp; &nbsp; <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>|<@}@>&nbsp; &nbsp;
1369    		<@}@>
1370    		<@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
1371    			<@print(millisecondsToHHMMSSStr(summary.durations))@> Total Time&nbsp;&nbsp;<i class="icon ion-ios-clock-outline"></i>
1372    		<@}@>
1373    	</p>
1374      </div>
1375
1376
1377    	<@ $.each(item, function(index, value) { @>
1378    	<div class="course-course-content-box" >
1379    		<div class="course-content-blue-title <@if(value && value.contents){@> bg-primary <@}else if($('#'+id).closest('div.is-section').hasClass("is-bg-grey")){@>bg-white<@}else{@>is-bg-grey<@}@>" >
1380              <span class="title-icon">
1381    			<span class="material-icons <@if(value && !value.contents){@> text-primary <@}@>"><@ print(getCourseAssetIcon(value.type))@></span>
1382    		  </span>
1383    			<div class="titl5b" >
1384    				<h3 class="<@if(value && !value.contents){@> text-primary <@}@>">
1385    					<@print(value.title)@> <@ if(curriculumAssetInfo && value.type == 'pdf' && value.pages !== undefined && value.pages > 0) { @><small>(<@- value.pages @> pages)</small><@ } @>
1386    					<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
1387    							<a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,"-"))@>-<@- courseId @>#<@print(value.id)@>" class="previewBtn"><span class="<@if(value && !value.contents){@> text-primary <@}@>">Preview</span></a>
1388    					<@}@>
1389    				</h3>
1390    		  		<p class="<@if(value && !value.contents){@> text-primary <@}@>"><@if(value && value.contents && curriculumAssetInfo){@>
1391    						Sessions: <@print(value.contents)@>
1392    					<@}@>
1393    					<@if(value.moduleDurations && curriculumAssetInfo){@><@if(value && value.contents){@>|<@}@>
1394    						Time: <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1395    					<@}@>
1396    				<@if(value && value.contents>0){@><span class="material-icons">expand_more</span><@}@>  </p>
1397    			</div>
1398    		</div>
1399    <@if(value && value.items){@>
1400    	<@ $.each(value['items'], function(index1, value1) { @>
1401    		<div class="course-content-body <@if(index==0){@>showing<@ }@>" >
1402    				<div class="desc1 " >
1403    				<div class="is-box-9" >
1404    					<div class="boxa1" >
1405    						<span class="material-icons text-primary"><@ print(getCourseAssetIcon(value1.type))@></span>
1406    						<p> <@print(value1.title)@> <@ if(curriculumAssetInfo && value1.type == 'pdf' && value1.pages !== undefined && value1.pages > 0) { @><small>(<@- value1.pages @> pages)</small><@ } @>
1407							<@ if(value1.type == 'aiheading') { @><small>(coming soon)</small><@ } @>
1408							</p>
1409		
1410    					</div>
1411    				</div>
1412    				<div class="is-box-1" >
1413    					<div class="boxa2" >
1414    						<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
1415    								<a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,"-"))@>#<@print(value1.id)@>">
1416										<@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
1417									</a>
1418    						<@}@>
1419    					</div>
1420    				</div>
1421    				<div class="is-box-2" >
1422    					<div class="boxa2" >
1423    						<p class="duration"><@if(value1.duration && curriculumAssetInfo){@><@print(millisecondsToHHMMSSStr(value1.duration))@><@}@></p>
1424    					</div>
1425    				</div>
1426    				</div>
1427    		</div>
1428    	<@ }); @>
1429    <@}@>
1430    	</div>
1431      <@ }); @>
1432
1433    </div>
1434</script>
1434
1435
1436
1437
1438
1439
1440<!-- Curriculum 3rd Template -->
1441<script type="text/template" id="coursecurr-3-template">
1442     <div class="column full" spellcheck="false" data-gramm="false">
1443        <div class="accordion-syllabus" >
1444			<@ $.each(item, function(index, value) { @>
1445            <div class="accordion-syllabus-item">
1446                <header class="accordion-syllabus-header">
1447                    <h4 class="accordion-syllabus-header__title">
1448                        <span class="text-primary">
1449							<@if(index<9){@>
1450									0<@print(index+1)@>
1451								<@ } else {@> 
1452									<@print(index+1)@> 
1453							<@ } @>
1454						</span>
1455                        <p><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;">
1456							<@if(value && value.items){@>
1457								<@ print(value.items.length) @> attachment(s) 
1458							<@}@>
1459						<@if(value.moduleDurations && curriculumAssetInfo){@>
1460							<@if(value && value.contents){@> • <@}@>
1461    						<@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1462    					<@}@>
1463						</span></p>
1464						
1465                    </h4>
1466                    <div class="accordion-syllabus-header__info">
1467                        <p class="text-primary hide-sm">
1468							<@if(value && value.items){@>
1469								<@ print(value.items.length) @> attachment(s) 
1470							<@}@>
1471						<@if(value.moduleDurations && curriculumAssetInfo){@>
1472							<@if(value && value.contents){@> • <@}@>
1473    						<@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1474    					<@}@>
1475						</p>
1476						<@if(value && value.items){@>
1477                        <div class="accordion-syllabus-header__icon text-primary">
1478                            <i class="fa fa-angle-left" aria-hidden="true"></i>
1479                        </div>
1480						<@}@>
1481                    </div>
1482                </header>
1483				<@if(value && value.items){@>
1484                <div class="accordion-content" style="">
1485                    <div class="accordian-content-block">
1486                        <ul class="accordian-list">
1487							<@ $.each(value['items'], function(index1, value1) { @>
1488                            <li class="accordian-list__item">
1489                                <div class="accordian-content-card">
1490                                    <div class="accordian-content-card__info">
1491                                        <div class="accordian-content-card__ico">
1492											<@ if(value1.type == 'code'){ @>
1493												<img src="/resources/images/CodeIcon.svg">
1494											<@ } else { @>
1495												<span class="material-icons text-primary">
1496													<@ print(getCourseAssetIcon(value1.type))@>
1497												</span>
1498											<@ } @>
1499										</div>
1500                                        <div class="accordian-content-card__title">
1501											<@print(value1.title)@> <@ if(curriculumAssetInfo && value1.type == 'pdf' && value1.pages !== undefined && value1.pages > 0) { @><small>(<@- value1.pages @> pages)</small><@ } @>
1502											<@ if(value1.type == 'aiheading') { @><small>(coming soon)</small><@ } @>
1503										</div>
1504                                    </div>
1505                                    <div class="accordian-content-card__link">
1506										<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
1507    										<a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,"-"))@>-<@- courseId @>#<@print(value1.id)@>" class="previewBtn">
1508												<span class="text-primary">
1509													<@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @><span style="color:#000"><i class="fa fa-solid fa-arrow-up-right"></i></span>
1510												</span>
1511											</a>
1512    									<@}@>
1513                                    </div>
1514                                </div>
1515                            </li>
1516                    		<@ }); @>
1517                        </ul>
1518                    </div>
1519                </div>
1520			<@ } @>
1521            </div>
1522           <@ }); @>   
1523        </div>
1524    </div>
1525</script>
1525
1526
1527
1528
1529<!-- Curriculum 4th Template -->
1530<script type="text/template" id="coursecurr-4-template">
1531   <div class="column full coursecurr4">
1532	 <@ $.each(item, function(index, value) { @>
1533	 <div class="accordion-syllabus-item">
1534	 <header class="accordion-syllabus-header" >
1535		 <h4 class="accordion-syllabus-header__title">
1536			 <span>
1537				 <@if(index<9){@>0<@print(index+1)@><@ } else {@> <@print(index+1)@> <@ } @>
1538			 </span>
1539			 <div class="accordion-syllabus-header__title-block" > 
1540				 <p style="font-size: 20px; font-weight: 700;">
1541					 <@print(value.title)@>
1542				 </p>
1543				 <p class="text-primary" style="font-weight: 500; font-size: 14px; line-height: 150%; margin-top: 10px; ">
1544					 <@if(value && value.type == 'aiheading'){@>
1545						 (coming soon)
1546					 <@}@>
1547					 <@if(value && value.items){@>
1548						 <@ print(value.items.length) @> attachment(s) 
1549					 <@}@>
1550					 <@if(value.moduleDurations && curriculumAssetInfo){@><@if(value && value.contents){@> • <@}@>
1551						 <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1552					 <@}@>
1553				 </p>
1554			 </div>
1555		 </h4>
1556		 <@if(value && value.items){@>
1557		 <div class="accordion-syllabus-header__info" >
1558			 <div class="accordion-syllabus-header__icon" >
1559				 <i class="fa fa-angle-left" aria-hidden="true"></i>
1560			 </div>
1561		 </div>
1562		 <@ } @>
1563	 </header>
1564	 <@if(value && value.items){@>
1565	 <div class="accordion-content"  style="">
1566		 <div class="accordian-content-block" >
1567			 <ul class="accordian-list">
1568				 <@ $.each(value['items'], function(index1, value1) { @>
1569				 <li class="accordian-list__item">
1570					 <div class="accordian-content-card" >
1571						 <div class="accordian-content-card__info" >
1572							 <div class="accordian-content-card__ico" >
1573								 <@ if(value1.type == 'code'){ @>
1574									 <img src="/resources/images/CodeIcon.svg">
1575								 <@ } else { @>
1576									 <span class="material-icons text-primary">
1577										 <@ print(getCourseAssetIcon(value1.type))@>262
1578									 </span>
1579								 <@ } @>
1580							 </div>
1581							 <div class="accordian-content-card__title" >
1582								 <@print(value1.title)@> <@ if(curriculumAssetInfo && value1.type == 'pdf' && value1.pages !== undefined && value1.pages > 0) { @><small>(<@- value1.pages @> pages)</small><@ } @>
1583								 <@ if(value1.type == 'aiheading') { @><small>(coming soon)</small><@ } @>
1584							 </div>
1585						 </div>
1586						 <div class="accordian-content-card__link" >
1587							 <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
1588							 <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,"-"))@>-<@- courseId @>#<@print(value1.id)@>" class="previewBtn">
1589								 <span class="text-primary">
1590									 <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @> <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right"></i></span>
1591								 </span>
1592							 </a>
1593							 <@ } @>
1594						 </div>
1595					 </div>
1596				 </li>
1597				 <@ }); @>
1598			 </ul>
1599		 </div>
1600	 </div>
1601	 <@ } @>
1602   </div>
1603  <@ }); @>  
1604 </div>
1605 </script>
1605
1606
1607 <!-- vegas curriculum-5-->
1608 
1608<script>
1609	// Simple responsive positioning
1610	function updatePosition() {
1611		const element = document.getElementById('totalTimeElement');
1612		if(element){
1613		if (window.innerWidth > 768) {
1614			element.style.position = 'absolute';
1615			element.style.top = "5px";
1616			element.style.right = '122px';
1617		} else {
1618			element.style.position = 'static';
1619			element.style.margin = '0 0';
1620		}
1621		}
1622	}
1623	
1624	// Run on load and resize
1625	window.addEventListener('load', updatePosition);
1626	window.addEventListener('resize', updatePosition);
1627	</script>
1627
1628 
1628<script type="text/template" id="coursecurr-5-template">
1629	<div class="total-time" id="totalTimeElement" style="
1630    font-size: 18px;
1631    font-weight: 600;
1632    color: #FB5607;
1633    padding: 8px 12px;
1634    border-radius: 4px;
1635    white-space: nowrap;">
1636     <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
1637        <@print(millisecondsToHHMMSSStr(summary.durations))@>
1638    <@}@>
1639</div>
1640
1641<div class="accordion-syllabus" style="max-width:1000px !important">
1642    <@ $.each(item, function(index, value) { @>
1643    <div class="accordion-syllabus-item" style="<@ if(index >= 5) { @> display: none; <@ } @>">
1644        <header class="accordion-syllabus-header" style="background:#F5F5F5 !important; border-radius:0px;box-shadow:none;padding:0.5rem !important">
1645            <h4 class="accordion-syllabus-header__title">
1646                <span class="text-primary" style="font-size:18px ; font-weight:600; color:black;"> 
1647                    <@if(index < 9) {@>  
1648                        Week <@print(index + 1)@>:  
1649                    <@ } else {@>  
1650                        Week <@print(index + 1)@>:
1651                    <@ } @>  
1652                </span>
1653                <p style="font-size:18px ; font-weight:600;"><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;">
1654                    <@if(value && value.items){@>
1655                        <@ print(value.items.length) @> attachment(s) 
1656                    <@} else {@>
1657                        1 attachment(s)
1658                    <@}@>
1659                    <@if(value.moduleDurations && curriculumAssetInfo){@>
1660						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1661					<@}@>
1662                </span></p>
1663            </h4>
1664			
1665            <div class="accordion-syllabus-header__info">
1666                <p class="text-primary hide-sm" style="color:#FB5607 !important;">
1667                    <@if(value && value.items){@>
1668                        <@ print(value.items.length) @> attachment(s) 
1669                    <@} else {@>
1670                        1 attachment(s)
1671                    <@}@>
1672                    <@if(value.moduleDurations && curriculumAssetInfo){@>
1673						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1674					<@}@>
1675                </p>
1676                <div class="accordion-syllabus-header__icon text-primary">
1677                    <i class="fa fa-angle-left" aria-hidden="true" style="color:#FB5607;"></i>
1678                </div>
1679            </div>
1680        </header>
1681        <div class="accordion-content" style="filter:none;">
1682            <div class="accordian-content-block" style="background:#F5F5F5 !important;box-shadow:none;padding:16px 66px 3px 69px !important;">
1683                <ul class="accordian-list">
1684                    <@ var itemsCount = value['items'] ? value['items'].length : 0; @>
1685                    <@ if(value['items'] && value['items'].length > 0) { @>
1686                        <@ $.each(value['items'], function(index1, value1) { @>
1687                        <li class="accordian-list__item" style="padding:0px 0px !important;<@ if(index1 >= 5) { @> display: none; <@ } @>"> 
1688							<style>
1689								@media (max-width: 768px) {
1690								  .accordian-content-card {
1691									flex-direction: column !important;
1692									align-items: stretch !important;
1693								  }
1694							  
1695								  .accordian-content-card__top {
1696									flex-direction: row !important;
1697									justify-content: space-between !important;
1698									align-items: center !important;
1699									width: 100% !important;
1700								  }
1701							  
1702								  .accordian-content-card__title {
1703									flex: 1 !important;
1704									margin: 0 10px !important;
1705									white-space: nowrap;
1706									overflow: hidden;
1707									text-overflow: ellipsis;
1708								  }
1709							  
1710								  .accordian-content-card__bottom {
1711									flex-direction: row !important;
1712									justify-content: space-between !important;
1713									align-items: center !important;
1714									width: 100% !important;
1715									margin-top: 6px !important;
1716								  }
1717							  
1718								  .accordian-content-card__link {
1719									flex: 1 !important;
1720									min-width: 0 !important;
1721									text-align: left !important;
1722								  }
1723							  
1724								  .accordian-content-card__time {
1725									flex-shrink: 0 !important;
1726									text-align: right !important;
1727								  }
1728								}
1729							  </style>
1730							  
1731							  <div class="accordian-content-card"
1732     style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
1733
1734							  
1735								<!-- Row 1: Icon + Title + Collapse Icon -->
1736								<div class="accordian-content-card__top"
1737									 style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
1738							  
1739								  <!-- Icon -->
1740								  <div class="accordian-content-card__ico" style="flex-shrink: 0;">
1741									<@ if(value1.type == 'code'){ @>
1742									  <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
1743									<@ } else { @>
1744									  <span class="material-icons text-primary" style="color:#FB5607; font-size: 24px;">
1745										<@ print(getCourseAssetIcon(value1.type))@>
1746									  </span>
1747									<@ } @>
1748								  </div>
1749							  
1750								  <!-- Title -->
1751								  <div class="accordian-content-card__title"
1752									   style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
1753									<@print(value1.title)@>
1754								  </div>
1755							  
1756								  <!-- Collapse Icon (optional) -->
1757								  <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
1758									<!-- Example placeholder, add real icon if needed -->
1759									<!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
1760								  </div>
1761								</div>
1762							  
1763								<!-- Row 2: Preview Button and Time -->
1764								<div class="accordian-content-card__bottom"
1765									 style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
1766							  
1767								  <!-- Preview Button -->
1768								  <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
1769									<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
1770									  <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value1.id)@>"
1771										 class="previewBtn"
1772										 style="font-size: 14px; font-weight: 500; text-decoration: none; color: #FB5607; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
1773										<span class="text-primary" style="color:#FB5607;">
1774										  <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
1775										  <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#FB5607;"></i></span>
1776										</span>
1777									  </a>
1778									<@}@>
1779								  </div>
1780							  
1781								  <!-- Time -->
1782								  <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
1783									<p class="text-primary course-asset-time"
1784									   style="font-size: 14px; font-weight: 500; color:#FB5607 !important; margin: 0;">
1785									  <@ if(value1.duration && value1.duration > 0) { @>
1786										<@ print(millisecondsToHHMMSSStr(value1.duration)) @>
1787									  <@ } else { @>
1788										--
1789									  <@ } @>
1790									</p>
1791								  </div>
1792							  
1793								</div>
1794							  </div>
1795							  
1796							
1797                        </li>
1798                        <@ }); @>
1799                    <@ } else { @>
1800                        <li class="accordian-list__item" style="padding:0px 0px !important;">
1801							<div class="accordian-content-card"
1802							style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
1803					   
1804						   <!-- Row 1: Icon + Title + Collapse Icon -->
1805						   <div class="accordian-content-card__top"
1806								style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
1807						 
1808							   <!-- Icon -->
1809							   <div class="accordian-content-card__ico" style="flex-shrink: 0;">
1810								   <@ if(value.type == 'code'){ @>
1811									   <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
1812								   <@ } else { @>
1813									   <span class="material-icons text-primary" style="color:#FB5607; font-size: 24px;">
1814										   <@ print(getCourseAssetIcon(value.type))@>
1815									   </span>
1816								   <@ } @>
1817							   </div>
1818						 
1819							   <!-- Title -->
1820							   <div class="accordian-content-card__title"
1821									style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
1822								   <@print(value.title)@>
1823							   </div>
1824						 
1825							   <!-- Collapse Icon (optional) -->
1826							   <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
1827								   <!-- Example placeholder, add real icon if needed -->
1828								   <!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
1829							   </div>
1830						   </div>
1831						 
1832						   <!-- Row 2: Preview Button and Time -->
1833						   <div class="accordian-content-card__bottom"
1834								style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
1835						 
1836							   <!-- Preview Button -->
1837							   <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
1838								   <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
1839									   <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value.id)@>"
1840										  class="previewBtn"
1841										  style="font-size: 14px; font-weight: 500; text-decoration: none; color: #FB5607; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
1842										   <span class="text-primary" style="color:#FB5607;">
1843											   <@ if(value.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
1844											   <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#FB5607;"></i></span>
1845										   </span>
1846									   </a>
1847								   <@}@>
1848							   </div>
1849						 
1850							   <!-- Time -->
1851							   <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
1852								   <p class="text-primary course-asset-time"
1853									  style="font-size: 14px; font-weight: 500; color:#FB5607 !important; margin: 0;">
1854									   <@ if(value.duration && value.duration > 0) { @>
1855										   <@ print(millisecondsToHHMMSSStr(value.duration)) @>
1856									   <@ } else { @>
1857										   --
1858									   <@ } @>
1859								   </p>
1860							   </div>
1861						   </div>
1862					   </div>
1863                        </li>
1864                    <@ } @>
1865                </ul>
1866            
1867                <@ if(itemsCount > 5) { @>
1868                    <div style="text-align: center; margin-top: 10px;">
1869						<button style="background-color: #FB5607; color: white; padding: 4px 28px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
1870						onclick="
1871							var parentAccordion = this.closest('.accordion-content');
1872							parentAccordion.style.maxHeight = 'none';
1873							this.closest('.accordian-content-block').querySelectorAll('.accordian-list__item').forEach(el => el.style.display = 'block'); 
1874							this.style.display = 'none';
1875						">
1876                            View All
1877                        </button>
1878                    </div>
1879                <@ } @>
1880            </div>
1881        </div>
1882    </div>
1883    <@ }); @>
1884    <@ if(item.length > 5) { @>
1885        <div style="text-align: center; margin-top: 10px;margin-bottom: 20px;">
1886            <button style="background-color: #FB5607; color: white; padding: 8px 32px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
1887                onclick="document.querySelectorAll('.accordion-syllabus-item').forEach(el => el.style.display = 'block'); this.style.display = 'none';">
1888                View All Sessions
1889            </button>
1890        </div>
1891    <@ } @>
1892</div>
1893	</div>
1894</script>
1894
1895
1896
1897<!--Blaze-Curriculum-6-->
1898<script type="text/template" id="coursecurr-6-template">
1899    <div class="column full" spellcheck="false" data-gramm="false">
1900        <div class="total-time" id="totalTimeElement" style="
1901            font-size: 18px;
1902            font-weight: 600;
1903            color: #D8FD46;
1904            padding: 8px 12px;
1905            border-radius: 4px;
1906            white-space: nowrap;
1907            background: #232323;
1908            margin-bottom: 20px;">
1909            <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
1910                <@print(millisecondsToHHMMSSStr(summary.durations))@>
1911            <@}@>
1912        </div>
1913
1914        <div class="accordion-syllabus">
1915            <@ $.each(item, function(index, value) { @>
1916            <div class="accordion-syllabus-item" style="<@ if(index >= 5) { @> display: none; <@ } @>">
1917                <header class="accordion-syllabus-header" style="background:#232323 !important; border-radius:0px;box-shadow:none;padding:20px 20px !important">
1918                    <h4 class="accordion-syllabus-header__title">
1919                        <span class="text-primary" style="font-size:18px ; font-weight:600; color:white;"> 
1920                            <@if(index < 9) {@>  
1921								Week <@print(index + 1)@>:  
1922							<@ } else {@>  
1923								Week <@print(index + 1)@>:
1924							<@ } @>  
1925                        </span>
1926                        <p style="font-size:18px ; font-weight:600;color:white;"><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;color:#D8FD46 !important;">
1927							<@if(value && value.items){@>
1928								<@ print(value.items.length) @> attachment(s) 
1929							<@} else {@>
1930								1 attachment(s)
1931							<@}@>
1932							<@if(value.moduleDurations && curriculumAssetInfo){@>
1933								• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1934							<@}@>
1935						</span></p>
1936                    </h4>
1937                    <div class="accordion-syllabus-header__info">
1938                        <p class="text-primary hide-sm" style="color:#D8FD46 !important;">
1939                            <@if(value && value.items){@>
1940                                <@ print(value.items.length) @> attachment(s) 
1941                            <@} else {@>
1942                                1 attachment(s)
1943                            <@}@>
1944							<@if(value.moduleDurations && curriculumAssetInfo){@>
1945								• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
1946							<@}@>
1947                        </p>
1948                        <div class="accordion-syllabus-header__icon text-primary">
1949                            <i class="fa fa-angle-left" aria-hidden="true" style="color:#D8FD46;"></i>
1950                        </div>
1951                    </div>
1952                </header>
1953                <div class="accordion-content" style="filter:none;background:#181818;">
1954                    <div class="accordian-content-block" style="box-shadow:none;padding:16px 20px !important;background:transparent !important;">
1955                        <ul class="accordian-list">
1956                            <@ var itemsCount = value['items'] ? value['items'].length : 0; @>
1957                            <@ if(value['items'] && value['items'].length > 0) { @>
1958                                <@ $.each(value['items'], function(index1, value1) { @>
1959                                <li class="accordian-list__item" style="padding:0px 0px !important;<@ if(index1 >= 5) { @> display: none; <@ } @>"> 
1960                                    <style>
1961                                        @media (max-width: 768px) {
1962                                            .accordian-content-card {
1963                                                flex-direction: column !important;
1964                                                align-items: stretch !important;
1965                                            }
1966                                        
1967                                            .accordian-content-card__top {
1968                                                flex-direction: row !important;
1969                                                justify-content: space-between !important;
1970                                                align-items: center !important;
1971                                                width: 100% !important;
1972                                            }
1973                                        
1974                                            .accordian-content-card__title {
1975                                                flex: 1 !important;
1976                                                margin: 0 10px !important;
1977                                                white-space: nowrap;
1978                                                overflow: hidden;
1979                                                text-overflow: ellipsis;
1980                                            }
1981                                        
1982                                            .accordian-content-card__bottom {
1983                                                flex-direction: row !important;
1984                                                justify-content: space-between !important;
1985                                                align-items: center !important;
1986                                                width: 100% !important;
1987                                                margin-top: 6px !important;
1988                                            }
1989                                        
1990                                            .accordian-content-card__link {
1991                                                flex: 1 !important;
1992                                                min-width: 0 !important;
1993                                                text-align: left !important;
1994                                            }
1995                                        
1996                                            .accordian-content-card__time {
1997                                                flex-shrink: 0 !important;
1998                                                text-align: right !important;
1999                                            }
2000                                        }
2001                                    </style>
2002                                    
2003                                    <div class="accordian-content-card"
2004                                        style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; ">
2005                                    
2006                                        <!-- Row 1: Icon + Title + Collapse Icon -->
2007                                        <div class="accordian-content-card__top"
2008                                            style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2009                                        
2010                                            <!-- Icon -->
2011                                            <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2012                                                <@ if(value1.type == 'code'){ @>
2013                                                    <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px; filter: invert(1);">
2014                                                <@ } else { @>
2015                                                    <span class="material-icons text-primary" style="color:#D8FD46; font-size: 24px;">
2016                                                        <@ print(getCourseAssetIcon(value1.type))@>
2017                                                    </span>
2018                                                <@ } @>
2019                                            </div>
2020                                        
2021                                            <!-- Title -->
2022                                            <div class="accordian-content-card__title"
2023                                                style="font-weight: 400; font-size: 14px; color: white; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2024                                                <@print(value1.title)@>
2025                                                <!-- <@ if(curriculumAssetInfo && value1.type == 'pdf' && value1.pages !== undefined && value1.pages > 0) { @>
2026                                                    <small style="color: #999;">(<@- value1.pages @> pages)</small>
2027                                                <@ } @>
2028                                                <@ if(value1.type == 'aiheading') { @>
2029                                                    <small style="color: #999;">(coming soon)</small>
2030                                                <@ } @> -->
2031                                            </div>
2032                                        
2033                                            <!-- Collapse Icon -->
2034                                            <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2035                                            </div>
2036                                        </div>
2037                                    
2038                                        <!-- Row 2: Preview Button and Time -->
2039                                        <div class="accordian-content-card__bottom"
2040                                            style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2041                                        
2042                                            <!-- Preview Button -->
2043                                            <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2044                                                <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
2045                                                <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value1.id)@>"
2046                                                    class="previewBtn"
2047                                                    style="font-size: 14px; font-weight: 500; text-decoration: none; color: #D8FD46 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2048                                                    <span class="text-primary" style="color:#D8FD46;">
2049                                                        <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2050                                                        <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#D8FD46;"></i></span>
2051                                                    </span>
2052                                                </a>
2053                                                <@}@>
2054                                            </div>
2055                                        
2056                                            <!-- Time -->
2057                                            <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2058                                                <p class="text-primary course-asset-time"
2059                                                    style="font-size: 14px; font-weight: 500; color:#D8FD46 !important; margin: 0;">
2060                                                    <@ if(value1.duration && value1.duration > 0) { @>
2061                                                        <@ print(millisecondsToHHMMSSStr(value1.duration)) @>
2062                                                    <@ } else { @>
2063                                                        --
2064                                                    <@ } @>
2065                                                </p>
2066                                            </div>
2067                                        </div>
2068                                    </div>
2069                                </li>
2070                                <@ }); @>
2071                            <@ } else { @>
2072								<li class="accordian-list__item" style="padding:0px 0px !important;">
2073									<div class="accordian-content-card"
2074										style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; ">
2075								   
2076										<!-- Row 1: Icon + Title + Collapse Icon -->
2077										<div class="accordian-content-card__top"
2078											style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2079									  
2080											<!-- Icon -->
2081											<div class="accordian-content-card__ico" style="flex-shrink: 0;">
2082												<@ if(value.type == 'code'){ @>
2083													<img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px; filter: invert(1);">
2084												<@ } else { @>
2085													<span class="material-icons text-primary" style="color:#D8FD46; font-size: 24px;">
2086														<@ print(getCourseAssetIcon(value.type))@>
2087													</span>
2088												<@ } @>
2089											</div>
2090									  
2091											<!-- Title -->
2092											<div class="accordian-content-card__title"
2093												style="font-weight: 400; font-size: 14px; color: white; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2094												<@print(value.title)@>
2095											</div>
2096									  
2097											<!-- Collapse Icon (optional) -->
2098											<div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2099												<!-- Example placeholder, add real icon if needed -->
2100												<!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2101											</div>
2102										</div>
2103									  
2104										<!-- Row 2: Preview Button and Time -->
2105										<div class="accordian-content-card__bottom"
2106											style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2107									  
2108											<!-- Preview Button -->
2109											<div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2110												<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
2111													<a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value.id)@>"
2112													   class="previewBtn"
2113													   style="font-size: 14px; font-weight: 500; text-decoration: none; color: #D8FD46 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2114														<span class="text-primary" style="color:#D8FD46;">
2115															<@ if(value.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2116															<span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#D8FD46;"></i></span>
2117														</span>
2118													</a>
2119												<@}@>
2120											</div>
2121									  
2122											<!-- Time -->
2123											<div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2124												<p class="text-primary course-asset-time"
2125												   style="font-size: 14px; font-weight: 500; color:#D8FD46 !important; margin: 0;">
2126													<@ if(value.duration && value.duration > 0) { @>
2127														<@ print(millisecondsToHHMMSSStr(value.duration)) @>
2128													<@ } else { @>
2129														--
2130													<@ } @>
2131												</p>
2132											</div>
2133										</div>
2134									</div>
2135								</li>
2136                            <@ } @>
2137                        </ul>
2138                    
2139                        <@ if(itemsCount > 5) { @>
2140                            <div style="text-align: center; margin-top: 10px;">
2141                                <button style="background-color: #D8FD46; color: black; padding: 4px 28px; border: none; cursor: pointer; font-size: 16px; border-radius: 0px;" 
2142                                   onclick="
2143							var parentAccordion = this.closest('.accordion-content');
2144							parentAccordion.style.maxHeight = 'none';
2145							this.closest('.accordian-content-block').querySelectorAll('.accordian-list__item').forEach(el => el.style.display = 'block'); 
2146							this.style.display = 'none';
2147						">
2148                                    View All
2149                                </button>
2150                            </div>
2151                        <@ } @>
2152                    </div>
2153                </div>
2154            </div>
2155            <@ }); @>
2156            <@ if(item.length > 5) { @>
2157                <div style="text-align: center; margin-top: 10px;margin-bottom: 20px;">
2158                    <button style="background-color: #D8FD46; color: black; padding: 8px 32px; border: none; cursor: pointer; font-size: 16px; border-radius: 0px;" 
2159                        onclick="document.querySelectorAll('.accordion-syllabus-item').forEach(el => el.style.display = 'block'); this.style.display = 'none';">
2160                        View All Sessions
2161                    </button>
2162                </div>
2163            <@ } @>
2164        </div>
2165    </div>
2166</script>
2166
2167
2168<script>
2169    // Simple responsive positioning (same as Vegas)
2170    function updatePosition() {
2171        const element = document.getElementById('totalTimeElement');
2172        if(element){
2173            if (window.innerWidth > 768) {
2174                element.style.position = 'absolute';
2175                element.style.top = "5px";
2176                element.style.right = '122px';
2177            } else {
2178                element.style.position = 'static';
2179                element.style.margin = '0 0';
2180            }
2181        }
2182    }
2183    
2184    // Run on load and resize
2185    window.addEventListener('load', updatePosition);
2186    window.addEventListener('resize', updatePosition);
2187</script>
2187
2188
2189
2190
2191
2192<!--Nebula Curriculum 7-->
2193
2194
2195<script>
2196	// Simple responsive positioning
2197	function updatePosition() {
2198		const element = document.getElementById('totalTimeElement');
2199		if(element){
2200		if (window.innerWidth > 768) {
2201			element.style.position = 'absolute';
2202			element.style.top = "5px";
2203			element.style.right = '122px';
2204		} else {
2205			element.style.position = 'static';
2206			element.style.margin = '0 0';
2207		}
2208		}
2209	}
2210	
2211	// Run on load and resize
2212	window.addEventListener('load', updatePosition);
2213	window.addEventListener('resize', updatePosition);
2214	</script>
2214
2215 
2215<script type="text/template" id="coursecurr-7-template">
2216	<div class="total-time" id="totalTimeElement" style="
2217    font-size: 18px;
2218    font-weight: 600;
2219    color: #6715FF;
2220    padding: 8px 12px;
2221    border-radius: 4px;
2222    white-space: nowrap;">
2223     <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
2224        <@print(millisecondsToHHMMSSStr(summary.durations))@>
2225    <@}@>
2226</div>
2227
2228<div class="accordion-syllabus" style="max-width:1000px !important">
2229    <@ $.each(item, function(index, value) { @>
2230    <div class="accordion-syllabus-item" style="<@ if(index >= 5) { @> display: none; <@ } @>">
2231        <header class="accordion-syllabus-header" style="background:#F1ECFB !important; border-radius16px;box-shadow:none;padding:20px !important">
2232            <h4 class="accordion-syllabus-header__title">
2233                <span class="text-primary" style="font-size:18px ; font-weight:600; color:black;"> 
2234                    <@if(index < 9) {@>  
2235                        Week <@print(index + 1)@>:  
2236                    <@ } else {@>  
2237                        Week <@print(index + 1)@>:
2238                    <@ } @>  
2239                </span>
2240                <p style="font-size:18px ; font-weight:600;"><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;">
2241                    <@if(value && value.items){@>
2242                        <@ print(value.items.length) @> attachment(s) 
2243                    <@} else {@>
2244                        1 attachment(s)
2245                    <@}@>
2246                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2247						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2248					<@}@>
2249                </span></p>
2250            </h4>
2251			
2252            <div class="accordion-syllabus-header__info">
2253                <p class="text-primary hide-sm" style="color:#6715FF !important;">
2254                    <@if(value && value.items){@>
2255                        <@ print(value.items.length) @> attachment(s) 
2256                    <@} else {@>
2257                        1 attachment(s)
2258                    <@}@>
2259                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2260						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2261					<@}@>
2262                </p>
2263                <div class="accordion-syllabus-header__icon text-primary">
2264                    <i class="fa fa-angle-left" aria-hidden="true" style="color:#6715FF;"></i>
2265                </div>
2266            </div>
2267        </header>
2268        <div class="accordion-content" style="filter:none;background:transparent !important;">
2269            <div class="accordian-content-block" style="background:transparent !important;box-shadow:none;padding:16px 66px 3px 69px !important;">
2270                <ul class="accordian-list">
2271                    <@ var itemsCount = value['items'] ? value['items'].length : 0; @>
2272                    <@ if(value['items'] && value['items'].length > 0) { @>
2273                        <@ $.each(value['items'], function(index1, value1) { @>
2274                        <li class="accordian-list__item" style="padding:0px 0px !important;<@ if(index1 >= 5) { @> display: none; <@ } @>"> 
2275							<style>
2276								@media (max-width: 768px) {
2277								  .accordian-content-card {
2278									flex-direction: column !important;
2279									align-items: stretch !important;
2280								  }
2281							  
2282								  .accordian-content-card__top {
2283									flex-direction: row !important;
2284									justify-content: space-between !important;
2285									align-items: center !important;
2286									width: 100% !important;
2287								  }
2288							  
2289								  .accordian-content-card__title {
2290									flex: 1 !important;
2291									margin: 0 10px !important;
2292									white-space: nowrap;
2293									overflow: hidden;
2294									text-overflow: ellipsis;
2295								  }
2296							  
2297								  .accordian-content-card__bottom {
2298									flex-direction: row !important;
2299									justify-content: space-between !important;
2300									align-items: center !important;
2301									width: 100% !important;
2302									margin-top: 6px !important;
2303								  }
2304							  
2305								  .accordian-content-card__link {
2306									flex: 1 !important;
2307									min-width: 0 !important;
2308									text-align: left !important;
2309								  }
2310							  
2311								  .accordian-content-card__time {
2312									flex-shrink: 0 !important;
2313									text-align: right !important;
2314								  }
2315								}
2316							  </style>
2317							  
2318							  <div class="accordian-content-card"
2319     style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2320
2321							  
2322								<!-- Row 1: Icon + Title + Collapse Icon -->
2323								<div class="accordian-content-card__top"
2324									 style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2325							  
2326								  <!-- Icon -->
2327								  <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2328									<@ if(value1.type == 'code'){ @>
2329									  <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
2330									<@ } else { @>
2331									  <span class="material-icons text-primary" style="color:#6715FF; font-size: 24px;">
2332										<@ print(getCourseAssetIcon(value1.type))@>
2333									  </span>
2334									<@ } @>
2335								  </div>
2336							  
2337								  <!-- Title -->
2338								  <div class="accordian-content-card__title"
2339									   style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2340									<@print(value1.title)@>
2341								  </div>
2342							  
2343								  <!-- Collapse Icon (optional) -->
2344								  <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2345									<!-- Example placeholder, add real icon if needed -->
2346									<!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2347								  </div>
2348								</div>
2349							  
2350								<!-- Row 2: Preview Button and Time -->
2351								<div class="accordian-content-card__bottom"
2352									 style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2353							  
2354								  <!-- Preview Button -->
2355								  <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2356									<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
2357									  <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value1.id)@>"
2358										 class="previewBtn"
2359										 style="font-size: 14px; font-weight: 500; text-decoration: none; color: #6715FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2360										<span class="text-primary" style="color:#6715FF;">
2361										  <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2362										  <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#6715FF;"></i></span>
2363										</span>
2364									  </a>
2365									<@}@>
2366								  </div>
2367							  
2368								  <!-- Time -->
2369								  <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2370									<p class="text-primary course-asset-time"
2371									   style="font-size: 14px; font-weight: 500; color:#6715FF !important; margin: 0;">
2372									  <@ if(value1.duration && value1.duration > 0) { @>
2373										<@ print(millisecondsToHHMMSSStr(value1.duration)) @>
2374									  <@ } else { @>
2375										--
2376									  <@ } @>
2377									</p>
2378								  </div>
2379							  
2380								</div>
2381							  </div>
2382							  
2383							
2384                        </li>
2385                        <@ }); @>
2386                    <@ } else { @>
2387                        <li class="accordian-list__item" style="padding:0px 0px !important;">
2388							<div class="accordian-content-card"
2389							style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2390					   
2391						   <!-- Row 1: Icon + Title + Collapse Icon -->
2392						   <div class="accordian-content-card__top"
2393								style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2394						 
2395							   <!-- Icon -->
2396							   <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2397								   <@ if(value.type == 'code'){ @>
2398									   <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
2399								   <@ } else { @>
2400									   <span class="material-icons text-primary" style="color:#6715FF; font-size: 24px;">
2401										   <@ print(getCourseAssetIcon(value.type))@>
2402									   </span>
2403								   <@ } @>
2404							   </div>
2405						 
2406							   <!-- Title -->
2407							   <div class="accordian-content-card__title"
2408									style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2409								   <@print(value.title)@>
2410							   </div>
2411						 
2412							   <!-- Collapse Icon (optional) -->
2413							   <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2414								   <!-- Example placeholder, add real icon if needed -->
2415								   <!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2416							   </div>
2417						   </div>
2418						 
2419						   <!-- Row 2: Preview Button and Time -->
2420						   <div class="accordian-content-card__bottom"
2421								style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2422						 
2423							   <!-- Preview Button -->
2424							   <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2425								   <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
2426									   <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value.id)@>"
2427										  class="previewBtn"
2428										  style="font-size: 14px; font-weight: 500; text-decoration: none; color: #6715FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2429										   <span class="text-primary" style="color:#6715FF;">
2430											   <@ if(value.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2431											   <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#6715FF;"></i></span>
2432										   </span>
2433									   </a>
2434								   <@}@>
2435							   </div>
2436						 
2437							   <!-- Time -->
2438							   <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2439								   <p class="text-primary course-asset-time"
2440									  style="font-size: 14px; font-weight: 500; color:#6715FF !important; margin: 0;">
2441									   <@ if(value.duration && value.duration > 0) { @>
2442										   <@ print(millisecondsToHHMMSSStr(value.duration)) @>
2443									   <@ } else { @>
2444										   --
2445									   <@ } @>
2446								   </p>
2447							   </div>
2448						   </div>
2449					   </div>
2450                        </li>
2451                    <@ } @>
2452                </ul>
2453            
2454                <@ if(itemsCount > 5) { @>
2455                    <div style="text-align: center; margin-top: 10px;">
2456						<button style="background-color: #6715FF; color: white; padding: 4px 28px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
2457						onclick="
2458							var parentAccordion = this.closest('.accordion-content');
2459							parentAccordion.style.maxHeight = 'none';
2460							this.closest('.accordian-content-block').querySelectorAll('.accordian-list__item').forEach(el => el.style.display = 'block'); 
2461							this.style.display = 'none';
2462						">
2463                            View All
2464                        </button>
2465                    </div>
2466                <@ } @>
2467            </div>
2468        </div>
2469    </div>
2470    <@ }); @>
2471    <@ if(item.length > 5) { @>
2472        <div style="text-align: center; margin-top: 10px;margin-bottom: 20px;">
2473            <button style="background-color: #6715FF; color: white; padding: 8px 32px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
2474                onclick="document.querySelectorAll('.accordion-syllabus-item').forEach(el => el.style.display = 'block'); this.style.display = 'none';">
2475                View All Sessions
2476            </button>
2477        </div>
2478    <@ } @>
2479</div>
2480	</div>
2481</script>
2481
2482
2483
2484
2485<!--Olive Curriculum 8-->
2486<script>
2487	// Simple responsive positioning
2488	function updatePosition() {
2489		const element = document.getElementById('totalTimeElement');
2490		if(element){
2491		if (window.innerWidth > 768) {
2492			element.style.position = 'absolute';
2493			element.style.top = "5px";
2494			element.style.right = '122px';
2495		} else {
2496			element.style.position = 'static';
2497			element.style.margin = '0 0';
2498		}
2499		}
2500	}
2501	
2502	// Run on load and resize
2503	window.addEventListener('load', updatePosition);
2504	window.addEventListener('resize', updatePosition);
2505	</script>
2505
2506 
2506<script type="text/template" id="coursecurr-8-template">
2507	<div class="total-time" id="totalTimeElement" style="
2508    font-size: 18px;
2509    font-weight: 600;
2510    color: #064400;
2511    padding: 8px 12px;
2512    border-radius: 4px;
2513    white-space: nowrap;">
2514     <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
2515        <@print(millisecondsToHHMMSSStr(summary.durations))@>
2516    <@}@>
2517</div>
2518
2519<div class="accordion-syllabus" style="max-width:1000px !important">
2520    <@ $.each(item, function(index, value) { @>
2521    <div class="accordion-syllabus-item" style="<@ if(index >= 5) { @> display: none; <@ } @>">
2522        <header class="accordion-syllabus-header" style="background:#E5E5E5 !important; border-radius16px;box-shadow:none;padding:20px !important">
2523            <h4 class="accordion-syllabus-header__title">
2524                <span class="text-primary" style="font-size:18px ; font-weight:600; color:black;"> 
2525                    <@if(index < 9) {@>  
2526                        Week <@print(index + 1)@>:  
2527                    <@ } else {@>  
2528                        Week <@print(index + 1)@>:
2529                    <@ } @>  
2530                </span>
2531                <p style="font-size:18px ; font-weight:600;"><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;">
2532                    <@if(value && value.items){@>
2533                        <@ print(value.items.length) @> attachment(s) 
2534                    <@} else {@>
2535                        1 attachment(s)
2536                    <@}@>
2537                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2538						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2539					<@}@>
2540                </span></p>
2541            </h4>
2542			
2543            <div class="accordion-syllabus-header__info">
2544                <p class="text-primary hide-sm" style="color:#064400 !important;">
2545                    <@if(value && value.items){@>
2546                        <@ print(value.items.length) @> attachment(s) 
2547                    <@} else {@>
2548                        1 attachment(s)
2549                    <@}@>
2550                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2551						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2552					<@}@>
2553                </p>
2554                <div class="accordion-syllabus-header__icon text-primary">
2555                    <i class="fa fa-angle-left" aria-hidden="true" style="color:#064400;"></i>
2556                </div>
2557            </div>
2558        </header>
2559        <div class="accordion-content" style="filter:none;background:transparent !important;">
2560            <div class="accordian-content-block" style="background:transparent !important;box-shadow:none;padding:16px 66px 3px 69px !important;">
2561                <ul class="accordian-list">
2562                    <@ var itemsCount = value['items'] ? value['items'].length : 0; @>
2563                    <@ if(value['items'] && value['items'].length > 0) { @>
2564                        <@ $.each(value['items'], function(index1, value1) { @>
2565                        <li class="accordian-list__item" style="padding:0px 0px !important;<@ if(index1 >= 5) { @> display: none; <@ } @>"> 
2566							<style>
2567								@media (max-width: 768px) {
2568								  .accordian-content-card {
2569									flex-direction: column !important;
2570									align-items: stretch !important;
2571								  }
2572							  
2573								  .accordian-content-card__top {
2574									flex-direction: row !important;
2575									justify-content: space-between !important;
2576									align-items: center !important;
2577									width: 100% !important;
2578								  }
2579							  
2580								  .accordian-content-card__title {
2581									flex: 1 !important;
2582									margin: 0 10px !important;
2583									white-space: nowrap;
2584									overflow: hidden;
2585									text-overflow: ellipsis;
2586								  }
2587							  
2588								  .accordian-content-card__bottom {
2589									flex-direction: row !important;
2590									justify-content: space-between !important;
2591									align-items: center !important;
2592									width: 100% !important;
2593									margin-top: 6px !important;
2594								  }
2595							  
2596								  .accordian-content-card__link {
2597									flex: 1 !important;
2598									min-width: 0 !important;
2599									text-align: left !important;
2600								  }
2601							  
2602								  .accordian-content-card__time {
2603									flex-shrink: 0 !important;
2604									text-align: right !important;
2605								  }
2606								}
2607							  </style>
2608							  
2609							  <div class="accordian-content-card"
2610     style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2611
2612							  
2613								<!-- Row 1: Icon + Title + Collapse Icon -->
2614								<div class="accordian-content-card__top"
2615									 style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2616							  
2617								  <!-- Icon -->
2618								  <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2619									<@ if(value1.type == 'code'){ @>
2620									  <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
2621									<@ } else { @>
2622									  <span class="material-icons text-primary" style="color:#064400; font-size: 24px;">
2623										<@ print(getCourseAssetIcon(value1.type))@>
2624									  </span>
2625									<@ } @>
2626								  </div>
2627							  
2628								  <!-- Title -->
2629								  <div class="accordian-content-card__title"
2630									   style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2631									<@print(value1.title)@>
2632								  </div>
2633							  
2634								  <!-- Collapse Icon (optional) -->
2635								  <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2636									<!-- Example placeholder, add real icon if needed -->
2637									<!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2638								  </div>
2639								</div>
2640							  
2641								<!-- Row 2: Preview Button and Time -->
2642								<div class="accordian-content-card__bottom"
2643									 style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2644							  
2645								  <!-- Preview Button -->
2646								  <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2647									<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
2648									  <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value1.id)@>"
2649										 class="previewBtn"
2650										 style="font-size: 14px; font-weight: 500; text-decoration: none; color: #064400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2651										<span class="text-primary" style="color:#064400;">
2652										  <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2653										  <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#064400;"></i></span>
2654										</span>
2655									  </a>
2656									<@}@>
2657								  </div>
2658							  
2659								  <!-- Time -->
2660								  <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2661									<p class="text-primary course-asset-time"
2662									   style="font-size: 14px; font-weight: 500; color:#064400 !important; margin: 0;">
2663									  <@ if(value1.duration && value1.duration > 0) { @>
2664										<@ print(millisecondsToHHMMSSStr(value1.duration)) @>
2665									  <@ } else { @>
2666										--
2667									  <@ } @>
2668									</p>
2669								  </div>
2670							  
2671								</div>
2672							  </div>
2673							  
2674							
2675                        </li>
2676                        <@ }); @>
2677                    <@ } else { @>
2678                        <li class="accordian-list__item" style="padding:0px 0px !important;">
2679							<div class="accordian-content-card"
2680							style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2681					   
2682						   <!-- Row 1: Icon + Title + Collapse Icon -->
2683						   <div class="accordian-content-card__top"
2684								style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2685						 
2686							   <!-- Icon -->
2687							   <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2688								   <@ if(value.type == 'code'){ @>
2689									   <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
2690								   <@ } else { @>
2691									   <span class="material-icons text-primary" style="color:#064400; font-size: 24px;">
2692										   <@ print(getCourseAssetIcon(value.type))@>
2693									   </span>
2694								   <@ } @>
2695							   </div>
2696						 
2697							   <!-- Title -->
2698							   <div class="accordian-content-card__title"
2699									style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2700								   <@print(value.title)@>
2701							   </div>
2702						 
2703							   <!-- Collapse Icon (optional) -->
2704							   <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2705								   <!-- Example placeholder, add real icon if needed -->
2706								   <!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2707							   </div>
2708						   </div>
2709						 
2710						   <!-- Row 2: Preview Button and Time -->
2711						   <div class="accordian-content-card__bottom"
2712								style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2713						 
2714							   <!-- Preview Button -->
2715							   <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2716								   <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
2717									   <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value.id)@>"
2718										  class="previewBtn"
2719										  style="font-size: 14px; font-weight: 500; text-decoration: none; color: #064400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2720										   <span class="text-primary" style="color:#064400;">
2721											   <@ if(value.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2722											   <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#064400;"></i></span>
2723										   </span>
2724									   </a>
2725								   <@}@>
2726							   </div>
2727						 
2728							   <!-- Time -->
2729							   <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2730								   <p class="text-primary course-asset-time"
2731									  style="font-size: 14px; font-weight: 500; color:#064400 !important; margin: 0;">
2732									   <@ if(value.duration && value.duration > 0) { @>
2733										   <@ print(millisecondsToHHMMSSStr(value.duration)) @>
2734									   <@ } else { @>
2735										   --
2736									   <@ } @>
2737								   </p>
2738							   </div>
2739						   </div>
2740					   </div>
2741                        </li>
2742                    <@ } @>
2743                </ul>
2744            
2745                <@ if(itemsCount > 5) { @>
2746                    <div style="text-align: center; margin-top: 10px;">
2747						<button style="background-color: #064400; color: white; padding: 4px 28px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
2748						onclick="
2749							var parentAccordion = this.closest('.accordion-content');
2750							parentAccordion.style.maxHeight = 'none';
2751							this.closest('.accordian-content-block').querySelectorAll('.accordian-list__item').forEach(el => el.style.display = 'block'); 
2752							this.style.display = 'none';
2753						">
2754                            View All
2755                        </button>
2756                    </div>
2757                <@ } @>
2758            </div>
2759        </div>
2760    </div>
2761    <@ }); @>
2762    <@ if(item.length > 5) { @>
2763        <div style="text-align: center; margin-top: 10px;margin-bottom: 20px;">
2764            <button style="background-color: #064400; color: white; padding: 8px 32px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
2765                onclick="document.querySelectorAll('.accordion-syllabus-item').forEach(el => el.style.display = 'block'); this.style.display = 'none';">
2766                View All Sessions
2767            </button>
2768        </div>
2769    <@ } @>
2770</div>
2771	</div>
2772</script>
2772
2773
2774
2775
2776<!--Dusk Curriculum 9-->
2777<script>
2778	// Simple responsive positioning
2779	function updatePosition() {
2780		const element = document.getElementById('totalTimeElement');
2781		if(element){
2782		if (window.innerWidth > 768) {
2783			element.style.position = 'absolute';
2784			element.style.top = "5px";
2785			element.style.right = '122px';
2786		} else {
2787			element.style.position = 'static';
2788			element.style.margin = '0 0';
2789		}
2790		}
2791	}
2792	
2793	// Run on load and resize
2794	window.addEventListener('load', updatePosition);
2795	window.addEventListener('resize', updatePosition);
2796	</script>
2796
2797 
2797<script>
2798	// Simple responsive positioning
2799	function updatePosition() {
2800		const element = document.getElementById('totalTimeElement');
2801		if(element){
2802		if (window.innerWidth > 768) {
2803			element.style.position = 'absolute';
2804			element.style.top = "5px";
2805			element.style.right = '122px';
2806		} else {
2807			element.style.position = 'static';
2808			element.style.margin = '0 0';
2809		}
2810		}
2811	}
2812	
2813	// Run on load and resize
2814	window.addEventListener('load', updatePosition);
2815	window.addEventListener('resize', updatePosition);
2816	</script>
2816
2817 
2817<script type="text/template" id="coursecurr-9-template">
2818	<div class="total-time" id="totalTimeElement" style="
2819    font-size: 18px;
2820    font-weight: 600;
2821    color: #282400;
2822    padding: 8px 12px;
2823    border-radius: 4px;
2824    white-space: nowrap;">
2825     <@if(summary.durations && summary.durations>0 && curriculumAssetInfo){@>
2826        <@print(millisecondsToHHMMSSStr(summary.durations))@>
2827    <@}@>
2828</div>
2829
2830<div class="accordion-syllabus" style="max-width:1000px !important">
2831    <@ $.each(item, function(index, value) { @>
2832    <div class="accordion-syllabus-item" style="<@ if(index >= 5) { @> display: none; <@ } @>">
2833        <header class="accordion-syllabus-header" style="background:#F5F5F5 !important; border-radius:8px;box-shadow:none;padding:20px !important">
2834            <h4 class="accordion-syllabus-header__title">
2835                <span class="text-primary" style="font-size:18px ; font-weight:600; color:black;"> 
2836                    <@if(index < 9) {@>  
2837                        Week <@print(index + 1)@>:  
2838                    <@ } else {@>  
2839                        Week <@print(index + 1)@>:
2840                    <@ } @>  
2841                </span>
2842                <p style="font-size:18px ; font-weight:600;"><@print(value.title)@> <span class="text-primary show-sm" style="font-size: 14px;">
2843                    <@if(value && value.items){@>
2844                        <@ print(value.items.length) @> attachment(s) 
2845                    <@} else {@>
2846                        1 attachment(s)
2847                    <@}@>
2848                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2849						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2850					<@}@>
2851                </span></p>
2852            </h4>
2853			
2854            <div class="accordion-syllabus-header__info">
2855                <p class="text-primary hide-sm" style="color:#282400 !important;">
2856                    <@if(value && value.items){@>
2857                        <@ print(value.items.length) @> attachment(s) 
2858                    <@} else {@>
2859                        1 attachment(s)
2860                    <@}@>
2861                    <@if(value.moduleDurations && curriculumAssetInfo){@>
2862						• <@print(millisecondsToHHMMSSStr(value.moduleDurations))@>
2863					<@}@>
2864                </p>
2865                <div class="accordion-syllabus-header__icon text-primary">
2866                    <i class="fa fa-angle-left" aria-hidden="true" style="color:#282400;"></i>
2867                </div>
2868            </div>
2869        </header>
2870        <div class="accordion-content" style="filter:none;background:transparent !important;">
2871            <div class="accordian-content-block" style="background:transparent !important;box-shadow:none;padding:16px 66px 3px 69px !important;">
2872                <ul class="accordian-list">
2873                    <@ var itemsCount = value['items'] ? value['items'].length : 0; @>
2874                    <@ if(value['items'] && value['items'].length > 0) { @>
2875                        <@ $.each(value['items'], function(index1, value1) { @>
2876                        <li class="accordian-list__item" style="padding:0px 0px !important;<@ if(index1 >= 5) { @> display: none; <@ } @>"> 
2877							<style>
2878								@media (max-width: 768px) {
2879								  .accordian-content-card {
2880									flex-direction: column !important;
2881									align-items: stretch !important;
2882								  }
2883							  
2884								  .accordian-content-card__top {
2885									flex-direction: row !important;
2886									justify-content: space-between !important;
2887									align-items: center !important;
2888									width: 100% !important;
2889								  }
2890							  
2891								  .accordian-content-card__title {
2892									flex: 1 !important;
2893									margin: 0 10px !important;
2894									white-space: nowrap;
2895									overflow: hidden;
2896									text-overflow: ellipsis;
2897								  }
2898							  
2899								  .accordian-content-card__bottom {
2900									flex-direction: row !important;
2901									justify-content: space-between !important;
2902									align-items: center !important;
2903									width: 100% !important;
2904									margin-top: 6px !important;
2905								  }
2906							  
2907								  .accordian-content-card__link {
2908									flex: 1 !important;
2909									min-width: 0 !important;
2910									text-align: left !important;
2911								  }
2912							  
2913								  .accordian-content-card__time {
2914									flex-shrink: 0 !important;
2915									text-align: right !important;
2916								  }
2917								}
2918							  </style>
2919							  
2920							  <div class="accordian-content-card"
2921     style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2922
2923							  
2924								<!-- Row 1: Icon + Title + Collapse Icon -->
2925								<div class="accordian-content-card__top"
2926									 style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2927							  
2928								  <!-- Icon -->
2929								  <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2930									<@ if(value1.type == 'code'){ @>
2931									  <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
2932									<@ } else { @>
2933									  <span class="material-icons text-primary" style="color:#282400; font-size: 24px;">
2934										<@ print(getCourseAssetIcon(value1.type))@>
2935									  </span>
2936									<@ } @>
2937								  </div>
2938							  
2939								  <!-- Title -->
2940								  <div class="accordian-content-card__title"
2941									   style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
2942									<@print(value1.title)@>
2943								  </div>
2944							  
2945								  <!-- Collapse Icon (optional) -->
2946								  <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
2947									<!-- Example placeholder, add real icon if needed -->
2948									<!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
2949								  </div>
2950								</div>
2951							  
2952								<!-- Row 2: Preview Button and Time -->
2953								<div class="accordian-content-card__bottom"
2954									 style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
2955							  
2956								  <!-- Preview Button -->
2957								  <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
2958									<@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value1.id)){@>
2959									  <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value1.id)@>"
2960										 class="previewBtn"
2961										 style="font-size: 14px; font-weight: 500; text-decoration: none; color: #282400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
2962										<span class="text-primary" style="color:#282400;">
2963										  <@ if(value1.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
2964										  <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#282400;"></i></span>
2965										</span>
2966									  </a>
2967									<@}@>
2968								  </div>
2969							  
2970								  <!-- Time -->
2971								  <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
2972									<p class="text-primary course-asset-time"
2973									   style="font-size: 14px; font-weight: 500; color:#282400 !important; margin: 0;">
2974									  <@ if(value1.duration && value1.duration > 0) { @>
2975										<@ print(millisecondsToHHMMSSStr(value1.duration)) @>
2976									  <@ } else { @>
2977										--
2978									  <@ } @>
2979									</p>
2980								  </div>
2981							  
2982								</div>
2983							  </div>
2984							  
2985							
2986                        </li>
2987                        <@ }); @>
2988                    <@ } else { @>
2989                        <li class="accordian-list__item" style="padding:0px 0px !important;">
2990							<div class="accordian-content-card"
2991							style="display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #eee;">
2992					   
2993						   <!-- Row 1: Icon + Title + Collapse Icon -->
2994						   <div class="accordian-content-card__top"
2995								style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
2996						 
2997							   <!-- Icon -->
2998							   <div class="accordian-content-card__ico" style="flex-shrink: 0;">
2999								   <@ if(value.type == 'code'){ @>
3000									   <img src="/resources/images/CodeIcon.svg" style="width: 24px; height: 24px;">
3001								   <@ } else { @>
3002									   <span class="material-icons text-primary" style="color:#282400; font-size: 24px;">
3003										   <@ print(getCourseAssetIcon(value.type))@>
3004									   </span>
3005								   <@ } @>
3006							   </div>
3007						 
3008							   <!-- Title -->
3009							   <div class="accordian-content-card__title"
3010									style="font-weight: 400; font-size: 14px; color: #333; margin: 0 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
3011								   <@print(value.title)@>
3012							   </div>
3013						 
3014							   <!-- Collapse Icon (optional) -->
3015							   <div class="accordian-content-card__collapse" style="flex-shrink: 0;">
3016								   <!-- Example placeholder, add real icon if needed -->
3017								   <!-- <i class="fa fa-chevron-down" style="font-size: 16px;"></i> -->
3018							   </div>
3019						   </div>
3020						 
3021						   <!-- Row 2: Preview Button and Time -->
3022						   <div class="accordian-content-card__bottom"
3023								style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; flex-wrap: nowrap;">
3024						 
3025							   <!-- Preview Button -->
3026							   <div class="accordian-content-card__link" style="flex: 1; min-width: 0; text-align: left;">
3027								   <@if(summary.sampleAvailable && summary.sampleSectionIds.includes(value.id)){@>
3028									   <a href="/s/preview/courses/<@print(decodeURIComponent(summary.courseUrl).replace(/ /g,'-'))@>-<@- courseId @>#<@print(value.id)@>"
3029										  class="previewBtn"
3030										  style="font-size: 14px; font-weight: 500; text-decoration: none; color: #282400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;">
3031										   <span class="text-primary" style="color:#282400;">
3032											   <@ if(value.type == 'video') { @> Watch <@ } else {@> Preview <@ } @>
3033											   <span style="color:#000"><i class="fa fa-solid fa-arrow-up-right" style="color:#282400;"></i></span>
3034										   </span>
3035									   </a>
3036								   <@}@>
3037							   </div>
3038						 
3039							   <!-- Time -->
3040							   <div class="accordian-content-card__time" style="flex-shrink: 0; text-align: right;">
3041								   <p class="text-primary course-asset-time"
3042									  style="font-size: 14px; font-weight: 500; color:#282400 !important; margin: 0;">
3043									   <@ if(value.duration && value.duration > 0) { @>
3044										   <@ print(millisecondsToHHMMSSStr(value.duration)) @>
3045									   <@ } else { @>
3046										   --
3047									   <@ } @>
3048								   </p>
3049							   </div>
3050						   </div>
3051					   </div>
3052                        </li>
3053                    <@ } @>
3054                </ul>
3055            
3056                <@ if(itemsCount > 5) { @>
3057                    <div style="text-align: center; margin-top: 10px;">
3058						<button style="background-color: #282400; color: white; padding: 4px 28px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
3059						onclick="
3060							var parentAccordion = this.closest('.accordion-content');
3061							parentAccordion.style.maxHeight = 'none';
3062							this.closest('.accordian-content-block').querySelectorAll('.accordian-list__item').forEach(el => el.style.display = 'block'); 
3063							this.style.display = 'none';
3064						">
3065                            View All
3066                        </button>
3067                    </div>
3068                <@ } @>
3069            </div>
3070        </div>
3071    </div>
3072    <@ }); @>
3073    <@ if(item.length > 5) { @>
3074        <div style="text-align: center; margin-top: 10px;margin-bottom: 20px;">
3075            <button style="background-color: #282400; color: white; padding: 8px 32px; border: none; cursor: pointer; font-size: 16px; border-radius: 24px;" 
3076                onclick="document.querySelectorAll('.accordion-syllabus-item').forEach(el => el.style.display = 'block'); this.style.display = 'none';">
3077                View All Sessions
3078            </button>
3079        </div>
3080    <@ } @>
3081</div>
3082	</div>
3083</script>
3083
3084
3085
3086
3087
3088
3089
3090<!-- Feedback Template First -->
3091<script type="text/template" id="widget-1-template">
3092<div class="column full feedbackContainer feedback1 spectre">
3093<@if(msg){@>
3094	<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3095<@}else{@>
3096<div class="avgratingbox">
3097  <div class="flex-row" >
3098        <div class="is-box-2" >
3099           <p style="color: rgb(247, 247, 247); font-weight: 700!important; font-size: 40px!important; text-align: center; letter-spacing: 3px; padding-bottom: 0px; margin-bottom: 0px; line-height: 1; margin-top: 0px;"> 
3100			<@ if(ratings && ratings.avgRating) {@>
3101				<@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3102			<@}else{@>
3103				0
3104			<@}@>
3105		  </p>
3106          <h5 class="ratings1" style="text-align: center; margin-bottom: 0px; margin-top: 0px; line-height: 1;">  
3107          <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
3108					<@if(ratings){@> 
3109						<@ if(ratings.avgRating >= ratingsSize) {@> 
3110							<i class="icon ion-android-star"></i>&nbsp; 
3111						<@ } else if(ratings.avgRating > ratingsSize-1 && ratings.avgRating < ratingsSize) { @> 
3112							<i class="icon ion-android-star-half"></i>&nbsp;
3113						<@ } else { @> 
3114							<i class="icon ion-android-star-outline"></i>&nbsp; 
3115						<@ } @>
3116					<@} else {@>
3117						<i class="icon ion-android-star-outline"></i>&nbsp;
3118					<@}@>		
3119		  <@}@>
3120          </h5>        
3121          <p style="margin: 10px 0 0 !important;text-align: center;line-height: 1;font-size: 30px!important;"><i class="fa-light fa-users t-white"></i> </p>
3122          <p style="margin-bottom: 10px; margin-top: 0px; font-size: 12px!important; letter-spacing: 1px; font-weight: 500!important; color: rgb(247, 247, 247); text-align: center;">
3123			Total <@ if(ratings){print(ratings.total) }else{0}@> Reviews 
3124		  </p>
3125        </div>
3126        <div class="is-box-9">
3127			<@ for (i = 0; i < 5; i++) {@>
3128				<div class="box7878"> 
3129            <div style="flex:1;">							
3130					<div class="meter <@print(ratingsPer[(parseInt(i)+1)+'-star'].cls)@> nostripes">
3131                  		<span style="width: <@print(ratingsPer[(parseInt(i)+1)+'-star'].rates)@>%"></span>
3132               		</div>	
3133            </div>
3134            <div id="ratingbox">
3135              <p class="ratings2" style=" line-height: 1;">  
3136				<@ for (ratingsSize = 5; ratingsSize >=1; ratingsSize--) {@>
3137						<@if(ratingsSize>i){@>
3138							<i class="fa fa-solid fa-star-sharp text-primary"></i>&nbsp;
3139						<@} else {@>
3140							<i class="fa fa-solid fa-star-sharp"></i>&nbsp;
3141						<@}@>
3142				<@}@>
3143               <span class="t-white">					
3144					<@ if(ratings && ratings.ratingsCount){print(ratings.ratingsCount[(parseInt(5)-i)+'-stars'])}else{0} @>
3145			   </span>
3146              </p>
3147
3148            </div>
3149          </div>
3150	  	<@}@>
3151        </div>        
3152  	</div>
3153</div>
3154	<div class="bg-secondary" style="padding:15px 15px;border-radius:10px;border-top-right-radius: 0;border-top-left-radius: 0;" >
3155		<p
3156			style="font-size: 16px!important; font-weight: 500!important; letter-spacing: 1px;" class="text-primary">
3157			Reviews
3158		</p>
3159
3160<div class="review-box" id="createCustomReview" style="display:none">
3161<div class="flex-row">
3162	<div class="is-box-2 centerbox">
3163		<div class="spectre">
3164			<figure data-initial="<@if(typeof SPUSER !== 'undefined'){print(SPUSER.email.substring(0, 1))}else{@>Me<@}@>" class="uppercase avatar avatar-lg figsize" >
3165				<img src="/s/profile/thumb" alt="" class="review-pic" onerror="profileImageError(this)" data-mhash="<@ if(typeof SPUSER !== 'undefined'){print(SPUSER.mhash)} @>">
3166			</figure>	
3167			<@if(typeof SPUSER !== 'undefined'){ @><p class="review-name"><@ print(SPUSER.name) @> </p><@ } @>
3168		</div>
3169	</div>
3170	<div class="is-box-10">
3171		<textarea rows="3" class="form-input"
3172			placeholder="Add your review here"></textarea>
3173		<div class="rating3">
3174			<p id="rating-stars">
3175				<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> <i 
3176					class="fa fa-solid fa-star-sharp text-primary rating-star" data-value='<@- ratingsSize @>'></i> <@}@>
3177			</p>
3178
3179			<button class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3180				data-reviewData="reviewlist"
3181				style="padding: 2px 28px; text-transform: uppercase; border-radius: 40px;">Post</button>
3182		</div>
3183	</div>
3184</div>
3185</div>		
3186	
3187	<div id="reviewlist">
3188	<@ $.each(items, function(index, item) { @>
3189	<div class="review-box reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
3190		<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3191			<a class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3192		<@ } @>
3193		<div class="flex-row">
3194			<div class="is-box-2 centerbox">
3195				<div class="spectre">
3196					<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3197						<figure data-initial="<@if(typeof SPUSER !== 'undefined'){print(SPUSER.email.substring(0, 1))}else{@>Me<@}@>" class="uppercase avatar avatar-lg figsize" >
3198							<img src="/s/profile/thumb" alt="" class="review-pic" onerror="profileImageError(this)" data-mhash="<@ if(typeof SPUSER !== 'undefined'){print(SPUSER.mhash)} @>">
3199					<@ } else {@>	
3200					<figure data-initial="<@ print(getUserInitial(null, item.userName)) @>" class="uppercase avatar avatar-lg figsize" >
3201						<img src="/s/profile/<@- item.userId @>/thumb" alt="" class="review-pic" onerror="profileImageError(this)" data-mhash="<@ item.mhash @>">	
3202					<@ } @>
3203					</figure>
3204					<p class="review-name"><@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @><@ print(SPUSER.name) @><@ } else {@>	<@ print(item.userName) @><@ } @>	</p>
3205				</div>
3206			</div>
3207			<div class="is-box-10">
3208				<div class="rating4">
3209					<p>
3210						<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> <@
3211						if(item.rating >= ratingsSize) {@> 
3212							<i class="fa fa-solid fa-star-sharp text-primary"></i>
3213						<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3214							<i class="fa fa-solid fa-star-sharp-half text-primary"></i> 
3215						<@ } else { @> 
3216							<i class="fa fa-solid fa-star-sharp"></i> 
3217						<@}@> 
3218						<@ }@>
3219					</p>
3220					<p
3221						style="font-size: 13px!important; color: rgb(174, 170, 170); font-weight: 600!important; margin-top: 4px;">
3222						<time class="timestamp"
3223							datetime="<@ print((new Date(item.createdDate.$date)).toISOString()) @>"><@
3224							print(parseDate(item.createdDate.$date)) @></time>
3225					</p>
3226				</div>
3227				<p  class="reviewTxt"
3228					style="color: rgb(102, 102, 102); font-weight: 500!important; font-size: 13px!important; margin-bottom: 10px;"><@
3229					print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @></p>
3230				<div class="comment-tag">
3231					<@ if(item.isFeatured) {@><span>Featured Review </span><@ } @><@ if(item.isVerifiedPurchase) {@> <span>Verified Purchase </span><@ } @>
3232				</div>
3233			</div>
3234		</div>
3235	</div>
3236	<@ }); @>
3237	</div>	
3238	<button class="bg-primary loadMoreReviewsBtn reviewLMbtn" data-itemTemplate="feedback-1-item-template" data-reviewData="reviewlist" >Load More Reviews</button>
3239</div>
3240<@}@>
3241</script>
3241
3242
3243
3244<script type="text/template" id="feedback-1-item-template">
3245<div class="review-box reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>"">
3246<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3247	<a class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3248<@ } @>
3249<div class="flex-row">
3250	<div class="is-box-2 centerbox">
3251		<div class="spectre">
3252			<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3253				<figure data-initial="<@if(typeof SPUSER !== 'undefined'){print(SPUSER.email.substring(0, 1))}else{@>Me<@}@>" class="avatar avatar-lg figsize" >
3254					<img src="/s/profile/thumb" alt="" class="review-pic" onerror="profileImageError(this)" data-mhash="<@ if(typeof SPUSER !== 'undefined'){print(SPUSER.mhash)} @>">
3255			<@ } else {@>	
3256			<figure data-initial="<@ print(getUserInitial(null, item.userName)) @>" class="avatar avatar-lg figsize" >
3257				<img src="/s/profile/<@- item.userId @>/thumb" alt="" class="review-pic" onerror="profileImageError(this)" data-mhash="<@ item.mhash @>">	
3258			<@ } @>
3259			</figure>
3260			<p class="review-name"><@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @><@ print(SPUSER.name) @><@ } else {@>	<@ print(item.userName) @><@ } @>	</p>
3261		</div>
3262	</div>
3263	<div class="is-box-10">
3264		<div class="rating4">
3265			<p>
3266				<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> <@
3267				if(item.rating >= ratingsSize) {@> 
3268					<i class="fa fa-solid fa-star-sharp text-primary"></i>
3269				<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3270					<i class="fa fa-solid fa-star-sharp-half text-primary"></i>
3271				<@ } else { @> 
3272					<i class="fa fa-solid fa-star-sharp-outline"></i> 
3273				<@}@> 
3274				<@ } @>
3275			</p>
3276			<p
3277				style="font-size: 13px!important; color: rgb(174, 170, 170); font-weight: 600!important; margin-top: 4px;">
3278				<time class="timestamp"
3279					datetime="<@ print((new Date(item.createdDate.$date)).toISOString()) @>"><@
3280					print(parseDate(item.createdDate.$date)) @></time>
3281			</p>
3282		</div>
3283		<p  class="reviewTxt"
3284			style="color: rgb(102, 102, 102); font-weight: 500!important; font-size: 13px!important; margin-bottom: 10px;"><@
3285			print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @></p>
3286		<div class="comment-tag">
3287			<@ if(item.isFeatured) {@><span>Featured Review </span><@ } @><@ if(item.isVerifiedPurchase) {@> <span>Verified Purchase </span><@ } @>
3288		</div>
3289	</div>
3290</div>
3291</div>
3292</script>
3292
3293
3294
3295<!-- Feedback Template Second -->
3296<script type="text/template" id="feedback-2-template">
3297<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3298<@if(msg){@>
3299	<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3300<@}else{@>
3301<@ if(total > 0 && ratings && ratings.avgRating) {@>
3302<div class="avgratingbox">
3303<div class="column third">
3304   <div class="is-card avgRatingContainer" >
3305      <div class="avgRatingInnerContainer">
3306         <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;">Customer ratings</h3>
3307         <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3308            <i class="icon ion-android-star text-primary" style="font-size: 80px;"></i>
3309            <div style="margin-left: 25px;">
3310               <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3311                  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800; color: var(--themeColor); line-height: 1.3;">
3312                     <@ if(ratings && ratings.avgRating) {@>
3313                     <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3314                     <@}else{@>
3315                     0
3316                     <@}@>
3317                  </h3>
3318                  <p class="avgRatingReviews">/5</p>
3319               </span>
3320               <p class="avgRatingReviews">
3321                  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3322               </p>
3323            </div>
3324         </div>
3325      </div>
3326   </div>
3327</div>
3328</div>
3329<@ } @>
3330<div id="feedback2Reviewlist" class="reviewslist">
3331   <@ $.each(items, function(index, item) { @>
3332   		<@ var template = _.template($("#feedback-2-item-template").html()); print(template({item: item})) @>
3333   <@ }); @>
3334   <@}@>
3335</div>
3336<div class="row clearfix">
3337   <div class="column full">
3338      <p class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-2-item-template" data-reviewData="feedback2Reviewlist" style="text-align: right; font-size: 14px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none;">
3339         View more
3340      </p>
3341   </div>
3342</div>
3343</script>
3343
3344
3345<script type="text/template" id="feedback-2-item-template">
3346	<div class="column third reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
3347      <div class="is-card avgRatingContainer">
3348         <div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;" >
3349			<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3350				<a class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3351			<@ } @>
3352            <p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 80px; max-height: 80px; overflow: hidden;">
3353   			<@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
3354   		 	</p>
3355			<div class="reviewerName">
3356           	<p style="font-size: 12px; font-weight: 500; line-height: 1.3;  text-align: left; padding-top: 0px; margin:0px;">
3357   				<@ print(item.userName) @>
3358   		 	</p></div>
3359			
3360			 <p style="margin: 0px;">
3361				<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> 
3362					<@ if(item.rating >= ratingsSize) {@> 
3363						<i class="fa fa-solid fa-star-sharp text-primary"></i>
3364					<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3365						<i class="fa fa-solid fa-star-sharp-half text-primary"></i> 
3366					<@ } @> 
3367				<@ }@>
3368			 </p>		
3369
3370      	 </div>
3371	  </div>	
3372   </div>
3373</script>
vendor: 1 bytes, line 3373
3373
3374<script type="text/template" id="feedback-2-createTemplate">
3375	<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
3376  <div class="is-boxes">
3377    <div class="is-box-centered">
3378      <div class="is-container container" style="max-width: 940px;">
3379	
3380		<div class="review-box review-add-box">
3381            <div class="is-container container is-content-800" >
3382               <div class="row clearfix" >
3383                  <div class="column full" >
3384                     <h1 style="text-align: center; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: 0px; color: var(--themeColor); margin-bottom: 44px;">Add a review</h1>
3385                  </div>
3386               </div>
3387               <div class="textarea-cont">
3388                  <div class="review-star text-primary" style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;">
3389					<span id="rating-stars">
3390                     <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> <i 
3391                        class="fa fa-solid fa-star-sharp rating-star" data-value='<@- ratingsSize @>'></i> <@}@>
3392					</span>
3393                  </div>
3394                  <textarea class="add-review-textarea" id="reviewText" style="background: transparent;width: 100%; border-width: 0px; padding-right: 28px; padding-bottom: 28px; min-height: 150px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;" placeholder="Add your review here"></textarea>
3395                  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
3396						<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-top: 0px;"><@ print(SPUSER.name) @></p>
3397				<@ } @>
3398               </div>
3399               <div  style="margin-top: 20px; display: flex; justify-content: flex-end;">
3400                  <button id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3401					data-reviewData="feedback2Reviewlist" disabled >Submit</button>
3402               </div>
3403            </div>
3404		</div>
3405		</div>
3406		</div>
3407	</div>
3408</div>
3409</script>
3409
3410
3411<!-- Vegas 4th feedback Template-->
3412
3413
3414<script type="text/template" id="feedback-4-template">
3415	<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3416	<@if(msg){@>
3417		<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3418	<@}else{@>
3419	<@ if(total > 0 && ratings && ratings.avgRating) {@>
3420	<div class="avgratingbox">
3421	<div class="column third">
3422	   <div class="is-card avgRatingContainer" style="border-radius:16px !important ; padding:20px ;border:1px solid #E5E5E5 !important;" >
3423		  <div class="avgRatingInnerContainer">
3424			 <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;">Customer ratings</h3>
3425			 <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3426				<i class="icon ion-android-star text-primary" style="font-size: 80px;"></i>
3427				<div style="margin-left: 25px;">
3428				   <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3429					  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800; color: var(--themeColor); line-height: 1.3;">
3430						 <@ if(ratings && ratings.avgRating) {@>
3431						 <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3432						 <@}else{@>
3433						 0
3434						 <@}@>
3435					  </h3>
3436					  <p class="avgRatingReviews">/5</p>
3437				   </span>
3438				   <p class="avgRatingReviews">
3439					  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3440				   </p>
3441				</div>
3442			 </div>
3443		  </div>
3444	   </div>
3445	</div>
3446	</div>
3447	<@ } @>
3448	<div id="feedback4Reviewlist" class="reviewslist">
3449	   <@ $.each(items, function(index, item) { @>
3450			   <@ var template = _.template($("#feedback-4-item-template").html()); print(template({item: item})) @>
3451	   <@ }); @>
3452	   <@}@>
3453	</div>
3454	<div class="row clearfix">
3455	   <div class="column full" style="text-align: center;">
3456		  <a class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-4-item-template" data-reviewData="feedback4Reviewlist" style="text-align: center; font-size: 16px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none; background:#FB5607; color:white; padding:12px 28px; border-radius:24px;text-decoration:none;">
3457			View All Reviews
3458		  </a>
3459	   </div>
3460	</div>
3461	</script>
3461
3462	
3463	
3463<script type="text/template" id="feedback-4-item-template">
3464		<div class="column third reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
3465		  <div class="is-card avgRatingContainer" style="border:1px solid #E5E5E5 !important; border-radius:16px !important;background:white; padding:20px; ">
3466			 <div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;" >
3467				<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3468					<a  style="color:#FB5607 !important;" class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3469				<@ } @>
3470				<p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 82px; max-height: 80px; overflow: hidden;">
3471				   <@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
3472					</p>
3473				<div class="reviewerName">
3474				   <p style="font-size: 12px; font-weight: 500; line-height: 1.3;  text-align: left; padding-top: 0px; margin:0px; opacity:0.5;">
3475					   <@ print(item.userName) @>
3476					</p></div>
3477				
3478				 <p style="margin: 0px;">
3479					<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> 
3480						<@ if(item.rating >= ratingsSize) {@> 
3481							<i class="fa fa-solid fa-star-sharp text-primary" style="color:#FB5607 !important;"></i>
3482						<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3483							<i class="fa fa-solid fa-star-sharp-half text-primary" style="color:#FB5607 !important;"></i> 
3484						<@ } @> 
3485					<@ }@>
3486				 </p>		
3487	
3488			   </div>
3489		  </div>	
3490	   </div>
3491	</script>
3491
3492	
3492<script type="text/template" id="feedback-4-createTemplate">
3493		<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
3494	  <div class="is-boxes">
3495		<div class="is-box-centered">
3496		  <div class="is-container container" style="max-width: 1200px;">
3497		
3498			<div class="review-box review-add-box">
3499				<div class="is-container container is-content-1200" >
3500				   <div class="row clearfix" >
3501					  <div class="column full" >
3502						 <h1 style="text-align: left; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0px; color: black; ">Add a review</h1>
3503					  </div>
3504				   </div>
3505				   <div class="textarea-cont">
3506					<div style="display:flex; gap:30px;">
3507						<div><h3 style="font-size:18px;font-weight:600;">Overall Rating</h3></div>
3508						<div class="review-star1 text-primary" 
3509						style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;margin-left:0px !important;margin:0px !important">
3510					   <span id="rating-stars" >
3511						   <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
3512							   <i class="fa fa-solid fa-star-sharp rating-star" 
3513								  data-value='<@- ratingsSize @>' 
3514								  style="width: 20px; height: 20px; text-align: center; flex-shrink: 0; margin: 0; padding: 0;"></i>
3515						   <@}@>
3516					   </span>
3517				   </div>
3518				   <style></style>
3519				   
3520				   
3521					</div>
3522					  <textarea class="add-review-textarea" id="reviewText" style="background:#E5E5E5;width: 100%; border: 1px solid #E5E5E5; padding-right: 28px; padding-bottom: 28px; min-height: 180px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;border-radius:16px !important" placeholder="Add your review here"></textarea>
3523					  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
3524							<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-top: 0px;"><@ print(SPUSER.name) @></p>
3525					<@ } @>
3526				   </div>
3527				   <div  style=" display: flex; justify-content: center;">
3528					  <button style="letter-spacing:0px !important ; background-color:#FB5607;padding:12px 28px !important;" id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3529						data-reviewData="feedback4Reviewlist" disabled >Submit</button>
3530				   </div>
3531				</div>
3532			</div>
3533			</div>
3534			</div>
3535		</div>
3536	</div>
3537	</script>
3537
3538	
3539
3540
3541
3542<!-- Blaze 5th feedback Template-->
3543<script type="text/template" id="feedback-5-template">
3544	<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3545	<@if(msg){@>
3546		<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3547	<@}else{@>
3548	<@ if(total > 0 && ratings && ratings.avgRating) {@>
3549	<div class="avgratingbox">
3550	<div class="column third">
3551	   <div class="is-card avgRatingContainer" style="background:#232323; border-radius:0px;padding:21px;" >
3552		  <div class="avgRatingInnerContainer">
3553			 <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;color:white;">Customer ratings</h3>
3554			 <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3555				<i class="icon ion-android-star text-primary" style="font-size: 80px;color:rgb(216, 253, 70);"></i>
3556				<div style="margin-left: 25px;">
3557				   <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3558					  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800; color: rgb(216, 253, 70); line-height: 1.3;">
3559						 <@ if(ratings && ratings.avgRating) {@>
3560						 <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3561						 <@}else{@>
3562						 0
3563						 <@}@>
3564					  </h3>
3565					  <p class="avgRatingReviews" style="color:white;">/5</p>
3566				   </span>
3567				   <p class="avgRatingReviews" style="color:white;">
3568					  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3569				   </p>
3570				</div>
3571			 </div>
3572		  </div>
3573	   </div>
3574	</div>
3575	</div>
3576	<@ } @>
3577	<div id="feedback5Reviewlist" class="reviewslist">
3578	   <@ $.each(items, function(index, item) { @>
3579			   <@ var template = _.template($("#feedback-5-item-template").html()); print(template({item: item})) @>
3580	   <@ }); @>
3581	   <@}@>
3582	</div>
3583	<div class="row clearfix">
3584	   <div class="column full" style="text-align: center;">
3585		  <a class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-5-item-template" data-reviewData="feedback5Reviewlist" style="text-align: center; font-size: 16px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none; background:#D8FD46; color:black; padding:12px 28px; border-radius:0px;text-decoration:none;">
3586			View All Reviews
3587		  </a>
3588	   </div>
3589	</div>
3590	</script>
3590
3591	
3592	
3593	
3593<script type="text/template" id="feedback-5-item-template">
3594		<style>
3595			.template5-review .reviewTxt{
3596				color:white !important;
3597			}
3598			.template5-review .reviewerName p{
3599				color:white !important;
3600			}
3601		</style>
3602		<div class="column third reviewcontainer template5-review <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id) { @> selfreview <@ } @>">
3603			<div class="is-card avgRatingContainer" style="border:1px solid #232323;padding:20px;">
3604				<div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;">
3605					<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id) { @>
3606						<a style="color:#D8FD46 !important;" class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>">
3607							<i class="material-icons">delete</i>
3608						</a>
3609					<@ } @>
3610					<p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 82px; max-height: 80px; overflow: hidden;">
3611						<@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
3612					</p>
3613					<div class="reviewerName">
3614						<p style="font-size: 12px; font-weight: 500; line-height: 1.3; text-align: left; padding-top: 0px; margin:0px; opacity:0.5; ">
3615							<@ print(item.userName) @>
3616						</p>
3617					</div>
3618	
3619					<p style="margin: 0px;">
3620						<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) { @>
3621							<@ if(item.rating >= ratingsSize) { @>
3622								<i class="fa fa-solid fa-star-sharp text-primary" style="color:#D8FD46 !important;"></i>
3623							<@ } else if(item.rating > ratingsSize - 1 && item.rating < ratingsSize) { @>
3624								<i class="fa fa-solid fa-star-sharp-half text-primary" style="color:#D8FD46 !important;"></i>
3625							<@ } @>
3626						<@ } @>
3627					</p>
3628				</div>
3629			</div>
3630		</div>
3631	</script>
3631
3632	
3633	
3633<script type="text/template" id="feedback-5-createTemplate">
3634		<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
3635	  <div class="is-boxes">
3636		<div class="is-box-centered" style="background:#181818;">
3637		  <div class="is-container container" style="max-width: 1200px;">
3638		
3639			<div class="review-box review-add-box">
3640				<div class="is-container container is-content-1200" >
3641				   <div class="row clearfix" >
3642					  <div class="column full" >
3643						 <h1 style="text-align: left; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0px; color: white; ">Add a review</h1>
3644					  </div>
3645				   </div>
3646				   <div class="textarea-cont" style="background:transparent">
3647					<div style="display:flex; gap:30px;">
3648						<div><h3 style="font-size:18px;font-weight:600; color:white;">Overall Rating</h3></div>
3649						<div class="review-star text-primary" 
3650						style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;margin-left:0px !important;margin:0px !important">
3651					   <span id="rating-stars" >
3652						   <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
3653							   <i class="fa fa-solid fa-star-sharp rating-star" 
3654								  data-value='<@- ratingsSize @>' 
3655								  style="width: 20px; height: 20px; text-align: center; flex-shrink: 0; margin: 0; padding: 0;"></i>
3656						   <@}@>
3657					   </span>
3658				   </div>
3659				   
3660				   
3661					</div>
3662					  <textarea class="add-review-textarea" id="reviewText" style="color:white;background:#232323;width: 100%; border: 1px solid #636363; padding: 28px;  min-height: 180px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;border-radius:0px !important" placeholder="Add your review here"></textarea>
3663					  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
3664							<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-top: 0px;"><@ print(SPUSER.name) @></p>
3665					<@ } @>
3666				   </div>
3667				   <div  style=" display: flex; justify-content: center;margin-top:20px;">
3668					  <button style="letter-spacing:0px !important ; background-color:#D8FD46;padding:12px 28px !important; border-radius:0px !important; color:black;" id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3669						data-reviewData="feedback5Reviewlist" disabled >Submit</button>
3670				   </div>
3671				</div>
3672			</div>
3673			</div>
3674			</div>
3675		</div>
3676	</div>
3677	</script>
3677
3678
3679
3680
3681
3682
3683
3684
3685
3686
3687
3688
3689
3690
3691
3692
3693<!-- Nebula Feedback 6-->
3694
3695<script type="text/template" id="feedback-6-template">
3696	<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3697	<@if(msg){@>
3698		<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3699	<@}else{@>
3700	<@ if(total > 0 && ratings && ratings.avgRating) {@>
3701	<div class="avgratingbox">
3702	<div class="column third">
3703	   <div class="is-card avgRatingContainer" style="border-radius:16px !important ; padding:20px ;border:1px solid #E5E5E5 !important;" >
3704		  <div class="avgRatingInnerContainer">
3705			 <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;">Customer ratings</h3>
3706			 <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3707				<i class="icon ion-android-star text-primary" style="font-size: 80px;    color: #6715FF !important;"></i>
3708				<div style="margin-left: 25px;">
3709				   <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3710					  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800;     color: #6715FF !important; line-height: 1.3;">
3711						 <@ if(ratings && ratings.avgRating) {@>
3712						 <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3713						 <@}else{@>
3714						 0
3715						 <@}@>
3716					  </h3>
3717					  <p class="avgRatingReviews">/5</p>
3718				   </span>
3719				   <p class="avgRatingReviews">
3720					  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3721				   </p>
3722				</div>
3723			 </div>
3724		  </div>
3725	   </div>
3726	</div>
3727	</div>
3728	<@ } @>
3729	<div id="feedback6Reviewlist" class="reviewslist">
3730	   <@ $.each(items, function(index, item) { @>
3731			   <@ var template = _.template($("#feedback-6-item-template").html()); print(template({item: item})) @>
3732	   <@ }); @>
3733	   <@}@>
3734	</div>
3735	<div class="row clearfix">
3736	   <div class="column full" style="text-align: center;">
3737		  <a class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-6-item-template" data-reviewData="feedback6Reviewlist" style="text-align: center; font-size: 16px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none; background:#6715FF; color:white; padding:12px 28px; border-radius:24px;text-decoration:none;">
3738			View All Reviews
3739		  </a>
3740	   </div>
3741	</div>
3742	</script>
3742
3743	
3744	
3744<script type="text/template" id="feedback-6-item-template">
3745		<div class="column third reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
3746		  <div class="is-card avgRatingContainer" style="border:1px solid #E5E5E5 !important; border-radius:16px !important;background:white; padding:20px; ">
3747			 <div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;" >
3748				<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3749					<a  style="color:#6715FF !important;" class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3750				<@ } @>
3751				<p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 82px; max-height: 80px; overflow: hidden;">
3752				   <@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
3753					</p>
3754				<div class="reviewerName">
3755				   <p style="font-size: 12px; font-weight: 500; line-height: 1.3;  text-align: left; padding-top: 0px; margin:0px; opacity:0.5;">
3756					   <@ print(item.userName) @>
3757					</p></div>
3758				
3759				 <p style="margin: 0px;">
3760					<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> 
3761						<@ if(item.rating >= ratingsSize) {@> 
3762							<i class="fa fa-solid fa-star-sharp text-primary" style="color:#6715FF !important;"></i>
3763						<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3764							<i class="fa fa-solid fa-star-sharp-half text-primary" style="color:#6715FF !important;"></i> 
3765						<@ } @> 
3766					<@ }@>
3767				 </p>		
3768	
3769			   </div>
3770		  </div>	
3771	   </div>
3772	</script>
3772
3773	
3773<script type="text/template" id="feedback-6-createTemplate">
3774		<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
3775	  <div class="is-boxes">
3776		<div class="is-box-centered">
3777		  <div class="is-container container" style="max-width: 1200px;">
3778		
3779			<div class="review-box review-add-box">
3780				<div class="is-container container is-content-1200" >
3781				   <div class="row clearfix" >
3782					  <div class="column full" >
3783						 <h1 style="text-align: left; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0px; color: black; ">Add a review</h1>
3784					  </div>
3785				   </div>
3786				   <div class="textarea-cont" style="background:transparent">
3787					<div style="display:flex; gap:30px;">
3788						<div><h3 style="font-size:18px;font-weight:600;">Overall Rating</h3></div>
3789						<div class="review-star1 text-primary" 
3790						style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;margin-left:0px !important;margin:0px !important">
3791					   <span id="rating-stars" >
3792						   <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
3793							   <i class="fa fa-solid fa-star-sharp rating-star" 
3794								  data-value='<@- ratingsSize @>' 
3795								  style="width: 20px; height: 20px; text-align: center; flex-shrink: 0; margin: 0; padding: 0;"></i>
3796						   <@}@>
3797					   </span>
3798				   </div>
3799				   <style></style>
3800				   
3801				   
3802					</div>
3803					  <textarea class="add-review-textarea" id="reviewText" style="background:white;width: 100%; border: 1px solid #c3c0c0; padding-right: 28px; padding-bottom: 28px;padding-left:20px; min-height: 180px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;border-radius:16px !important" placeholder="Add your review here"></textarea>
3804					  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
3805							<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: grey; margin-top: 0px;"><@ print(SPUSER.name) @></p>
3806					<@ } @>
3807				   </div>
3808				   <div  style=" display: flex; justify-content: center;">
3809					  <button style="letter-spacing:0px !important ; background-color:#6715FF;padding:12px 28px !important;margin-top:30px;" id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3810						data-reviewData="feedback6Reviewlist" disabled >Submit</button>
3811				   </div>
3812				</div>
3813			</div>
3814			</div>
3815			</div>
3816		</div>
3817	</div>
3818	</script>
3818
3819
3820
3821
3822
3823
3824<!-- Olive Feedback 7-->
3825<script type="text/template" id="feedback-7-template">
3826	<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3827	<@if(msg){@>
3828		<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3829	<@}else{@>
3830	<@ if(total > 0 && ratings && ratings.avgRating) {@>
3831	<div class="avgratingbox">
3832	<div class="column third">
3833	   <div class="is-card avgRatingContainer" style="border-radius:16px !important ; padding:20px ;border:1px solid #E5E5E5 !important;" >
3834		  <div class="avgRatingInnerContainer">
3835			 <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;">Customer ratings</h3>
3836			 <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3837				<i class="icon ion-android-star text-primary" style="font-size: 80px;    color: #064400 !important;"></i>
3838				<div style="margin-left: 25px;">
3839				   <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3840					  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800;     color: #064400 !important; line-height: 1.3;">
3841						 <@ if(ratings && ratings.avgRating) {@>
3842						 <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3843						 <@}else{@>
3844						 0
3845						 <@}@>
3846					  </h3>
3847					  <p class="avgRatingReviews">/5</p>
3848				   </span>
3849				   <p class="avgRatingReviews">
3850					  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3851				   </p>
3852				</div>
3853			 </div>
3854		  </div>
3855	   </div>
3856	</div>
3857	</div>
3858	<@ } @>
3859	<div id="feedback7Reviewlist" class="reviewslist">
3860	   <@ $.each(items, function(index, item) { @>
3861			   <@ var template = _.template($("#feedback-7-item-template").html()); print(template({item: item})) @>
3862	   <@ }); @>
3863	   <@}@>
3864	</div>
3865	<div class="row clearfix">
3866	   <div class="column full" style="text-align: center;">
3867		  <a class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-7-item-template" data-reviewData="feedback7Reviewlist" style="text-align: center; font-size: 16px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none; background:#064400; color:white; padding:12px 28px; border-radius:24px;text-decoration:none;">
3868			View All Reviews
3869		  </a>
3870	   </div>
3871	</div>
3872	</script>
3872
3873	
3874	
3874<script type="text/template" id="feedback-7-item-template">
3875		<div class="column third reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
3876		  <div class="is-card avgRatingContainer" style="border:1px solid #E5E5E5 !important; border-radius:16px !important;background:white; padding:20px; ">
3877			 <div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;" >
3878				<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
3879					<a  style="color:#064400 !important;" class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
3880				<@ } @>
3881				<p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 82px; max-height: 80px; overflow: hidden;">
3882				   <@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
3883					</p>
3884				<div class="reviewerName">
3885				   <p style="font-size: 12px; font-weight: 500; line-height: 1.3;  text-align: left; padding-top: 0px; margin:0px; opacity:0.5;">
3886					   <@ print(item.userName) @>
3887					</p></div>
3888				
3889				 <p style="margin: 0px;">
3890					<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> 
3891						<@ if(item.rating >= ratingsSize) {@> 
3892							<i class="fa fa-solid fa-star-sharp text-primary" style="color:#064400 !important;"></i>
3893						<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
3894							<i class="fa fa-solid fa-star-sharp-half text-primary" style="color:#064400 !important;"></i> 
3895						<@ } @> 
3896					<@ }@>
3897				 </p>		
3898	
3899			   </div>
3900		  </div>	
3901	   </div>
3902	</script>
3902
3903	
3903<script type="text/template" id="feedback-7-createTemplate">
3904		<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
3905	  <div class="is-boxes">
3906		<div class="is-box-centered">
3907		  <div class="is-container container" style="max-width: 1200px;">
3908		
3909			<div class="review-box review-add-box">
3910				<div class="is-container container is-content-1200" >
3911				   <div class="row clearfix" >
3912					  <div class="column full" >
3913						 <h1 style="text-align: left; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0px; color: black; ">Add a review</h1>
3914					  </div>
3915				   </div>
3916				   <div class="textarea-cont">
3917					<div style="display:flex; gap:30px;">
3918						<div><h3 style="font-size:18px;font-weight:600;">Overall Rating</h3></div>
3919						<div class="review-star1 text-primary" 
3920						style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;margin-left:0px !important;margin:0px !important">
3921					   <span id="rating-stars" >
3922						   <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
3923							   <i class="fa fa-solid fa-star-sharp rating-star" 
3924								  data-value='<@- ratingsSize @>' 
3925								  style="width: 20px; height: 20px; text-align: center; flex-shrink: 0; margin: 0; padding: 0;"></i>
3926						   <@}@>
3927					   </span>
3928				   </div>
3929				   <style></style>
3930				   
3931				   
3932					</div>
3933					  <textarea class="add-review-textarea" id="reviewText" style="background:#E5E5E5;width: 100%; border: 1px solid #E5E5E5; padding-right: 28px; padding-bottom: 28px;padding-left:20px; min-height: 180px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;border-radius:16px !important" placeholder="Add your review here"></textarea>
3934					  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
3935							<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-top: 0px;"><@ print(SPUSER.name) @></p>
3936					<@ } @>
3937				   </div>
3938				   <div  style=" display: flex; justify-content: center;">
3939					  <button style="letter-spacing:0px !important ; background-color:#064400;padding:12px 28px !important;" id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
3940						data-reviewData="feedback7Reviewlist" disabled >Submit</button>
3941				   </div>
3942				</div>
3943			</div>
3944			</div>
3945			</div>
3946		</div>
3947	</div>
3948	</script>
3948
3949
3950
3951
3952
3953	<!--Dusk Feedback-8-->
3954	
3954<script type="text/template" id="feedback-8-template">
3955		<div class="column full feedbackContainer feedback2 spectre <@- total @>" style="padding: 0;">
3956		<@if(msg){@>
3957			<h4 style="letter-spacing: 2px; text-align: center;"><@print(msg)@></h4>
3958		<@}else{@>
3959		<@ if(total > 0 && ratings && ratings.avgRating) {@>
3960		<div class="avgratingbox">
3961		<div class="column third">
3962		   <div class="is-card avgRatingContainer" style="border-radius:16px !important ; padding:20px ;border:1px solid #E5E5E5 !important;background:#F5F5F5;" >
3963			  <div class="avgRatingInnerContainer">
3964				 <h3 style="font-weight: 800; font-size: 12px; line-height: 1.3; margin-bottom: 0px;">Customer ratings</h3>
3965				 <div  style="display: flex; flex-direction: row; align-items: center; justify-content: center;">
3966					<i class="icon ion-android-star text-primary" style="font-size: 80px;    color: #282400 !important;"></i>
3967					<div style="margin-left: 25px;">
3968					   <span style="display: flex; justify-content: flex-start; align-items: baseline;">
3969						  <h3 style="margin-top: 0px; margin-bottom: 0px; font-size: 32px; font-weight: 800;     color: #282400 !important; line-height: 1.3;">
3970							 <@ if(ratings && ratings.avgRating) {@>
3971							 <@ print(parseFloat(ratings.avgRating.toFixed(1))) @>
3972							 <@}else{@>
3973							 0
3974							 <@}@>
3975						  </h3>
3976						  <p class="avgRatingReviews">/5</p>
3977					   </span>
3978					   <p class="avgRatingReviews">
3979						  <@ if(ratings){print(ratings.total) }else{0}@> reviews
3980					   </p>
3981					</div>
3982				 </div>
3983			  </div>
3984		   </div>
3985		</div>
3986		</div>
3987		<@ } @>
3988		<div id="feedback8Reviewlist" class="reviewslist">
3989		   <@ $.each(items, function(index, item) { @>
3990				   <@ var template = _.template($("#feedback-8-item-template").html()); print(template({item: item})) @>
3991		   <@ }); @>
3992		   <@}@>
3993		</div>
3994		<div class="row clearfix">
3995		   <div class="column full" style="text-align: center;">
3996			  <a class="loadMoreReviewsBtn reviewLMbtn text-primary" data-itemTemplate="feedback-8-item-template" data-reviewData="feedback8Reviewlist" style="text-align: center; font-size: 16px; font-weight: 500;cursor: pointer;line-height: 1.5;display: none; background:#282400; color:white; padding:12px 28px; border-radius:24px;text-decoration:none;">
3997				View All Reviews
3998			  </a>
3999		   </div>
4000		</div>
4001		</script>
4001
4002		
4003		
4003<script type="text/template" id="feedback-8-item-template">
4004			<div class="column third reviewcontainer <@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>selfreview<@ } @>">
4005			  <div class="is-card avgRatingContainer" style="border:1px solid #E5E5E5 !important; border-radius:16px !important;background:#F5F5F5; padding:20px; ">
4006				 <div style="text-align: center; display: flex; flex-direction: column; align-items: flex-start;" >
4007					<@ if(typeof SPUSER !== 'undefined' && item["userId"] === SPUSER.id)	{ @>
4008						<a  style="color:#282400 !important;" class="btn btn-link float-right deleteCurrentReviewBtn" data-id="<@ print(item['_id']) @>"><i class="material-icons">delete</i></a>
4009					<@ } @>
4010					<p class="reviewTxt" style="font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 25px; margin-top: 0px; min-height: 82px; max-height: 80px; overflow: hidden;">
4011					   <@ print(item.reviewtext.replace(/</g,'&lt;').replace(/>/g,'&gt;')) @>
4012						</p>
4013					<div class="reviewerName">
4014					   <p style="font-size: 12px; font-weight: 500; line-height: 1.3;  text-align: left; padding-top: 0px; margin:0px; opacity:0.5;">
4015						   <@ print(item.userName) @>
4016						</p></div>
4017					
4018					 <p style="margin: 0px;">
4019						<@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@> 
4020							<@ if(item.rating >= ratingsSize) {@> 
4021								<i class="fa fa-solid fa-star-sharp text-primary" style="color:#282400 !important;"></i>
4022							<@ } else if(item.rating > ratingsSize-1 && item.rating < ratingsSize) { @> 
4023								<i class="fa fa-solid fa-star-sharp-half text-primary" style="color:#282400 !important;"></i> 
4024							<@ } @> 
4025						<@ }@>
4026					 </p>		
4027		
4028				   </div>
4029			  </div>	
4030		   </div>
4031		</script>
4031
4032		
4032<script type="text/template" id="feedback-8-createTemplate">
4033			<div data-cat="1" class="is-section is-box is-section-20" id="createCustomReview" style="display: none;" data-id="<@- parentId @>">
4034		  <div class="is-boxes">
4035			<div class="is-box-centered">
4036			  <div class="is-container container" style="max-width: 1200px;">
4037			
4038				<div class="review-box review-add-box">
4039					<div class="is-container container is-content-1200" >
4040					   <div class="row clearfix" >
4041						  <div class="column full" >
4042							 <h1 style="text-align: left; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: 0px; color: black; ">Add a review</h1>
4043						  </div>
4044					   </div>
4045					   <div class="textarea-cont">
4046						<div style="display:flex; gap:30px;">
4047							<div><h3 style="font-size:18px;font-weight:600;">Overall rating</h3></div>
4048							<div class="review-star1 text-primary" 
4049							style="display: flex; flex-direction: row; align-items: center; padding-top: 0px; margin-top: 0px;margin-left:0px !important;margin:0px !important">
4050						   <span id="rating-stars" >
4051							   <@ for (ratingsSize = 1; ratingsSize <= 5; ratingsSize++) {@>
4052								   <i class="fa fa-solid fa-star-sharp rating-star" 
4053									  data-value='<@- ratingsSize @>' 
4054									  style="width: 20px; height: 20px; text-align: center; flex-shrink: 0; margin: 0; padding: 0;"></i>
4055							   <@}@>
4056						   </span>
4057					   </div>
4058					   <style></style>
4059					   
4060					   
4061						</div>
4062						  <textarea class="add-review-textarea" id="reviewText" style="background:#E5E5E5;width: 100%; border: 1px solid #E5E5E5; padding-right: 28px; padding-bottom: 28px;padding-left:20px; min-height: 180px; font-size: 14px; font-weight: 500; line-height: 1.5; padding-top: 10px;border-radius:16px !important" placeholder="Add your review here"></textarea>
4063						  <@ if(typeof SPUSER !== 'undefined' && SPUSER.name.length > 0)	{ @>
4064								<p style="font-weight: 400; font-size: 10px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); margin-top: 0px;"><@ print(SPUSER.name) @></p>
4065						<@ } @>
4066					   </div>
4067					   <div  style=" display: flex; justify-content: center;">
4068						  <button style="letter-spacing:0px !important ; background-color:#282400;padding:12px 28px !important;" id="reviewSubmitBtn" class="btn btn-primary <@ if(typeof SPUSER !== 'undefined'){ print('createCustomReviewBtn') }else { print('loginBtn') } @>"
4069							data-reviewData="feedback8Reviewlist" disabled >Submit</button>
4070					   </div>
4071					</div>
4072				</div>
4073				</div>
4074				</div>
4075			</div>
4076		</div>
4077		</script>
4077
4078
4079
4080
4081<div class="spectre">
4082<div class="modal" id="reviewModal">
4083			<a href="javascript:void(0);" class="modal-overlay close"
4084				aria-label="Close"></a>	
4085			<div class="modal-container">
4086				<div class="modal-header">
4087					<a href="javascript:void(0);"
4088						class="close btn btn-clear float-right" aria-label="Close"></a>
4089					<div class="modal-title h5">Review</div>
4090				</div>
4091				<div class="modal-body" style="max-height: 90vh;padding-top: 0;">
4092				</div>
4093			</div>
4094			
4095			  
4096			  
4097</div>
4098
4099  
4100</div>
4101
4102
4103
4104
4105
4106	
4107
4108
4109
4110
4111
4112
4113
4114 
4115
4116<script>
4117	var created_date = `Created Date`;
4118	var uname_msg = `Name`;
4119	var email_msg = `Email`;
4120	var has_web_token = `Has Web Token`;
4121	var has_mobile_token = `Has Mobile Token`;
4122	var actions_msg = `Actions`;
4123	var delete_user = `Delete User`;
4124	var create_target_audience = `Create Target Audience`;
4125	var msg_now = `NOW`;
4126	var msg_now_2 = `Now`;
4127	var msg_scheduled = `SCHEDULED`;
4128	var msg_recurring = `RECURRING`;
4129	var msg_weeks = `weeks`;
4130	var msg_months = `month(s)`;
4131	var msg_days = `days`;
4132	var notification_screen = `Notification Screen`;
4133	var coursepackagelandingpage = `Course/Package landing page`;
4134	var search_course_name = `Search by course/package name`;
4135	var webinar_landing_page = `Webinar landing page`;
4136	var search_by_webinar_name = `Search by webinar name`;
4137	var categorypage = `Category Page`;
4138	var custompage = `Custom Page`;
4139	var blogpage = `Blog Page`;
4140	var customlink = `Custom Link`;
4141	var homepage_msg = `Homepage`;
4142	var search_category = `Search category`;
4143	var search_page_title = `Search by Page title`;
4144	var search_blog_title = `Search by Blog title`;
4145	var enter_the_link = `Enter the link`;
4146	var membership_page = `Membership page`;
4147	var pick_a_date = `Pick a date`;
4148	var pick_first_push_date = `Pick a first push date`;
4149	var every_msg = `Every`;
4150	var starting_msg = `Starting`;
4151	var msg_published = `Published`;
4152	var msg_unpublished = `Unpublished`;
4153	var msg_customize = `Customize`;
4154	var msg_edit = `Edit`;
4155	var msg_featured_image = `Featured Image`;
4156	var msg_preview = `Preview`;
4157	var msg_delete = `Delete`;
4158	var msg_unpublish = `Unpublish`;
4159	var msg_publish = `Publish  `;
4160	var msg_question= `questions`;
4161	var try_new_coding_assignment= `Try new coding assignment`;
4162	var change_enrollment_date = `Change Enrollment Date`;
4163	var change_expiry = `Change Expiry`;
4164	var change_remanining_time = `Change Remaining Time`;
4165	var remove_from_course = `Remove From Course`;
4166	var reset_course_progress = `Reset Course Progress`;
4167	var complete_report = `Complete Report`;
4168	var msg_progress = `Progress`;
4169	var timetaken = `Time Taken`;
4170	var msg_user_details = `User Details`;
4171	var graphy_platform_fees_note = `Amount after deducting Graphy platform fees. This does not include your payment gateway charges.`;
4172	var final_price_note = `Final payable price by learners`;
4173	var save_alert_message = `Save progress before moving forward.`;
4174	var no_chapter_alert_message = `Please add at least one chapter in the course.`;
4175	var download_msg = `Download`;
4176	var revoke_msg = `Revoke`;
4177	var yes_msg = `Yes`;
4178	var no_msg = `No`;
4179	var details_hover = `Details`;
4180	var hide_notification = `Hide Notification`;
4181	var notify_learners_hover = `Notify Learners`;
4182	var search_course_package = `Search Courses to add in this package.`;
4183	var bulk_delete = `Bulk Delete`;
4184	var scheduled_msg = `Scheduled`;
4185	var inprogress_msg = `In Progress`;
4186	var completed_msg = `Completed`;
4187	var yes_all_caps = `YES`;
4188	var no_all_caps = `NO`;
4189	var discount_msg = `Discount`;
4190	var max_discount = `Max Discount`;
4191	var min_cart = `Min Cart`;
4192	var delete_bookmark = `Delete Bookmark`;
4193	var view_question = `View question`;
4194	var msg_free = `Free`;
4195	var membership_expiration_note = `Membership will be canceled on next billing date.`;
4196	var msg_active = `Active`;
4197	var msg_inactive = `Inactive`;
4198	var delete_hover = `Delete`;
4199	var view_hover = `View`;
4200	var coursewise = `Course Wise`;
4201	var learner_wise = `Learner wise`;
4202	var segment_wise = `Segment wise`;
4203	var unregistered_msg = `Unregistered`;
4204	var target_audience_deleted = `Target Audience Deleted`;
4205	var courses_msg = `course(s)`;
4206	var learners_msg = `learner(s)`;
4207	var unregistered_learners = `Unregistered Learner`;
4208	var all_learners = `All Learners`;
4209	var course_wise_learners = `Course wise Learners`;
4210	var segment_wise_learners = `Segment wise Learners`;
4211	var with_token = `with token`;
4212	var segments_msg = `segments`;
4213	var add_users_msg = `Add Users`;
4214	var approx_msg = `Approx`;
4215	var revoke_cancellation_request = `Revoke Cancellation request.`;
4216	var remove_scheduled_membership_cancellation = `Remove Scheduled Membership Cancellation`;
4217	var schedule_to_stop_subscription = `Schedule to stop Subscription`;
4218	var stop_subscription = `Stop subscription`;
4219	var available_for_review_all_caps = `AVAILABLE FOR REVIEW`;
4220	var reviewed_all_caps = `REVIEWED`;
4221	var rejected_all_caps = `REJECTED`;
4222	var preview_code = `Preview Code`;
4223	var approve_msg = `Approve`;
4224	var reject_msg = `Reject`;
4225	var history_msg = `History`;
4226	var message_hover= `Message`;
4227	var remove_msg= `Remove`;
4228	var enroll_msg= `Enroll`;
4229	var change_validity= `Change Validity`;
4230	var learners_selected= `learner(s) selected`;
4231	var select_all_msg= `Select all`;
4232	var do_you_want_to_delete_course= `Do you really want to delete this course?`;
4233	var do_you_want_to_revoke_this_certificate= `Do you really want to revoke this certificate?`;
4234	var do_you_want_to_revoke_entry= `Do you really want to revoke this entry?`;
4235	var do_you_want_to_edit_enrollment_date= `Do you really want to edit enrollment date of all learners?`;
4236	var do_you_want_to_edit_enrollment_date_for_selected= `Do you really want to edit enrollment date of selected learners?`;
4237	var do_you_want_to_edit_course_validity= `Do you really want to edit course validity of all learners?`;
4238	var do_you_want_to_edit_course_validity_for_selected= `Do you really want to edit course validity of selected learners?`;
4239	var do_you_want_to_remove_selected= `Do you really want to remove selected learners?`;
4240	var do_you_want_to_remove_all= `Do you really want to remove all learners?`;
4241	var do_you_want_to_create_zip= `Do you really want to create zip for this course?`;
4242	var do_you_want_to_deactivate= `Do you really want to deactivate?`;
4243	var successfully_done_alert= `Successfully Done.`;
4244	var please_select_atleast_1_learner= `Please select atleast 1 learner !`;
4245	var on_msg= `On`;
4246	var single_correct_option = `Single Correct Option`;
4247	var multiple_correct_options = `Multiple Correct Options`;
4248	var numerical_Fill_in_the_Blank = `Numerical/Fill in the Blank`;
4249	var match_the_Column = `Match the Column`;
4250	var subjective = `Subjective`;
4251	var your_target_audience_appear= `Your target audience user(s) will appear here`;
4252	var your_upcoming_campaign= `Your upcoming campaign will appear here`;
4253	var status_msg= `Status`;
4254	var stop_campaign= `Stop Campaign`;
4255	var copy_campaign= `Copy Campaign`;
4256	var platform_fee_tax = `platform fees including taxes`;
4257	var pg_fees_taxes = `payment gateway fees including taxes`;
4258	var msg_quiz = `Quiz`;
4259	var msg_livetest = `Live test`;
4260	var msg_heading = `Heading`;
4261	var msg_text = `Text`;
4262	var msg_form = `Form`;
4263	var msg_live_class = `Live class`;
4264	var msg_live_class_rec = `live class recording`;
4265	var msg_code = `Code`;
4266	var msg_assignment = `Assignment`;
4267	var msg_added = `added`;
4268	var msg_about = `About`;
4269	var msg_year = `year`;
4270	var msg_month = `Month`;
4271	var msg_day = `day`;
4272	//var msg_hour = `hh`;
4273	//var msg_minute = `mm`;
4274	//var msg_seconds = `seconds`;
4275	var msg_month_l = `month`;
4276	var msg_day_l = `day`;
4277	var msg_hour_l = `hour`;
4278	var msg_minute_l = `minute`;
4279	var msg_second_l = `second`;
4280	var mobile_number=`Mobile Number`;
4281	var status_android =`Status (ANDROID)`;
4282	var status_ios =`Status (IOS)`;
4283	var delivery_time=`Delivery Time`;
4284	var sure_unhide=`Are you sure you want to unhide this course ?`;
4285	var become_a_partner=`Become a Partner`;
4286	var failed_msg=`Failed`;
4287	var sent_msg=`Sent`;
4288	var pending_msg=`Pending`;
4289	var running_msg=`Running`;
4290	var add_pricing_plan = `Add pricing plan`;
4291	var msg_add = `Add`;
4292	var of_msg = `of`;
4293	var items_msg = `items`
4294	var ago_msg = `ago`
4295	var items_msg = `items`;
4296	
4297	var january_msg = `January`;
4298	var february_msg = `February`;
4299	var march_msg = `March`;
4300	var april_msg = `April`;
4301	var may_msg = `May`;
4302	var june_msg = `June`;
4303	var july_msg = `July`;
4304	var august_msg = `August`;
4305	var september_msg = `September`;
4306	var october_msg = `October`;
4307	var november_msg = `November`;
4308	var december_msg = `December`;
4309	var sunday_msg = `Sunday`;
4310	var monday_msg = `Monday`;
4311	var tuesday_msg = `Tuesday`;
4312	var wednesday_msg = `Wednesday`;
4313	var thursday_msg = `Thursday`;
4314	var friday_msg = `Friday`;
4315	var saturday_msg = `Saturday`;
4316	var at_msg = `at`;
4317	var generate_outline = `Generate outline using AI`;
4318	var it_take_min = `It may take a min.`;
4319	var msg_ok = `OK`;
4320	var edit_pricing_plan = `Edit pricing plan`;
4321
4322</script>
4322
4323
4324
4325
4326
4327
4328
4329
4330<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery-2.0.3.min.js"></script>
4330
4331
4332<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/underscore-min.js?v=1.9.1"></script>
4332
4333
4334<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery.form.js"></script>
vendor: 1 bytes, line 4334
4334
4335<script async src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery.noty.packaged.min.js"></script>
vendor: 1 bytes, line 4335
4335
4336<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery-ui.min.js"></script>
vendor: 1 bytes, line 4336
4336
4337<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery.timeago.js"></script>
vendor: 1 bytes, line 4337
4337
4338<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/js-webshim/minified/extras/modernizr-custom.js"></script>
vendor: 1 bytes, line 4338
4338
4339<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery.datetimepicker.js"></script>
4339
4340
4341
4342
4343
4344
4345
4346
4347
4348<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/aes.js"></script>
vendor: 1 bytes, line 4348
4348
4349<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/mode-ecb-min.js"></script>
vendor: 1 bytes, line 4349
4349
4350<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/pad-nopadding-min.js"></script>
4350
4351
4352<!-- 
4352<script src="https://unpkg.com/@popperjs/core@2"></script>
vendor: 1 bytes, line 4352
4352
4353<script src="https://unpkg.com/tippy.js@6"></script>
4353 -->
4354<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.3.3/umd/popper.js" integrity="sha512-jSMYzs1Iebw2Uew+Y9karoqkqTDEzbqkdttIkHJKh3auQ6aGV7p8b7A3Yo9k/LsMvUFqWt5AV66hfo1OwH4Jjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 1 bytes, line 4354
4354
4355<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.0.0/tippy-bundle.umd.js"></script>
4355
4356
4357<script type="text/javascript">
4358	var passwordPolicyRequired = false;
4359	var checkoutV2 = true;
4360	var primaryFieldPhoneEnabled = false;
4361	var orgLanguageCode = "";
4362	var SPEERESCDN = "https://d502jbuhuh9wk.cloudfront.net";
4363</script>
4363
4364
4365<script src="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/scripts/sutils_006ef97695b7d97b6f665352cee8d2cd.js"></script>
vendor: 1 bytes, line 4365
4365
4366<script src="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/scripts/utils/dateUtils_f53456b03f1287667a7b24fb63b367ce.js"></script>
vendor: 1 bytes, line 4366
4366
4367<script type="text/javascript">
4368	// Make org object globally available for dateUtils
4369	window.org = window.org || {};
4370	window.org.currencyCode = "true"=='true'?'USD':'INR';
4371	var websiteV3Org = false;
4372	var orgCreatedDate = {"$date":"2022-11-08T10:07:33.666Z"};
4373</script>
4373
4374
4375	
4375<script src="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/scripts/talk_2c30ecf6aaff74f040d029af059f08e1.js"></script>
4375
4376
4377
4378
4379
4380
4381<script type="text/javascript">
4382	var trialExpired = "false";
4383	var planCancelled = "false";
4384	var isFreePlan = false;
4385	
4386</script>
vendor: 1 bytes, line 4386
4386
4387<script type="text/javascript" id="dsf239df">
4388	var ctx = "/s",
4389		isFirstLogin = "", cjs = CryptoJS;
4390		
4391	var defaultCoreColor = "#5755d9", theme1CoreColor = "#572b7a", theme2CoreColor = "#3f51b5", theme3CoreColor = "#009051", 
4392		theme4CoreColor = "#596439", theme5CoreColor = "#F0591D", theme6CoreColor = "#28a745", theme7CoreColor = "#1bbc9b", 
4393		theme8CoreColor = "#f38f20", apkId = "6231373436231373432363038663465653864613523630386634656538646135", theme9CoreColor = "#c0af01", theme10CoreColor = "#e8d3a4",
4394		webColor = defaultCoreColor,
4395		CFCDN = "https://d502jbuhuh9wk.cloudfront.net", mobileNotification = true, webNotification = true, 
4396		iosPlayVideo = false,
4397		chromeDrmPlayback = false,
4398		gaType = "ga4";
4399		
4400	
4401	
4402	$("#dsf239df").remove();
4403</script>
4403
4404
4405
4406<!-- Google Tag Manager Integration -->
4407    
4407<script>
vendor: 478 bytes, lines 4407-4414
4407(function (w, d, s, l, i) {
4408            w[l] = w[l] || []; w[l].push({
4409                'gtm.start':
4410                    new Date().getTime(), event: 'gtm.js'
4411            }); var f = d.getElementsByTagName(s)[0],
4412                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
4413                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
4414        })(window, document, 'script', 'dataLayer', "
4414GTM-KSSH2VR
vendor: 3 bytes, line 4414
4414");
4414</script>
4414
4415<!-- End Google Tag Manager Integration-->
4416
4417			
4418
4419
4420
4421
4422	<a id="whatsappWidgetContainer" class="whatsapp-widget-container" href="#" target="_blank" >
4423      <div class="whatsapp-widget-icon">
4424        <i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
4425      </div>
4426      <div class="whatsapp-widget-contact">Contact us</div>
4427    </a>
4428    
4429	
4429<script>	
4430
4431    	const mobileNumber = "+66813066770";
4432    	const userMessage = "Hi, I have a query regarding your learning community.";
4433
4434    	const WA_URL = "https://api.whatsapp.com/send?phone=" + encodeURIComponent(mobileNumber) + "&text=" + encodeURIComponent(userMessage);
4435
4436      	document.getElementById("whatsappWidgetContainer").href = WA_URL;
4437    </script>
4437
4438
4439
4440
4441	
4442		<input type="hidden" id="orgCurrencyCode" value="THB" />
4443	
4444	
4445
4446
4447
4448	
4448<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/detect-private-browsing.js"></script>
4448
4449	
4449<script type="text/javascript">
4450	detectPrivateMode(
4451        function(is_private) {
4452            if(typeof is_private !== 'undefined' && is_private) {
4453            		$("input[name=privateMode]").val("private");
4454            }
4455        }
4456    );
4457	</script>
4457
4458
4459
4460
4461	
4462	
4463		
4463<script type="text/javascript"
4464			src="https://d502jbuhuh9wk.cloudfront.net/resources/js/intlTelInput.min.js"></script>
4464
4465		
4465<script type="text/javascript">
4466		
4467			var ipInfo = localStorage.getItem('ipInfo');
4468	        if(!ipInfo) {
4469	        	$.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
4470	        		if(resp) {
4471	        			var ipInfoStr = JSON.stringify(resp);
4472	    				var ipInfoField = document.getElementById("ipInfo");
4473	    				var countryCode = (resp.country) ? resp.country : "in";
4474				        sessionStorage.setItem('countryCode', countryCode);
4475						if('statusText' in resp) {
4476	    					if((resp['statusText'] !== 'error') && ('ip' in resp)) {
4477	    						localStorage.setItem('ipInfo', ipInfoStr);
4478	    						if(ipInfoField) {
4479	    							ipInfoField.value = ipInfoStr;
4480	    		        		}
4481							}
4482						}
4483			        	else if('ip' in resp) {
4484			        		localStorage.setItem('ipInfo', ipInfoStr);
4485			        		if(ipInfoField) {
4486			        			ipInfoField.value = ipInfoStr;
4487			        		}
4488		        		}
4489					}
4490	        	})
4491	        }
4492		
4493		  $("#sphone").intlTelInput({
4494		      initialCountry: "auto",
4495		      geoIpLookup: function(callback) {
4496		    	 var scountryCode = sessionStorage.getItem('countryCode');
4497		    	 
4498		    	 if(scountryCode !== null) {
4499		    		 callback(scountryCode);
4500		    	 }else {
4501		    		 $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
4502				          var countryCode = (resp && resp.country) ? resp.country : "in";
4503				          callback(countryCode);
4504				          sessionStorage.setItem('countryCode', countryCode);
4505				        });
4506		    	 }
4507		      },
4508		      preferredCountries: ["in", "us"],
4509		      separateDialCode: true,
4510		      utilsScript: "/resources/js/intlUtils.js"
4511		    });
4512		  	
4513		  </script>
4513
4514	
4515
4516
4517
4518<div class="spectre">
4519
4520	
4521	
4522	
4523
4524	
4524<script type="text/javascript">
4525		if(top != self) {
4526		    //iframe
4527		    $(".toast").remove();
4528		}
4529	</script>
4529
4530	
4531	
4532</div>
4533
4534	
4535
4536<input type="hidden" id="orgCreditAlias"
4537	value="Smartys English Academy Coins" />
4538
4539
4540
4541	
4542
4543
4544<script>
4545
4546
4547
4548
4549	var orgTaxLabel = "VAT";
4550
4551
4552
4553	var sessionCountry = "";
4554
4555	$(document).ready(function() {		
4556		$("input[name='userMobileVerify']").change(function(data){
4557			var uniqueMobileSwitch = $('#uniqueMobileId');
4558			if(data.target.value==='true'){
4559				$('input[name=uniqueMobile]').prop('checked', true)
4560				$('#uniqueMobileLabelId').show();				
4561			}else{
4562				$('input[name=uniqueMobile]').prop('checked', false)
4563				$('#uniqueMobileLabelId').hide();
4564			}
4565		});
4566	});
4567	
4568	
4569		
4570		
4571			localStorage.removeItem('microserviceAuthToken');
4572		
4573   
4574   
4575   
4576	
4577	
4578			localStorage.removeItem('communityToken');
4579	
4580   
4581   
4582   
4583	
4584	
4585			localStorage.removeItem('chatRefreshToken');
4586	
4587
4588
4589
4590	
4591	
4592			localStorage.removeItem('refreshToken');
4593	
4594
4595	
4596</script>
4596
4597
4598
4599<!-- amplitude script start -->
4600
4601
4602
4603	
4603<script type="text/javascript">
4604	    window.localStorage.removeItem('loginAmplitudeEventSent');
4605	</script>
4605
4606
4607
4608<!-- amplitude script end -->
4609
4610 
4611    <div class="spectre">
4612        <div class="modal" id="membershipPopupHtml">
4613            <iframe id="microfe-popup-membership" src=""
4614                style="width: calc(100% + 10px); height: 100vh; border: none;"
4615                onload="$(this).parent().removeClass('loading');"></iframe>
4616        </div>
4617    </div>
4618    
4618<script>
4619        function openMembershipPopup(source){
4620            if(source==='banner'){
4621            	setGraphyCookie('SHOWMEMBERSHIPBANNER', 'true', 1);
4622            }
4623            if(source!=='private'){
4624            	location.href="/membership#"+source;
4625            }else{
4626				location.href="/private";
4627			}
4628        }
4629        function openMembershipPopup(source, id){
4630            if(source==='banner'){
4631            	setGraphyCookie('SHOWMEMBERSHIPBANNER', 'true', 1);
4632            }
4633            if(typeof id !== 'undefined' ){
4634            	location.href="/memberships/"+id+"#"+source;
4635            }else if(source!=='private'){
4636            	location.href="/membership#"+source;
4637			}else{
4638				location.href="/private";
4639			}
4640        }
4641        function closeMembershipPopup() {
4642            $("#membershipPopupHtml").removeClass("active");
4643            $("body").removeClass("overflowYDisable");
4644            window.location.hash="";
4645            setGraphyCookie('SHOWMEMBERSHIPBANNER', 'true', 1);
4646        }
4647        $("body").on('click', ".membershipBtn", function() {
4648        	openMembershipPopup('nav_bar');
4649        });
4650        
4651        if(window.location.hash==="#membership"){
4652        	openMembershipPopup("");
4653        }
4654        
4655    </script>
4655
4656    
4657    <!-- sending ipInfo data as form data when signing up -->
4658    
4658<script type="text/javascript">
4659		document.addEventListener("DOMContentLoaded", function(event) {
4660			const signupParamsField = document.getElementById("signupParams");
4661			if(signupParamsField && (window.signupParams)) {
4662				signupParamsField.value = JSON.stringify(window.signupParams);
4663			}
4664			const ipInfo = localStorage.getItem("ipInfo");
4665			const ipInfoField = document.getElementById("ipInfo");			
4666			if(ipInfo && ipInfoField) {
4667			   ipInfoField.value = ipInfo;
4668			}
4669		});
4670	</script>
4670
4671 
4672
4673 <div id="template-container"></div>
4674
4675	 
4676	
4676<script	src="https://d502jbuhuh9wk.cloudfront.net/staticfiles/resources/scripts/sstore_5ffb558e86d7b5ef265e05fb0bfbef79.js"></script>
4676
4677
4678	
4679	
4679<script type="text/template" id="categoryTemplate">
4680		<li class="menu-item"><a href="/s/store/courses/<@- label @>"><@- label @></a>
4681	</script>
4681
4682	
4682<script type="text/javascript">
4683		store.init(true);
4684		store.bindEvents();
4685	</script>
4685
4686	
4686<script type="text/javascript">
4687		window.signupParams = {source: "store", platform: "web", sourceId: null};
4688	</script>
4688
4689	
4690
4691
4692
4693
4694	<div id="ui-notification-container" class="spectre"></div>
4695	
4695<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery-easing.js"></script>
4695
4696	
4696<script src="https://d502jbuhuh9wk.cloudfront.net/resources/js/jquery-notification.js"></script>
4696
4697
4698	<!-- Import and configure the Firebase SDK -->
4699	<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
4700	<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
4701	
4701<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
4701
4702	
4702<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
4702
4703
4704	
4704<script>
4705  // Retrieve Firebase Messaging object.
4706  var firebaseConfig = {"apiKey":"AIzaSyCQ2wNyeXrIzifB0IKKVCalHXrDk7pg32w","authDomain":"live-stream-chat-efac5.firebaseapp.com","databaseURL":"https://live-stream-chat-efac5.firebaseio.com","projectId":"live-stream-chat-efac5","storageBucket":"live-stream-chat-efac5.appspot.com","messagingSenderId":"158909475587","appId":"1:158909475587:web:93ede0a9feef2b3f"};
4707  // Initialize Firebase
4708  firebase.initializeApp(firebaseConfig);
4709  const messaging = firebase.messaging();
4710  // Add the public key generated from the console here.
4711  messaging.usePublicVapidKey("BN3BYOmWjo3NAW7if4jCE5cG-yIOXAvmoKB9k53ZssAfgb7Z6ZZ-oAQWFK7j6EqHIG3f-G9QAVKLOIK7Vw3X0_k");
4712
4713  // Callback fired if Instance ID token is updated.
4714  messaging.onTokenRefresh(function(){
4715    messaging.getToken().then(function(refreshedToken){
4716      // Indicate that the new Instance ID token has not yet been sent to the
4717      // app server.
4718      setTokenSentToServer(false);
4719      // Send Instance ID token to app server.
4720      sendTokenToServer(refreshedToken);
4721      // Display new Instance ID token and clear UI of all previous messages.
4722      resetUI();
4723      // [END_EXCLUDE]
4724    })["catch"](function(err){
4725      console.log('Unable to retrieve refreshed token ', err);
4726      showToken('Unable to retrieve refreshed token ', err);
4727      requestPermission();
4728    });
4729  });
4730
4731  // Handle incoming messages. Called when:
4732  // - a message is received while the app has focus
4733  // - the user clicks on an app notification created by a service worker
4734  //   `messaging.setBackgroundMessageHandler` handler.
4735  messaging.onMessage(function(payload){
4736    console.log('Message received. ', payload);
4737    appendMessage(payload);
4738  });
4739
4740  function resetUI() {
4741    clearMessages();
4742    $(function(){
4743        $("#ui-notification-container").notification();
4744    });
4745    // Get Instance ID token. Initially this makes a network call, once retrieved
4746    // subsequent calls to getToken will return from cache.
4747    messaging.getToken().then(function(currentToken) {
4748      if (currentToken) {
4749        sendTokenToServer(currentToken);
4750        updateUIForPushEnabled(currentToken);
4751      } else {
4752        // Show permission request.
4753        console.log('No Instance ID token available. Request permission to generate one.');
4754        // Show permission UI.
4755        updateUIForPushPermissionRequired();
4756        setTokenSentToServer(false);
4757      }
4758    })["catch"](function(err) {
4759      console.log('An error occurred while retrieving token. ', err);
4760      showToken('Error retrieving Instance ID token. ', err);
4761      setTokenSentToServer(false);
4762    });
4763    // [END get_token]
4764  }
4765
4766  function showToken(currentToken) {
4767    // Show token in console and UI.
4768    console.log(currentToken);
4769  }
4770
4771  // Send the Instance ID token your application server, so that it can:
4772  // - send messages back to this app
4773  // - subscribe/unsubscribe the token from topics
4774  function sendTokenToServer(currentToken) {
4775    if (!isTokenSentToServer()) {
4776      console.log('Sending token to server...');
4777      var packet = {
4778			  url : "/public/v1/fcm/token",
4779			  data: {token: currentToken},
4780			  success: function(data, params) {
4781				  console.log("Token successfully sent")
4782				  setTokenSentToServer(true);
4783				  setTokenSentToServerUserId(window.userId);
4784			  }
4785	  };
4786	  postData(packet, {});
4787    } else {
4788      console.log('Token already sent to server so won\'t send it again ' +
4789          'unless it changes');
4790    }
4791
4792  }
4793
4794  function isTokenSentToServer() {
4795    return window.localStorage.getItem('sentToServer') === '1' && isTokenSentToServerWithUser(window.userId);
4796  }
4797  
4798  function isTokenSentToServerWithUser(userId) {
4799	 return window.localStorage.getItem('sentToServer-user') === userId;
4800  }
4801
4802  function setTokenSentToServer(sent) {
4803    window.localStorage.setItem('sentToServer', sent ? '1' : '0');
4804  }
4805  
4806  function setTokenSentToServerUserId(userId) {
4807	    window.localStorage.setItem('sentToServer-user', userId);
4808  }
4809
4810  function requestPermission() {
4811    console.log('Requesting permission...');
4812    // [START request_permission]
4813    Notification.requestPermission().then(function(permission) {
4814      if (permission === 'granted') {
4815        console.log('Notification permission granted.');
4816        resetUI();
4817      } else {
4818        console.log('Unable to get permission to notify.');
4819      }
4820    });
4821    // [END request_permission]
4822  }
4823
4824  function deleteToken() {
4825    // Delete Instance ID token.
4826    // [START delete_token]
4827    messaging.getToken().then(function(currentToken){
4828      messaging.deleteToken(currentToken).then(function(){
4829        console.log('Token deleted.');
4830        setTokenSentToServer(false);
4831        // Once token is deleted update UI.
4832        resetUI();
4833      })["catch"](function(err) {
4834        console.log('Unable to delete token. ', err);
4835      });
4836    })["catch"](function(err) {
4837      console.log('Error retrieving Instance ID token. ', err);
4838      showToken('Error retrieving Instance ID token. ', err);
4839    });
4840
4841  }
4842
4843  // Add a message to the messages element.
4844  function appendMessage(payload) {
4845	  $("#ui-notification-container").notification("create", {
4846          title: payload.data.title,
4847          content: payload.data.message,
4848          customIcon: payload.data.customIcon,
4849          customImage: payload.data.customImage,
4850          link: payload.data.link
4851      },
4852      {
4853          sticky: true 
4854      });
4855  }
4856
4857  // Clear the messages element of all children.
4858  function clearMessages() {
4859    const messagesElement = document.querySelector('#ui-notification-container');
4860    while (messagesElement.hasChildNodes()) {
4861      messagesElement.removeChild(messagesElement.lastChild);
4862    }
4863  }
4864
4865  function updateUIForPushEnabled(currentToken) {
4866	  showToken("Token update ui: " + currentToken);
4867  }
4868
4869  function updateUIForPushPermissionRequired() {
4870    console.warg("Push notification permission is requred")
4871  }
4872
4873  window.userId = "";
4874  resetUI();
4875  
4876  
4877 </script>
4877
4878
4879	
4879<script src="https://d502jbuhuh9wk.cloudfront.net/static/files/lazyload.min.js"></script>
4879
4880	
4880<script type="text/javascript">
4881		var lazyLoadInstance = new LazyLoad({
4882		  unobserve_entered: true,
4883		  callback_enter: function(element) {
4884			  resizeCdnImage(element);
4885		  }
4886		});
4887	</script>
4887
4888</body>
4889</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.