<template name="regionSelectionWrap">
	{{#if Template.subscriptionsReady}}
		{{#if state 'searchingRegions'}}
			<li class="navbar-form navbar-form-selection dropdown">
				<span class="fa fa-dot-circle-o fa-fw" aria-hidden="true"></span>
				{{> regionSelection}}
			</li>
		{{else}}
			{{> regionDisplay}}
		{{/if}}
	{{/if}}
</template>

<template name="regionDisplay">
	<li>
		<a class="navbar-link js-region-display">
			<span class="fa fa-dot-circle-o fa-fw" aria-hidden="true"></span>
			{{#if currentRegion}}
				{{currentRegion.name}}
			{{else}}
				{{mf 'menue.All regions' 'All regions'}}
			{{/if}}
		</a>
	</li>
</template>

<template name="regionSelection">
	<form class="js-region-search-form">
		<input
			class="form-control js-region-search"
			type="text"
			value="{{#if region}}{{region.name}}{{else}}{{mf 'menue.All regions' 'All regions'}}{{/if}}"
		>
		<input type="submit" style="display: none"/>
		<span
			aria-expanded="false"
			class="dropdown-toggle"
			data-toggle="dropdown"
			role="button">
		</span>
		<ul class="dropdown-menu" role="menu">
			<li class="dropdown-header dropdown-legend">
				<div class="dropdown-addon-right">
					<span
						class="badge badge-courses"
						title="{{mf 'regionSelection.legend.numCoursesTitle' 'Number of courses'}}">
						# <i class="fa fa-circle"></i>
					</span>
					<span
						class="badge badge-events"
						title="{{mf 'regionSelection.legend.numEventsTitle' 'Number of upcoming events'}}">
						# <i class="fa fa-calendar"></i>
					</span>
				</div>
				{{mf 'regionSelection.legend.region' 'Region'}}
			</li>
			<li>
				<a class="js-region-link js-nav-dropdown-close" href="#">
					<div class="dropdown-addon-right">
						<span
							class="badge badge-courses"
							title="{{mf 'regions.allCourses.title' '{COUNT, plural, =0 {no courses} one {one course} other {# courses}} on {SITENAME}' COUNT=allCourses SITENAME=siteName}}">
							{{allCourses}}
						</span>
						<span
							class="badge badge-events"
							title="{{mf 'regions.allUpcomingEvents.title' '{COUNT, plural, =0 {no upcoming events} one {one upcoming event} other {# upcoming events}} on {SITENAME}' COUNT=allUpcomingEvents SITENAME=siteName}}">
							{{allUpcomingEvents}}
						</span>
					</div>
					{{mf 'menue.All regions' 'All regions'}}
					{{#if isCurrentRegion}}
						<span class="checkmark glyphicon glyphicon-ok"></span>
					{{/if}}
				</a>
			</li>
			{{#each region in regions}}
				{{> regionSelectionItem region}}
			{{/each}}
			{{#if inactiveRegions.count}}
				{{#if state 'showAllRegions'}}
					{{#each region in inactiveRegions}}
						{{> regionSelectionItem region}}
					{{/each}}
				{{else}}
					<li class="divider" role="separator"></li>
					<li>
						<button class="btn-link js-show-all-regions" type="button">
							<i class="fa fa-fw fa-list" aria-hidden="true"></i>
							{{mf 'regionSelection.showAll' 'Show all regions'}}
						</button>
					</li>
				{{/if}}
			{{/if}}
		</ul>
	</form>
</template>

<template name="regionSelectionItem">
	<li>
		<a href="#" class="js-region-link js-nav-dropdown-close">
			<div class="dropdown-addon-right">
				<span
					class="badge badge-courses"
					title="{{mf 'regions.courses.title' '{COUNT, plural, =0 {no courses} one {one course} other {# courses in}} in {REGION}' COUNT=courseCount REGION=this.name}}">
					{{courseCount}}
				</span>
				<span
					class="badge badge-events"
					title="{{mf 'regions.eventCount.title' '{COUNT, plural, =0 {no upcoming events} one {one upcoming event} other {# upcoming events}} in {REGION}' COUNT=futureEventCount REGION=this.name}}">
					{{futureEventCount}}
				</span>
			</div>
			{{regionNameMarked}}
			{{#if isCurrentRegion}}
				<span class="checkmark glyphicon glyphicon-ok"></span>
			{{/if}}
		</a>
	</li>
</template>
