<template name="findWrap">
	<div class="find container">
		{{> find}}
	</div>
</template>

<template name="find">
	<div class="page-component find-header {{#if showingFilters}}filter-expanded{{/if}}">
		<div class="find-header-heading">
			<h1 class="find-heading">
				{{mf 'find.WhatLearn?' 'What do I want to learn?'}}
			</h1>
		</div>
		<div class="find-header-search">
			<div class="js-search-field">
				<div class="input-group">
					<input class="js-search-input form-control"
						type="text"
						id="find"
						value="{{search}}"
						placeholder="{{mf 'find.search_placeholder' 'Everything'}}"/>
					<span class="input-group-btn">
						<button type="button" class="btn btn-success js-find-btn">
							{{mf 'find.search_go' 'Go!'}}
						</button>
					</span>
				</div>
			</div>
		</div>
		<div class="find-header-filter">
			{{> filter}}
		</div>
	</div>
	<div class="page-component">
		{{#if hasResults}}
			<div class="course-list">
				{{#each result in results}}
					{{> courseCompact result}}
				{{/each}}
			</div>


			{{#unless ready}}
				{{> loadingPage}}
			{{/unless}}

			{{#if hasMore}}
				<div class="show-more-courses">
					<button type="button" class="btn btn-success js-more-courses">
						<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
						{{mf 'find.showMoreCourses' 'Show more courses'}}
					</button>
				</div>
			{{/if}}
		{{else}}
			{{#if ready}}
				<div class="no-results">
					<div class="no-results-body">
						<span class="fa fa-exclamation-circle fa-fw" aria-hidden="true"></span>
						{{mf 'find.no-courses-found' 'No Courses found.'}}
					</div>
					{{#if searchIsLimited}}
						<div class="btn-group">
							{{#if filteredRegion}}
								<button type="button" class="btn btn-default js-all-regions-btn">
									<span class="fa fa-dot-circle-o fa-fw" aria-hidden="true"></span>
									{{mf 'find.searchAllRegions' 'Search in all regions'}}
								</button>
							{{/if}}
							{{#if activeFilters}}
								<button type="button" class="btn btn-cancel js-toggle-filter">
									<span class="fa fa-remove fa-fw" aria-hidden="true"></span>
									{{mf 'find.hideFilters'}}
								</button>
							{{/if}}
						</div>
					{{/if}}
				</div>
			{{else}}
				{{> loadingPage}}
			{{/if}}
		{{/if}}
	</div>
	<div class="page-component">
		<div class="container-sm">
			{{> courseEdit newCourse}}
		</div>
	</div>
</template>
