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

<xf:pageaction>
	<div class="buttonGroup">
		<xf:button href="{{ link('bb-codes/add') }}" icon="add">{{ phrase('add_bb_code') }}</xf:button>
		<xf:button href="{{ link('bb-codes/import') }}" icon="import" overlay="true" />
		<xf:if is="$bbCodes is not empty">
			<xf:button href="{{ link('bb-codes', null, {'export': ($exportView ? '' : '1')}) }}" icon="export" />
		</xf:if>
	</div>
</xf:pageaction>

<xf:if is="$bbCodes is not empty">
	<xf:form action="{{ link(($exportView ? 'bb-codes/export' : 'bb-codes/toggle')) }}"
		ajax="{{ $exportView ? false : true }}" class="block">

		<div class="block-outer">
			<xf:macro template="filter_macros" name="quick_filter" arg-key="bb-codes" arg-class="block-outer-opposite" />
		</div>
		<div class="block-container">
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$bbCodes" value="$bbCode">
						<xf:datarow>
							<xf:if is="$exportView">
								<xf:toggle name="export[]" value="{$bbCode.bb_code_id}"
									disabled="{{ $bbCode.addon_id ? true : false }}"
									tooltip="{{ $bbCode.addon_id ? phrase('bb_codes_for_addon_not_exported_independently') : '' }}" />
							</xf:if>
							<xf:main href="{{ $exportView ? null : link('bb-codes/edit', $bbCode) }}">
								<xf:label>{$bbCode.title}</xf:label>
								<xf:hint>[{$bbCode.bb_code_id}]</xf:hint>
								<xf:explain>{$bbCode.description}</xf:explain>
							</xf:main>
							<xf:if is="!$exportView">
								<xf:toggle name="active[{$bbCode.bb_code_id}]" selected="$bbCode.active"
									class="dataList-cell--separated" submit="true"
									tooltip="{{ phrase('enable_disable_x', {'title': '[' . $bbCode.bb_code_id . ']'}) }}" />
								<xf:delete href="{{ link('bb-codes/delete', $bbCode) }}" />
							</xf:if>
						</xf:datarow>
					</xf:foreach>
				</xf:datalist>
			</div>
			<div class="block-footer block-footer--split">
				<span class="block-footer-counter">{{ display_totals($bbCodes) }}</span>
				<xf:if is="$exportView">
					<span class="block-footer-select"><xf:checkbox standalone="true"><xf:option check-all="< .block-container" 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>
<xf:else />
	<div class="blockMessage">{{ phrase('no_items_have_been_created_yet') }}</div>
</xf:if>