<xf:title>{{ phrase('edit_toolbar') }}: {$typeTitle}</xf:title>

<xf:macro id="setup" />

<xf:pageaction>

	<a class="button menuTrigger"
		data-xf-click="menu"
		role="button"
		tabindex="0"
		aria-expanded="false"
		aria-haspopup="true">{$typeTitle}</a>

	<div class="menu" data-menu="menu" aria-hidden="true">
		<div class="menu-content">
			<h3 class="menu-header">{{ phrase('editor_toolbars') }}</h3>
			<xf:foreach loop="$toolbarTypes" key="$_toolbarTypeId" value="$_toolbarType">
				<a href="{{ link('button-manager/edit', [], {'type': $_toolbarTypeId}) }}"
					class="menu-linkRow {{ ($_toolbarTypeId == $type) ? 'is-selected' : '' }}">
					{$_toolbarType.title}
				</a>
			</xf:foreach>
		</div>
	</div>

	<xf:button href="{{ link('button-manager/reset', null, {'type': $type}) }}" data-xf-click="overlay" icon="refresh">
		{{ phrase('reset_button_configuration') }}
	</xf:button>
</xf:pageaction>

<script type="application/json" id="js-toolbarButtons">{$json}</script>
<script type="application/json" id="js-buttonData">{$buttonData|json|raw}</script>

<xf:css>
.toolbarWidthLimit { margin: 0 auto; }
.toolbarWidthLimit.toolbarWidthLimit--toolbarButtons   { width: {$toolbarSizes.LG}px; }
.toolbarWidthLimit.toolbarWidthLimit--toolbarButtonsMD { width: {$toolbarSizes.MD}px; }
.toolbarWidthLimit.toolbarWidthLimit--toolbarButtonsSM { width: {$toolbarSizes.SM}px; }
.toolbarWidthLimit.toolbarWidthLimit--toolbarButtonsXS { width: 320px; }
</xf:css>

<xf:form action="{{ link('button-manager/save', null, {'type': $type}) }}" ajax="true" data-xf-init="editor-manager" data-force-flash-message="on">
	<div class="block">
		<div class="block-container">
			<h2 class="block-header">
				{{ phrase('available_buttons_and_dropdown_menus') }}
			</h2>

			<div class="block-body">
				<div class="block-row">
					<div class="fr-box fr-box--editor fr-box--editor--{$type} fr-ltr fr-basic fr-top">
						<div class="js-dragList js-dragList-commandTray toolbar-commandTray fr-toolbar fr-ltr fr-desktop fr-top fr-basic">
							<xf:foreach loop="{{ array_keys($buttonData) }}" value="$cmd">
								<xf:if is="{$buttonData.{$cmd}}">
									<xf:macro id="toolbar_button"
										arg-button="{$buttonData.{$cmd}}"
										arg-cmd="{$cmd}"
										arg-displayTooltips="{{ true }}"
										arg-includeDropdownControls="{{ true }}" />
								<xf:elseif is="$cmd == '-hr'" />
									<div class="hr"></div>
								</xf:if>
							</xf:foreach>
							<xf:if is="$name">
								<xf:hiddenval name="{$name}" class="js-dragListValue" />
							</xf:if>
						</div>
					</div>
				</div>
			</div>

			<div class="block-row block-row--minor u-muted">
				{{ phrase('available_buttons_and_dropdown_menus_desc') }}
			</div>
		</div>
	</div>

	<div class="block">
		<div class="block-container">
			<h3 class="block-header">
				{$typeTitle}
			</h3>

			<div class="block-body">
				<xf:foreach loop="$toolbarButtons.toolbarButtons" key="$key" value="$data">
					<xf:macro id="button_group"
						arg-key="{$key}"
						arg-data="{$data}"
						arg-buttonData="{$buttonData}" />
				</xf:foreach>
			</div>

			<div class="block-row block-row--minor u-muted">
				{$typeDescription}
			</div>

			<xf:hiddenval name="editor_toolbar_config[{$type}]" data-toolbar-type="{$type}" class="js-dragListValue" />
			<xf:submitrow icon="save" rowtype="simple" />
		</div>
	</div>
</xf:form>

<xf:form action="{{ link('button-manager/dummy-post', $thread) }}" class="block" ajax="true"
	draft="{{ link('button-manager/dummy-draft') }}"
	data-xf-init="attachment-manager">

	<div class="block-container">
		<div class="block-body">
			<p></p>

			<!--this overrides the normal toolbar json sent to the RTE as document.querySelector('.js-editorToolbars')-->
			<script class="js-editorToolbars" type="application/json">{$toolbarButtons|json|raw}</script>


			<div class="toolbarWidthLimit toolbarWidthLimit--{$type}">
				<xf:editor name="button_layout_preview"
					value=""
					attachments="{{ [] }}"
					data-min-height="50"
					data-max-height="100"
					placeholder="{{ phrase('this_is_preview_of_your_button_layout') }}..."
					data-deferred="off"
					data-xf-key="{{ phrase('shortcut.quick_reply') }}"
					data-preview-url="{{ link('button-manager/dummy-preview') }}" />
				<xf:macro id="public:helper_attach_upload::upload_block" arg-attachmentData="{{ {'constraints': { 'extensions': ['txt','mp4','png'] } } }}" />
			</div>

			<p></p>

		</div>
	</div>
