<template name="emojiPicker">
	<div class="emoji-picker">
		<div class="filter">
			<ul>
				{{#each category}}
					<li class="{{activeCategory .}}" title="{{categoryName .}}">
						<a href="#{{.}}" class="category-link"><i class="icon-{{.}}"></i></a>
					</li>
				{{/each}}
				<li class="change-tone">
					<a href="#change-tone"><span class="current-tone {{currentTone}}"></span></a>
					<ul class="tone-selector">
						<li><a href="#tone" class="tone" data-tone="0"><span class="tone-0"></span></a></li>
						<li><a href="#tone" class="tone" data-tone="1"><span class="tone-1"></span></a></li>
						<li><a href="#tone" class="tone" data-tone="2"><span class="tone-2"></span></a></li>
						<li><a href="#tone" class="tone" data-tone="3"><span class="tone-3"></span></a></li>
						<li><a href="#tone" class="tone" data-tone="4"><span class="tone-4"></span></a></li>
						<li><a href="#tone" class="tone" data-tone="5"><span class="tone-5"></span></a></li>
					</ul>
				</li>
			</ul>
		</div>
		<form class="emoji-filter input-line search search-form">
			<input type="text" class="search" autocomplete="off">
			<i class="icon-search"></i>
		</form>
		<h2 class="current-category-header">
			{{ currentCategory }}
		</h2>
		<div class="emojis">
			{{#each category}}
				<ul class="{{.}} emoji-list {{isVisible .}}">
					{{{emojiList .}}}
				</ul>
			{{/each}}
		</div>
	</div>
</template>
