{{ var sprite = 'https://dmn92m25mtw4z.cloudfront.net/img_set/sprite/v1/sprite-1w.png'; }}
{{ var spritesheet = '/img/uploads/freemium-core-sprites.svg'; }}
{{? it.markup }}
	{{= it.markup }}
	{{?? it.controls__guest }} {{# def.controls__guest }}
	{{?? it.controls__user }} {{# def.controls__user }}
	{{?? it.course_groupings }} {{# def.course_groupings }}
	{{?? it.dropdown_menu }} {{# def.dropdown_menu }}
	{{?? it.header }} {{# def.header }}  
	{{?? it.lander }} {{# def.lander }}
	{{?? it.menu__courses }} {{# def.menu__courses }}
	{{?? it.switch_user }} {{# def.switch_user }}
	{{?? it.toast__message }} {{# def.toast__message }}
	{{?? it.toast__message__achievement }} {{# def.toast__message__achievement }}
{{?}}



/* PUBLIC DEFS */

{{## def.controls__guest: 
	{{ var self = it.controls__guest; }}

		<ul class="page-header__main-links">
			{{~ self.items_list :item }}
				<li class="{{= !item.is_primary ? 'hidden-xs' : '' }}">
					<a class="page-header__link {{= item.is_button ? 'is-button' : '' }}" href="{{= item.url }}" {{=self.data_nav}}>
						{{= item.label }}
					</a>
				</li>
			{{~}}
		</ul>
		#}}

	{{## def.controls__user: 
		{{ var self = it.controls__user; }}
		<div class="flex flex-row items-center gap-3 gap-1-sm" >
		<p class="text-md hidden-xs">{{= self.first_name?self.first_name:self.email_name}} 
		</p>
		<ul class="page-header__main-links">
			{{~ self.item_ids :item_id }}
				<li>						
						{{? item_id === 'user_menu' }}
							<a class="page-header__menu-button" href="#" data-action="showMenu" data-menu="user-menu">
								<img id="user-photo" src="{{=  self.user_photo }}" width="40">
								{{# def.icon__dropdown }}
							</a>
						{{?? self.items && self.items[item_id] }}
							{{= self.items[item_id] }}
					{{?}}
				</li>	
			{{~}}
		</ul>
		</div>
		#}}

	{{## def.course_groupings: 
		{{ var self = it.course_groupings; }}
		<div class="courses-menu__groupings">
			<ul>
				{{~ self.region_course_groups :groupset }}
					{{? groupset.group_name !== "All Courses" }}
						<li class="courses-menu__group">
							<h6 class="courses-menu__group-name h4">
								{{= groupset.group_name }}
							</h6>
							<ul class="courses-menu__group-items">
								{{~ groupset.course_ids :course_id }}
									{{ var course = self.getCourseById(course_id); }}
									{{ var textbook = self.getTextbookByCourseId(course_id); }}
									<li>
										<span class="fa fa-book"></span>
										<a href="{{= self.getCourseUrl(course_id) }}" {{=self.data_nav}}>
											{{= course.name }}
										</a>
									</li>
								{{~}}
							</ul>
						</li>
					{{?}}
				{{~}}
			</ul>
		</div>
		#}}

	{{## def.dropdown_menu: 
		{{ var self = it.dropdown_menu; }}
		{{? self.items }}
			<ul id="{{= self.menu_id || '' }}" class="page-header__dropdown-menu user-profile">
				{{~ self.items :item }}
					{{ var data_nav = !item.action ? self.data_nav : ''; }}
					{{ var data_string = item.data_string || ''; }}
					{{ var item_role = ''; }}
					{{? item.is_divider }}
						{{ item_role = 'divider'; }}
						{{?? item.is_header }}
							{{ item_role = 'heading'; }}
					{{?}}
					<li role="{{= item_role }}">
						{{? item.action || item.url }}
							<a href="{{= item.url || '' }}" data-action="{{= item.action || '' }}" data-guid="{{= item.guid || '' }}" data-user-id="{{= item.user_id || '' }}" {{= data_string }} {{=data_nav}}>
								{{= item.label }}
							</a>
							{{?? item.is_heading }} <em class="text-loud">{{= item.label || '' }}</em>
						{{?}}
					</li>
				{{~}}
			</ul>
			{{?? self.markup }} {{= self.markup }}
		{{?}}
		#}}

	{{## def.header:	

		{{ var self = it.header; 
		 var inline_course_color = 'style="background:'+   self.course_color + '"';
		 var inline_course_bg = 'style="background:'+   self?.course?.bg_css + '"';
		 var inline_bg_default = 'style="background:#05A7CF "' ;
		 var inline_bg_white = 'style="background:#FFFFFF "' ;
		  var is_parent_dashboard =self.secondary?.title?.includes("Parental");
		}}
		<header id="page-header" class="page-header relative z-5 py-1 "  
			{{? self.course_color  }}{{= inline_course_color}}
			{{?? self?.course?.bg_css }} {{= inline_course_bg }}
			{{?? is_parent_dashboard }} {{= inline_bg_default}} 
			{{??}}{{= inline_bg_white}} {{?}}>
			<div class="page-header__main" >
				<div class="page-header__components z-5 flex py-2 ml-py-0 items-center w-full">
					<div class="page-header__component-organic is-left">
						<a class="page-header__logo" href="{{= self.home_url }}">
							<picture>
							{{? self.alternate_logos }}
								{{= self.alternate_logos.xs || '' }}
								{{= self.alternate_logos.sm || '' }}
								{{??}}
								{{? self.course_contrast_color==="#FFFFFF"}}
								<img src="{{= sprite }}" alt="{{= self.home_alt || '' }}" style="  filter: invert(0)">
								{{??}}
								<img src="{{= sprite }}" alt="{{= self.home_alt || '' }}" style="  filter: invert(1)">
								{{?}}

							{{?}}
							</picture>
						</a>
					</div>
					<div class="page-header__component-organic is-left pl-4 sm-pl-2">
						<a class="page-header__menu-button hidden visible-xs" href="#" data-action="showMenu" data-menu="main-menu">
							{{# def.icon__menu }}
						</a>
						<ul class="page-header__main-links textDecoration-none ">
							{{~ self.primary_controls :item }}
								{{ var data_nav = !item.action ? self.data_nav : ''; }}
								<li>
									<a class="page-header__link " href="{{= item.url || '#' }}" data-action="{{= item.action || '' }}" data-menu="{{= item.menu_id || '' }}" {{=data_nav}}>
										<div class="rounded-ml bg-white font-black px-4 lg-px-2 py-2 boxshadow-h-1 border-1-cc text-base flex flex-row items-center gap-1 ">
										{{? item.label === "Courses" }}
										{{# def.icon__btn__courses }}
									  {{??}}
									  {{# def.icon__btn__search }}
									  {{?}}
									  <span class="flex ml-hidden">
										  {{= item.label }}
										</span>
									</div>
									</a>
								</li>
								{{~}}		
								{{? self.is_subscribed&&self.course?.grade>=9}}
								<a class="page-header__menu-button pl-4 " href="#" data-action="qna.show" style="scale:.8">
								{{# def.icon__userqa:"#E03667" }}
								</a>
								{{?}}							
						</ul>
					</div>			
					<div class="page-header__component-organic is-right flex flex-row px-1 gap-4 gap-2-sm items-center {{? self.course_contrast_color==='#FFFFFF'}}font-white {{??}}font-black{{?}}">
						{{? self.is_guest===true}}
						<a class="page-header__link text-base font-bold flex items-center " href="{{= self.signin_url || '#' }}"  >
							Sign In
						</a>
						<a class="page-header__link text-base font-bold textDecoration-none" href="{{= self.signup_url || '#' }}" >
						<div class="custom-button" data-target="signup">
							Sign Up 
						</div>
						</a>
					  <img class="page-header__region {{= self.region}}" src="{{= sprite }}"  alt="flag-{{= self.region}}" width="48" height="48"
									>
									{{?? self.is_subscribed===false }}					
							<a class="page-header__link text-base font-bold textDecoration-none
							{{?  (self.subscription_state==='ACTIVE'|| self.is_guest) }} hidden {{??}} flex {{?}}
							
							" href="{{= self.upgrade_url || '#' }}" >
								<div class="custom-button" data-target="upgrade">
									Subscribe
								</div>
								</a>
								{{?}}
								{{? self.is_guest===false}}
								{{= self.secondary_controls }}
								{{?}}
					</div>
				</div>	
				<div class="w-full h-full top-0 left-0 absolute z--1 opacity-95" {{? self.course_color }}{{= inline_course_color}}
			{{?? self?.course?.bg_css }} {{= inline_course_bg }}
					{{?? is_parent_dashboard }} {{= inline_bg_default}} 
					{{??}}{{= inline_bg_white}} {{?}} ></div>
			</div>
			<div class="">
			{{# def.secondary_bar }}
			</div>
			<div class="page-header__toast z-6" data-toast=""   ></div>
		</header>
		{{? self.is_expired || self.is_important }}
			{{ var msg = ''; }}
			{{? self.is_expired }}
				{{ msg = self.is_expired.msg; }}
				{{?? self.is_important }}
					{{ msg = self.is_important.msg; }}
			{{?}}
			<div class="page-banner is-important is-sticky">
				<div class="page-banner__contents">
					{{= msg }}
				</div>
			</div>
		{{?}}
		#}}
	
	{{## def.lander: 
		{{ var self = it.lander;}}
		<header id="page-header" class="page-header">
			<div class="page-header__main">
				<div class="page-header__components">
					<div class="page-header__component is-left">
						<a class="page-header__logo" href="{{= self.home_url }}" {{=self.link_data}}>
							<img src="{{= sprite }}" alt="{{= self.home_alt || '' }}">
						</a>
						<img class="page-header__region {{= self.region }}" src="{{= sprite }}" alt="{{= self.region_alt || '' }}" width="48" height="48">
					</div>
					<div class="page-header__component is-right">
						<a class="page-header__menu-button hidden visible-xs" href="#" data-action="showMenu" data-menu="lander-menu">
							{{# def.icon__menu }}
						</a>
						<ul class="page-header__main-links hidden-xs">
							{{~ self.primary_controls :item }}
							<li>
									<a class="page-header__link {{= item.is_button ? 'is-button' : '' }}" href="{{= item.url || '#' }}">
										{{= item.label }}
									</a>
								</li>
							{{~}}
						</ul>
					</div>
				</div>
			</div>
			
		</header>
		#}}

	{{## def.menu__courses: 
		
		{{ var self = it.menu__courses; }}
		
		<div id="courses-menu" class="page-header__dropdown-menu" >
			<div class="courses-menu__groupings" data-count="{{= self.course_wall.length }}">
				{{~ self.course_wall :groupset }}
					{{ var inline_style = ''; }}
					{{? groupset.bg_colour }}
						{{ inline_style = 'style="color:'+ groupset.bg_colour + ';"'; }}
					{{?}}
					{{ var inline_css = 'color:' + groupset.bg_colour; }}
					<div class="courses-menu__group" {{= inline_style }}>
						{{? groupset.bg_colour && groupset.image_key }}
							{{ inline_style = 'style="background-color:'+ groupset.bg_colour +';'; }}
							{{ inline_style += 'background-image:url('+ self.getTextbookArt(groupset.image_key) +');"'; }}
							{{?? groupset.bg_colour }}
								{{ inline_style = 'style="background-color:'+ groupset.bg_colour +';"'; }}
							{{??}} {{ inline_style = ''; }}
						{{?}}
						{{ inline_css = 'background-color:' + groupset.bg_colour; }}
						{{ inline_css += ';background-image:url(' + self.getTextbookArt(groupset.image_key) + ')'; }}
						{{? self.course_wall.length > 1 }}
							<header class="courses-menu__group-header" {{= inline_style }}>
								<h6 class="courses-menu__group-name">
										{{= groupset.name }}
								</h6>
							</header>
						{{?}}
						<ul class="courses-menu__group-body">
							{{~ groupset.plan_ids :plan_id }}
								{{ var plan = self.courses[plan_id]; }}
								<li class="courses-menu__group-course">
									<a href="{{= plan.url }}" {{=self.data_nav}}>
										{{= plan.name }}
									</a>
								</li>
							{{~}}
						</ul>
					</div>
				{{~}}
			</div>
		</div>
		#}}

	{{## def.switch_user: 
		{{ var self = it.switch_user; }}
		<img class="user-menu__item-thumb space-right-xs" src="{{= self.photo_url }}">
		{{= self.name }}
		#}}

	{{## def.toast__message:
		{{ var self = it.toast__message; }}
		{{? !self.markup }}
			{{? self.header_close }}
				<a class="" href="#" data-action="closeToast">
					<svg class="page-header__toast-close" width="24" height="24">
						{{# def.icon :'svg-icon-close' }}
					</svg>
				</a>
			{{?}}
			<div class="page-header__toast-body">
				{{? self.body_close }}
					<a href="#" data-action="closeToast">
						<svg class="page-header__toast-close" width="24" height="24" style="float:right;">
							{{# def.icon :'svg-icon-close' }}
						</svg>
					</a>
				{{?}}
				{{? !self.body_markup }}
					{{= self.body_message || '' }}
					{{??}} {{= self.body_markup }}
				{{?}}
			</div>
			{{??}} {{= self.markup }}
		{{?}}
		
		#}}

	{{## def.toast__message__achievement: 

		{{ var self = it.toast__message__achievement; }}
		{{ var item = self.item; }}

		<div class="page-header__toast-body">
			<a href="#" data-action="closeToast">
				<svg class="page-header__toast-close" width="24" height="24" style="float:right;">
					{{# def.icon :'svg-icon-close' }}
				</svg>
			</a>
			<h5 class="page-header__toast-title">
				{{= self.heading || '' }}
			</h5>
			<div class="achievement__item is-toast">
				<div class="achievement__item-art">
					{{? item.img_bg1_url }}
						<img src="{{= item.img_bg1_url }}">
					{{?}}
					{{? item.img_bg2_url }}
						<img src="{{= item.img_bg2_url }}">
					{{?}}
					{{? item.img_fg1_url }}
						<img src="{{= item.img_fg1_url }}">
					{{?}}
					{{? item.img_fg2_url }}
						<img src="{{= item.img_fg2_url }}">
					{{?}}
					{{? item.trophy_text }}
						<span>{{= item.trophy_text }}</span>
					{{?}}
				</div>
				<div class="achievement__item-details">
					<h6 class="achievement__item-name">{{= item.name }}</h6>
					<ul>
						{{~ item.criteria :criterium }}
							<li class="achievement__item-criterion">{{= criterium.label }}</li>
						{{~}}
					</ul>
				</div>
			</div>	
		</div>
		#}}

/* PRIVATE DEFS */

	{{## def.icon :sprite_id:
		{{ var url = spritesheet + '#' + sprite_id; }}
		<use xlink:href="{{= url }}"></use>
		#}}

	{{## def.icon__dropdown:
		<svg class="space-left-xxs" width="6" height="6">
			{{# def.icon :'svg-caret-down' }}
		</svg>
		#}}

	{{## def.icon__menu:
		<svg width="24" height="24">
			{{# def.icon :'svg-icon-menu' }}
		</svg>
		#}}
		
	{{## def.icon__menu__apps:
		<svg class="apps-menu__btn-icon" width="24" height="24">
			{{# def.icon :'svg-icon-menu-squares' }}
		</svg>
		#}}
		{{## def.icon__menu__home:
		<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sw-w-4-half sw-h-4-half"  viewBox="0 -960 960 960" fill="#5f6368"><path d="M200-160v-366L88-440l-48-64 440-336 160 122v-82h120v174l160 122-48 64-112-86v366H520v-240h-80v240H200Zm80-80h80v-240h240v240h80v-347L480-739 280-587v347Zm120-319h160q0-32-24-52.5T480-632q-32 0-56 20.5T400-559Zm-40 319v-240h240v240-240H360v240Z"/></svg>
		#}}

		{{## def.icon__btn__courses:
			<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sw-w-4-half sw-h-4-half"  viewBox="0 -960 960 960"  fill="#5f6368"><path d="M300-80q-58 0-99-41t-41-99v-520q0-58 41-99t99-41h500v600q-25 0-42.5 17.5T740-220q0 25 17.5 42.5T800-160v80H300Zm-60-267q14-7 29-10t31-3h20v-440h-20q-25 0-42.5 17.5T240-740v393Zm160-13h320v-440H400v440Zm-160 13v-453 453Zm60 187h373q-6-14-9.5-28.5T660-220q0-16 3-31t10-29H300q-26 0-43 17.5T240-220q0 26 17 43t43 17Z"/></svg>
		#}}
		{{## def.icon__btn__search:
			<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sw-w-4-half sw-h-4-half" viewBox="0 -960 960 960"  fill="#5f6368"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
		#}}	

	{{## def.icon__userqa:fillColor:
		<svg id="user-qna-icon" class="qna__my-icon qna-button" viewbox="0 0 40 40" width="50" height="50">
			<circle cx="20" cy="20" r="20" fill="{{= fillColor}}" stroke="none" />
			<circle class="outline" cx="20" cy="20" r="19.5" fill="none" stroke="none" />
			<g class="chat-bubble-1" fill="none" stroke-opacity="1" transform="translate(4,4)">
				<path d="M19.5 13.5V9C19.5 8.17157 18.8284 7.5 18 7.5H6C5.17157 7.5 4.5 8.17157 4.5 9V17C4.5 17.8284 5.17157 18.5 6 18.5H7.5V20.75L9.75 18.5H12.5" stroke="var(--primary-color, currentColor)"/>
				<path d="M7 11H17" stroke="var(--primary-color, currentColor)"/>
				<path d="M7 15H13" stroke="var(--primary-color, currentColor)"/>
			</g>
			<g class="chat-bubble-2" fill="none" stroke-opacity="1" transform="translate(4,4)">
				<path d="M12.5 15V23C12.5 23.8284 13.1716 24.5 14 24.5H22.25L24.5 26.75V24.5H26C26.8284 24.5 27.5 23.8284 27.5 23V15C27.5 14.1716 26.8284 13.5 26 13.5H14C13.1716 13.5 12.5 14.1716 12.5 15Z" stroke="var(--primary-color, currentColor)"/>
				<path d="M15 17H25" stroke="var(--primary-color, currentColor)"/>
				<path d="M15 21H25" stroke="var(--primary-color, currentColor)"/>
			</g>
		</svg>
		#}}

	{{## def.secondary_bar:

		{{? self.secondary }}
			<div class="page-header__secondary px-4 pb-2 mt-20 ml-mt-16" {{? self.course_color }}
			{{= inline_course_color}}
			{{?? self?.course?.bg_css }} {{= inline_course_bg }}
				{{??}} {{= inline_bg_default}}{{?}}>
				<div class="page-header__components-organic flex items-center relative z-4"   >
					<div class="page-header__component is-left relative mr-70  z-3 font-black flex flex-row gap-2 items-center gap-0-sm" >
						{{# def.icon__menu__home}}
						{{? self.secondary.breadcrumbs }}
							<ol class="page-header__breadcrumbs leading-9 md-leading-6 flex-wrap font-normal"  itemscope itemtype="http://schema.org/BreadcrumbList">
								{{~ self.secondary.breadcrumbs :crumb:index }}
									{{ var data_nav = !crumb.action ? self.data_nav : ''; }}
									<li  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="{{? index==0}} first-breadceumb{{?}}">
										{{? index }}
											<span role="divider" class="font-black">{{= self.breadcrumb_divider }}</span>
										{{?}}
										{{? crumb.action || crumb.url }}
											<a class="page-header__link text-sm" href="{{= crumb.url || '#' }}" data-action="{{= crumb.action || '' }}" data-menu="{{= crumb.menu_id || ''}}" itemprop="item" {{=data_nav}}>
												<span itemprop="name">{{= crumb.label }}</span>
												{{? crumb.is_dropdown }}
													{{# def.icon__dropdown }}
												{{?}}
											</a>
											{{??}} <span itemprop="name">{{= crumb.label }}</span>
										{{?}}
										<meta itemprop="position" content="{{= index + 1 }}" />
									</li>
								{{~}}
							</ol>
							{{??}} {{= self.secondary.controls_left || '' }}
						{{?}} 
					</div>
					<div class="page-header__component is-mid h-10">
						{{? self.secondary.title }}
							<h5 class="page-header__page-title">
								{{= self.secondary.title }}
							</h5>
						{{?}}
					</div>
					<div class="page-header__component is-right font-black z-2 text-sm">
						<!-- {{= self.secondary.controls_right || '' }} -->
						 <!-- Toggle Hints -->
					</div>
					<div class="page-header__secondary-organic px-4">
				</div>
		
			</div>
		{{?}}
		#}}