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

<xf:pageaction>
	<xf:button href="{{ link('button-manager/dropdown/add') }}" icon="add">{{ phrase('add_dropdown') }}</xf:button>
</xf:pageaction>

<div class="block">
	<div class="block-container">
		<h2 class="block-header">
			{{ phrase('editor_toolbars') }}
			<span class="block-desc">{{ phrase('rich_text_editor_supports_four_button_configs') }}</span>
		</h2>
		<div class="block-body">
			<xf:datalist>
				<xf:foreach loop="$toolbarTypes" key="$type" value="$phrases">
					<xf:datarow
						label="{$phrases.title}"
						explain="{$phrases.description}"
						href="{{ link('button-manager/edit', null, {'type': $type}) }}" />
				</xf:foreach>
			</xf:datalist>
		</div>
	</div>
</div>

<xf:if is="$editorDropdowns is not empty">
	<xf:form action="{{ link('button-manager/dropdown/toggle') }}" class="block" ajax="true">
		<div class="block-container">
			<h2 class="block-header">
				{{ phrase('editor_dropdowns') }}
			</h2>
			<div class="block-body">
				<xf:datalist>
					<xf:foreach loop="$editorDropdowns" value="$editorDropdown">
						<xf:datarow
							label="{$editorDropdown.title}"
							href="{{ link('button-manager/dropdown/edit', $editorDropdown) }}"
							icon="{{ $editorDropdown.icon ?: 'none' }}"
							delete="{{ link('button-manager/dropdown/delete', $editorDropdown) }}">
							<xf:toggle name="active[{$editorDropdown.cmd}]" selected="$editorDropdown.active"
								class="dataList-cell--separated" submit="true"
								tooltip="{{ phrase('enable_disable_x', {'title': $editorDropdown.title}) }}" />
						</xf:datarow>
					</xf:foreach>
				</xf:datalist>
			</div>
		</div>
	</xf:form>
</xf:if>