<xf:title>{{ phrase('smilies') }}</xf:title>

<xf:pageaction>
	<div class="buttonGroup">
		<xf:button href="{{ link('smilies/add') }}" icon="add">{{ phrase('add_smilie') }}</xf:button>
		<xf:button href="{{ link('smilie-categories/add') }}" icon="add" overlay="true">{{ phrase('add_category') }}</xf:button>

		<div class="buttonGroup-buttonWrapper">
			<xf:button class="menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">&#8226;&#8226;&#8226;</xf:button>
			<div class="menu" data-menu="menu" aria-hidden="true">
				<div class="menu-content">
					<h4 class="menu-header">{{ phrase('more_options') }}</h4>
					<a href="{{ link('smilies/sort') }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('button.sort') }}</a>
					<a href="{{ link('smilies/import') }}" class="menu-linkRow">{{ phrase('button.import') }}</a>
					<a href="{{ link('smilies', {}, {'export': 1}) }}" class="menu-linkRow">{{ phrase('button.export') }}</a>
				</div>
			</div>
		</div>
	</div>
</xf:pageaction>

<xf:css src="public:help_page_smilies.less" />

<xf:form action="{{ link(($exportView ? 'smilies/export' : 'smilies/toggle')) }}"
	ajax="{{ $exportView ? false : true }}" class="block"

	data-xf-init="select-plus"
	data-sp-checkbox=".dataList-cell--toggle input:checkbox"
	data-sp-container=".dataList-row"
	data-sp-control=".dataList-cell--link a[href]"
data-sp-debug="{{ true }}">

	<div class="block-outer">
		<xf:macro template="filter_macros" name="quick_filter" arg-key="smilies" arg-class="block-outer-opposite" />
	</div>
	<div class="block-container">

		<h2 class="block-tabHeader tabs" role="tablist">
			<!--[XF:tabs:start]-->
			<a class="tabs-tab {{ $exportView ? '' : 'is-active' }}" role="tab" tabindex="0" aria-controls="smilie-list" href="{{ link('smilies') }}">{{ phrase('smilies') }}</a>
			<a class="tabs-tab {{ $exportView ? 'is-active' : '' }}" role="tab" tabindex="0" aria-controls="export-mode" href="{{ link('smilies', {}, {'export': 1}) }}">{{ phrase('export') }}</a>
			<!--[XF:tabs:end]-->
		</h2>

		<div class="block-body">
			<xf:datalist>
				<xf:foreach loop="$smilieData.smilieCategories" key="$smilieCategoryId" value="$smilieCategory">
					<tbody class="dataList-rowGroup">
					<xf:if is="{{ count($smilieData.smilieCategories) > 1 }}">
						<xf:datarow rowtype="subsection" rowclass="{{ !$smilieCategoryId ? 'dataList-row--noHover' : '' }}">
							<xf:if is="$exportView">
								<xf:cell><xf:checkbox standalone="true"><xf:option check-all="< .dataList-rowGroup" /></xf:checkbox></xf:cell>
							</xf:if>
							<xf:if is="{{ $smilieCategoryId > 0 }}">
								<xf:cell href="{{ link('smilie-categories/edit', $smilieCategory) }}"
									colspan="3" overlay="true">
									{{ $smilieCategory.title }}
								</xf:cell>
								<xf:if is="!$exportView">
									<xf:delete href="{{ link('smilie-categories/delete', $smilieCategory) }}" />
								</xf:if>
							<xf:else />
								<xf:cell colspan="4">{{ phrase('smilie_category_title.uncategorized') }}</xf:cell>
							</xf:if>
						</xf:datarow>
					</xf:if>

					<xf:foreach loop="{$smilieData.smilies.{$smilieCategoryId}}" key="$smilieId" value="$smilie">
						<xf:datarow>
							<xf:if is="$exportView">
								<xf:toggle name="export[]" value="{$smilie.smilie_id}" />
							</xf:if>
							<xf:cell href="{{ link('smilies/edit', $smilie) }}" class="dataList-cell--min">
								{{ smilie($smilie.smilie_text_options.0) }}
							</xf:cell>
							<xf:cell href="{{ link('smilies/edit', $smilie) }}">
								{$smilie.title}
							</xf:cell>
							<xf:cell href="{{ link('smilies/edit', $smilie) }}">
								<xf:foreach loop="$smilie.smilie_text_options" value="$smilieText">
									<span class="smilieText">{$smilieText}</span>
								</xf:foreach>
							</xf:cell>
							<xf:if is="!$exportView">
								<xf:delete href="{{ link('smilies/delete', $smilie) }}" />
							</xf:if>
						</xf:datarow>
					<xf:else />
						<xf:datarow rowclass="dataList-row--noHover dataList-row--note">
							<xf:cell colspan="4" class="dataList-cell--noSearch">
								<xf:if is="{{ count($smilieData.smilieCategories) > 1 }}">
									{{ phrase('no_smilies_have_been_added_to_this_category_yet') }}
								<xf:else />
									{{ phrase('no_smilies_have_been_added_yet') }}
								</xf:if>
							</xf:cell>
						</xf:datarow>
					</xf:foreach>
					</tbody>
				</xf:foreach>
			</xf:datalist>
		</div>
		<div class="block-footer block-footer--split">
			<span class="block-footer-counter">{{ display_totals($smilieData.totalSmilies) }}</span>
			<xf:if is="$exportView">
				<span class="block-footer-select"><xf:checkbox standalone="true"><xf:option check-all=".dataList" label="{{ phrase('select_all') }}" /></xf:checkbox></span>
				<span class="block-footer-controls"><xf:button type="submit" icon="export" /></span>
			</xf:if>
		</div>
	</div>
</xf:form>