</xf:form>

<xf:macro id="button_group" arg-key="!" arg-data="!" arg-buttonData="!">
	<div class="block-row block-row--buttonGroup js-buttonGroup" id="js-buttonGroup--{$key}">
		<div class="block-row--buttons">
			<div class="js-dragList toolbar toolbar--dragTarget toolbar--{$key}" id="js-toolbar--{$key}">
				<xf:foreach loop="$data.buttons" value="$cmd">
					<xf:macro id="toolbar_button"
						arg-button="{$buttonData.{$cmd}}"
						arg-cmd="{$cmd}"
						arg-displayTooltips="{{ true }}"
						arg-includeDropdownControls="{{ false }}" />
				</xf:foreach>
			</div>
		</div>
		<div class="block-row--buttonMenu">
			<xf:button class="menuTrigger button--link button--icon button--iconOnly"
				data-xf-click="menu"
				aria-expanded="false"
				aria-haspopup="true"
				fa="fa-tools"
				notfa="fa-info-circle" />
			<div class="menu" data-menu="menu" aria-hidden="true" id="js-toolbar-menu--{$key}">
				<div class="menu-content">
					<h3 class="menu-header">{{ phrase('group_options') }}</h3>

					<div class="menu-row menu-row--separated">
						{{ phrase('buttons_visible:') }}
						<div class="u-inputSpacer">
							<xf:numberbox name="buttonsVisible" value="{$data.buttonsVisible}"
								autofocus="autofocus" min="0"
								data-button-smaller="1" />
						</div>
					</div>

					<div class="menu-row menu-row--separated">
						{{ phrase('group_alignment:') }}
						<div class="u-inputSpacer">
							<xf:select name="align" value="{$data.align}">
								<xf:option value="left">{{ phrase('left') }}</xf:option>
								<xf:option value="right">{{ phrase('right') }}</xf:option>
							</xf:select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro id="toolbar_block"
	arg-type=""
	arg-name=""
	arg-buttons="!"
	arg-buttonData="!"
	arg-toolbarType="!"
	arg-displayTooltips="{{ false }}"
	arg-includeDropdownControls="{{ false }}">
	<div class="block-body">
		<div class="block-row">
			<div class="fr-box fr-box--editor fr-box--editor--{$type} fr-ltr fr-basic fr-top">
				<div class="toolbar--dragTarget js-dragList js-dragList-{$toolbarType} toolbar-{$toolbarType} fr-toolbar fr-ltr fr-desktop fr-top fr-basic">
					<xf:foreach loop="$buttons" value="$cmd">
						<xf:if is="{$buttonData.{$cmd}}">
							<xf:macro id="toolbar_button"
								arg-button="{$buttonData.{$cmd}}"
								arg-cmd="{$cmd}"
								arg-displayTooltips="{$displayTooltips}"
								arg-includeDropdownControls="{$includeDropdownControls}" />
						</xf:if>
					</xf:foreach>
					<xf:if is="$name">
						<xf:hiddenval name="{$name}" class="js-dragListValue" />
					</xf:if>
				</div>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro id="toolbar_button" arg-button="!" arg-cmd="!" arg-displayTooltips="{{ false }}" arg-includeDropdownControls="{{ false }}">
	<div data-cmd="{$cmd}" data-xf-init="{{ $displayTooltips ? 'tooltip' : '' }}" title="{{ $displayTooltips ? $button.title : '' }}"
		class="{{ $button.type ? 'toolbar-' . $button.type : '' }} fr-command fr-btn {{ ($button.type == 'dropdown' OR $button.type == 'editable_dropdown') ? 'fr-dropdown' : '' }} {{ $button.fa ? 'fr-btn-font_awesome' : ($button.text ? 'fr-btn-text' : 'fr-btn-image') }}">
		<xf:macro id="toolbar_icon" arg-button="{$button}" />
		<span class="fr-sr-only">{$button.title}</span>
	</div>
</xf:macro>

<xf:macro id="toolbar_icon" arg-button="!">
	<xf:if is="$button.fa">
		<xf:fa icon="{$button.fa}" />
	<xf:elseif is="$button.image" />
		<img src="{$button.image}" alt="" />
	<xf:elseif is="$button.text" />
		<span style="text-align: center;">{$button.text}</span>
	<xf:elseif is="$button.svg" />
		<svg class="fr-svg" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="{$button.svg}"></path>
		</svg>
	</xf:if>
</xf:macro>

<xf:macro id="setup">
	<xf:css src="public:editor.less" />
	<xf:css src="button_manager.less" />
	<xf:js dev="vendor/dragula/dragula.js, xf/editor_manager.js" prod="xf/editor_manager-compiled.js" />

	<script class="js-extraPhrases" type="application/json">
		{
			"buttons_menus_may_not_be_duplicated": "{{ phrase('buttons_menus_may_not_be_duplicated')|escape('json') }}",
			"button_removed": "{{ phrase('button_removed')|escape('json') }}"
		}
	</script>
</xf:macro>