{{ var spriteURL = 'https://dmn92m25mtw4z.cloudfront.net/img_set/sprite/v1/sprite-1w.png'; }}
{{? it.markup }}
	{{= it.markup }}
	{{?? it.header }} {{# def.header }}
	{{?? it.header__guest }} {{# def.header__guest }}
	{{?? it.header__region_dropdown__menu }} {{# def.header__region_dropdown__menu }}
	{{?? it.header__settings }} {{# def.header__settings }}
	{{?? it.header__user_dropdown__menu }} {{# def.header__user_dropdown__menu }}
	{{?? it.switch_users }} {{# def.header__switch_users }}
	{{?? it.switch_users__password }} {{# def.switch_users__password }}
	{{?? it.switch_users__user }} {{# def.switch_users__user }}
{{?}}

/* DEFINITIONS */

	{{## def.header:

		{{ var details = it.header; }}

		<header id="page-header" class="page-header">
			<div class="page-header__container container">
				<div class="page-header__main" style="position:relative">
					{{# def.header__logo }}
					{{? details.quick_search }}
						{{# def.header__search }}
					{{?}}
				</div>
				{{? details.announcements }}
					{{# def.header__announcements }}	
				{{?}}
				{{# def.header__user_dropdown }}
			</div>
			{{# def.header__modal }}
		</header>

		#}}

	{{## def.header__guest:

		{{ var details = it.header__guest; }}

		<header id="page-header" class="page-header">
			<div class="page-header__container container">
				<div class="page-header__main " style="position:relative">
					{{# def.header__logo }}
					{{# def.header__region_dropdown }}
					{{? details.quick_search }}
						{{# def.header__search }}
					{{?}}
				</div>
				{{# def.header__links }}
			</div>
		</header>

		#}}

	{{## def.header__links: 

		<ul class="page-header__links">
			{{~ details.links :link:index }}
				<li class="{{= index ? 'hidden-xs' : '' }}">
					<a href="{{= link.url }}">
						{{= link.label }}
					</a>
				</li>
			{{~}}
		</ul>

		#}}

	{{## def.header__logo: 

		<a href="{{= details.root_url }}">
			{{= details.logo }}
		</a>

		#}}

	{{## def.header__modal: 

		<div id="page-header--modal" class="modal fade">
			<div class="modal-dialog"></div>
		</div>

		#}}
	
	{{## def.header__announcements:
		
		{{ var class_modifiers = ''; }}
		{{? details.announcements }}
			{{ class_modifiers = details.announcements.has_new ? 'has-new' : ''; }}
		{{?}}

		<button class="page-header__announcements {{= class_modifiers }}" data-trigger="showAnnouncements">
			<span class="dot"></span>
			<span class="fa fa-bell-o"></span>
		</button>

		#}}

	{{## def.header__search: 

		<div class="page-header__search hidden-xs">
			{{= details.quick_search }}
		</div>

		#}}

	{{## def.header__region_dropdown: 

		<div id="page-header--region-dropdown" class="page-header__region-dropdown dropdown">
			<button class="btn btn-text-only" type="button" data-toggle="dropdown">
				<img class="flag-icon flag-icon-{{= details.region_key }}" 
					src="{{= spriteURL }}" alt="{{= details.region_label }}">
			</button>
			<ul class="dropdown-menu"></ul>
		</div>

		#}}

	{{## def.header__region_dropdown__menu: 

		{{ var details = it.header__region_dropdown__menu; }}

		<li class="dropdown-header">
			<span class="text-loud">
				{{= details.region_heading }}
			</span>
		</li>
		<li class="divider" role="separator"></li>
		{{~ details.regions :item }}
			{{ var class_modifiers = 'flag-icon flag-icon-' + item.region_key; }}
			<li>
				<a href="{{= item.region_url }}">
					<img class="{{= class_modifiers }}" src="{{= spriteURL }}" alt="{{= item.alt_text }}">
					{{= item.region_name }}
				</a>
			</li>
		{{~}}

		#}}

	{{## def.header__settings: 
		
		{{ var self = it.header__settings; }}
		
		<div class="my-settings">
			<h5 class="my-settings__heading">
				{{= self.display_heading }}
			</h5>
			<ul class="my-settings__items-list">
				{{~ self.display_ids :id }}
					{{ var display_item = self.display_items[id]; }}
					{{ var is_checked = display_item.value ? 'checked' : ''; }}
					<li class="my-settings__item" data-item-id="{{= id }}">
						<h6>{{= display_item.label }}</h6>
						<label class="switch">
							<input type="checkbox" {{= is_checked }} name="{{= id }}">
							<span class="slider"></span>
						</label>
					</li>
				{{~}}
			</ul>
			<h5 class="my-settings__heading">
				{{= self.apps_heading }}
			</h5>
			<ul class="my-settings__items-list">
				{{~ self.app_ids :id }}
					{{ var app = self.apps[id]; }}
					<li class="my-settings__item">
						<h6>{{= app.label }}</h6>
					</li>
				{{~}}
			</ul>
		</div>

		#}}

	{{## def.header__user_dropdown: 

		<div id="page-header--user-dropdown" class="page-header__user-dropdown dropdown">
			<button class="btn btn-text-only" type="button" data-toggle="dropdown">
				<img id="page-header--user-photo" class="page-header__user-photo" src="{{= details.user_photo }}">
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu dropdown-menu-right"></ul>
		</div>

		#}}

	{{## def.header__user_dropdown__menu: 

		{{ var details = it.header__user_dropdown__menu; }}
		{{ var action_ids = details.action_ids; }}
		{{ var switch_users = details.switch_users; }}
		{{ var user_actions = details.user_actions; }}

		<li class="dropdown-header">
			<em id="page-header--user-name" class="text-loud">
				{{= details.user_name }}
			</em>
		</li>
		{{# def.header__user_actions }}
		{{# def.header__switch_users }}

		#}}

	{{## def.header__user_actions: 
		
		{{? action_ids && action_ids.length && user_actions }}
			<li class="divider" role="separator"></li>
			{{~ action_ids :item_id }}
				{{ var item = user_actions[item_id]; }}
				{{ var item_trigger = item.trigger || ''; }}
				{{ var item_url = item.url || '#'; }}
				<li>
					<a href="{{= item_url }}" data-trigger="{{= item_trigger }}">
						{{= item.label }}
					</a>
				</li>
			{{~}}
		{{?}}
		
		#}}

	{{## def.header__switch_users: 

		{{ var switch_users = switch_users || it.switch_users; }}

		{{? switch_users }}
			<li class="divider" role="separator"></li>
			<li class="dropdown-header text-loud">
				<span class="text-loud">
					{{= switch_users.heading }}
				</span>
			</li>
			<li class="divider" role="separator"></li>
			{{~ switch_users.user_list :user }}
				{{# def.switch_users__user }}
			{{~}}
		{{?}}

		#}}

	{{## def.switch_users__password: 

		{{ var details = it.switch_users__password; }}
		{{ var form = details.form; }}
		{{ var image_css = "background-image:url(" +form.user_image+ ")"; }}

		<form class="page-header__password-form" action="#" autocomplete="off" data-user-guid="{{= form.user_guid }}">
			<h4 class="h6 space-bottom-sm">
				{{= form.instructions }}
			</h4>
			<div class="input-group">
				<span class="input-group-addon" {{? image_css }}style="{{= image_css }}"{{?}}></span>
				<input type="password" class="form-control" placeholder="{{= form.password_placeholder }}">
			</div>
		</form>

		#}}

	{{## def.switch_users__user: 

		{{ var user = user || it.switch_users__user; }}
		
		<li>
			<a href="#" data-trigger="switchUser" data-guid="{{= user.guid }}">
				<img class="page-header__user-photo page-header__user-photo--sm space-right-xs" 
					src="{{= user.photo_url }}">
				{{= user.name }}
			</a>
		</li>

		#}}