<template name="emojiPicker">
	<div class="emoji-picker secondary-background-color">
		<div class="emoji-top">
			<form class="emoji-filter input-line search search-form">
				<input type="text" class="search content-background-color" autocomplete="off">
				<i class="icon-search secondary-font-color"></i>
			</form>
			<div class="change-tone">
				<a href="#change-tone"><span class="current-tone {{currentTone}}"></span></a>
				<ul class="tone-selector secondary-background-color">
					<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>
			</div>
		</div>
		<div class="filter">
			<ul class="filter-list">
				{{#each category}}
					<li class="filter-item border-secondary-background-color {{activeCategory .}}" title="{{categoryName .}}">
						<a href="#{{.}}" class="category-link color-info-font-color"><i class="category-icon icon-{{.}}"></i></a>
					</li>
				{{/each}}
			</ul>
		</div>
		<div class="emojis">
			{{#each category}}
				<ul class="{{.}} emoji-list {{isVisible .}}">
					{{{emojiList .}}}
				</ul>
			{{/each}}
		</div>
	</div>
</template>
