<xf:macro name="color_picker"
	arg-name="!"
	arg-value=""
	arg-mapName=""
	arg-allowPalette="false"
	arg-label=""
	arg-hint=""
	arg-explain=""
	arg-html=""
	arg-row="{{ true }}"
	arg-rowClass=""
	arg-rowtype=""
	arg-colorData=""
	arg-required="{{ false }}"
	arg-includeScripts="{{ true }}"
	arg-showTxt="{{ false }}">

	<xf:css src="public:color_picker.less" />
	<xf:js src="xf/color_picker.js" min="1" />

	<xf:set var="$picker">
		<div class="inputGroup inputGroup--joined inputGroup--color"
			data-xf-init="color-picker"
			data-allow-palette="{$allowPalette}"
			data-map-name="{$mapName}">

			<xf:textbox name="{$name}" value="{$value}" required="{$required}" dir="ltr" />
			<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
			<xf:if is="{$showTxt}">
				<div class="inputGroup-text inputGroup-text--rgbTxt"><span class="js-rgbTxt-r"></span></div>
				<div class="inputGroup-text inputGroup-text--rgbTxt"><span class="js-rgbTxt-g"></span></div>
				<div class="inputGroup-text inputGroup-text--rgbTxt"><span class="js-rgbTxt-b"></span></div>
				<!--<div class="inputGroup-text inputGroup-text&#45;&#45;rgbTxt"><span class="js-rgbTxt-b"></span></div>-->
			</xf:if>
		</div>
	</xf:set>

	<xf:if is="$row">
		<xf:formrow rowtype="{$rowtype}"
			rowclass="formRow--input {$rowClass}"
			label="{$label}"
			hint="{$hint}"
			explain="{$explain}"
			html="{$html}">

			{$picker|raw}
		</xf:formrow>
	<xf:else />
		{$picker|raw}
	</xf:if>

	<xf:if is="{$includeScripts}">
		<xf:macro name="color_picker_scripts" arg-colorData="{$colorData}" />
	</xf:if>
</xf:macro>



<xf:macro name="color_picker_scripts" arg-colorData="">

	<xf:head option="js-colorPicker">

		<script class="js-namedColors" type="application/json">
			{{ named_colors()|json|raw }}
		</script>

		<script class="js-extraPhrases" type="application/json">
			{
				"picker": "{{ phrase('picker')|escape('json') }}",
				"update": "{{ phrase('update')|escape('json') }}"
			}
		</script>

		<xf:if is="$colorData">
			<script class="js-colorPickerData" type="application/json">
				{$colorData|json|raw}
			</script>
		</xf:if>

	</xf:head>

</xf:macro>