<template name="filter">
	<div class="filter {{filterClasses}}">
		{{#if showingFilters}}
			<h4 class="filter-heading">
				<i class="fa fa-filter fa-fw" aria-hidden="true"></i>
				{{mf 'find.search_filter.title' 'Filter search'}}
				<span class="filter-active-tag">
					{{mf 'find.filter.isActive' 'active'}}
				</span>
				<div class="filter-captions-header-buttons">
					<button
						class="btn-link"
						id="toggleFilters"
						type="button">
						<i class="fa fa-remove" aria-hidden="true"></i>
						<span class="filter-remove-btn-text">
							{{mf 'find.hideFilters' 'Remove all filters'}}
						</span>
					</button>
				</div>
			</h4>
		{{/if}}
		<div class="filter-components">
			<div class="filter-component filter-course-states">
				<h4 class="filter-component-header">
					{{mf 'find.filter.courseStates' 'Course states'}}
				</h4>
				<div class="filter-course-state-captions">
					{{#each stateFilter in stateFilters}}
						<div class="filter-captions-column">
							<div class="filter-caption-wrap">
								<div
									class="filter-caption js-filter-caption {{stateFilterClasses stateFilter}}"
									data-filter-name="{{stateFilter.name}}"
									title="{{stateFilter.title}}">
									<span class="filter-caption-text">
										{{stateFilter.label}}
										<i class="fa fa-check" aria-hidden="true"></i>
									</span>
								</div>
							</div>
						</div>
					{{/each}}
				</div>
			</div>
			{{#if showingFilters}}
				{{> additionalFilters}}
			{{/if}}
		</div>
		{{#unless showingFilters}}
			<div class="filter-actions">
				<button
					class="btn-link"
					id="toggleFilters"
					type="button">
					<i class="fa fa-plus" aria-hidden="true"></i>
					{{mf 'filter.showAllFilters' 'Show all filters'}}
				</button>
			</div>
		{{/unless}}
	</div>
</template>

<template name="additionalFilters">
	<div class="clearfix visible-xs-block visible-sm-block"></div>
	<div
		aria-label="filter-course-roles"
		class="filter-component filter-course-roles"
		role="group">
		<h4 class="filter-component-header">
			{{mf 'find.filter.courseRoles' 'Course roles'}}
		</h4>
		{{#each role in roles}}
			<button
				class="filter-course-role js-filter-course-role {{roleClasses role}}"
				data-filter-name="{{role.name}}"
				type="button">
				<span class="filter-course-role-icon">
					<i class="{{role.icon}} fa-fw" aria-hidden="true"></i>
				</span>
				{{role.label}}
				<i class="fa fa-check" aria-hidden="true"></i>

			</button>
		{{/each}}
	</div>
	<div class="clearfix visible-xs-block"></div>
	<div class="filter-component filter-course-categories">
		<h4 class="filter-component-header">
			{{mf 'find.filter.categories' 'Categories'}}
		</h4>
		{{#unless isMobile}}
			{{#if categories}}
				<ul class="filter-selected-categories">
				{{#each categories}}
					<li>
						{{> categoryLabel}}
						<button type="button" class="remove-btn js-remove-category-btn glyphicon glyphicon-remove"
							data-tooltip="{{mf 'find.filter.removeCategory' 'Remove category {CATEGORYNAME} from filter' CATEGORYNAME=categoryName}}">
						</button>
					</li>
				{{/each}}
				</ul>
			{{/if}}
		{{/unless}}
		<div class="dropdown filter-categories-select">
			<input
				class="js-search-categories form-control"
				placeholder="{{mf 'find.searchCategories.placeholder' 'Choose categories'}}"
				type="text"
			>
			<button
				aria-expanded="false"
				class="dropdown-toggle"
				data-toggle="dropdown"
				type="button">
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu filter-categories-dropdown" role="menu">
				{{#if availableCategories}}
					{{#each availableCategories}}
						<li class="{{this}}">
							<a
								class="js-category-selection-label {{#if availableSubcategories this}}drodown-item-main{{/if}}"
								href="#">
								{{categoryNameMarked}}
								{{#if availableSubcategories this}}
									<small
										class="js-toggle-subcategories {{this}}"
										title="{{mf 'find.showSubcategories.title' 'Show/Hide subcategories'}}">
										<span class="fa fa-angle-down" aria-hidden="true"></span>
									</small>
								{{/if}}
							</a>
						</li>
						{{#each availableSubcategories this}}
							<li class="js-sub-category {{..}}">
								<a class="js-category-selection-label" href="#">
									{{categoryNameMarked}}
								</a>
							</li>
						{{/each}}
					{{/each}}
				{{else}}
					<span class="filter-no-categories-found">
						<span class="fa fa-exclamation fa-fw" aria-hidden="true"></span>
						{{mf 'find.filter-no-categories-found' 'No categories found.'}}
					</span>
				{{/if}}
			</ul>
		</div>
		{{#if isMobile}}
			{{#if categories}}
				<ul class="filter-selected-categories">
				{{#each categories}}
					<li>
						<a class="js-category-label" href="#">{{categoryName}}</a>
						<button
							class="remove-btn js-remove-category-btn glyphicon glyphicon-remove"
							data-tooltip="{{mf 'find.filter.removeCategory' 'Remove category {CATEGORYNAME} from filter' CATEGORYNAME=categoryName}}"
							type="button">
						</button>
					</li>
				{{/each}}
				</ul>
			{{/if}}
		{{/if}}
	</div>
</template>
