<template name="emojiPicker">
	<div class="emoji-picker rc-popover__content">
		<div class="emoji-top">
			<div class="rc-input">
				<label class="rc-input__label">
					<div class="rc-input__wrapper">
						<div class="rc-input__icon">
							{{> icon block="rc-input__icon-svg" icon="magnifier" }}
						</div>
						<input name="name" type="text" class="rc-input__element js-emojipicker-search" placeholder="{{_ "Search"}}" autocomplete="off">
					</div>
				</label>
			</div>
			<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>
