<script type="text/html" id="tmpl-menu-icons-item-field-preview-font">
	<i class="_icon {{data.type}} {{ data.icon }} {{ data.box_icon_merge }}"
       style="font-size:{{ data.font_size_amount }}px;"
    ></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-field-preview-image">
	<img src="{{ data.url }}" class="_icon" alt="" />
</script>

<script type="text/html" id="tmpl-menu-icons-item-field-preview-svg">
	<img src="{{ data.url }}" class="_icon" alt="" />
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-before-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-tab-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} {{ data.box_icon_merge }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-after-buddyboss">
	<span>{{ data.title }}</span>
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-hide_label-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-before-custom-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-tab-custom-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} {{ data.box_icon_merge }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-after-custom-buddyboss">
	<span>{{ data.title }}</span>
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-hide_label-custom-buddyboss">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }} {{ data.box_icon_merge }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-before">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-tab">
	<i class="_icon {{ data.type }} {{ data.icon }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-after">
	<span>{{ data.title }}</span>
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-hide_label">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:24px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-before-custom">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-tab-custom">
	<i class="_icon {{ data.type }} {{ data.icon }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-after-custom">
	<span>{{ data.title }}</span>
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-font-hide_label-custom">
	<i class="_icon {{ data.type }} {{ data.icon }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	></i>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-before">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="vertical-align:{{ data.vertical_align }};"
	/>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-tab">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }}"
		style="vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-after">
	<span>{{ data.title }}</span>
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-hide_label">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-before-custom">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	/>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-tab-custom">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-after-custom">
	<span>{{ data.title }}</span>
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-image-hide_label-custom">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon {{ data.type }} _{{ data.position }}"
		style="font-size:{{ data.font_size_amount }}px; vertical-align:{{ data.vertical_align }};"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-svg-before">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon _{{data.type}}"
		style="width:{{data.svg_width}}em;vertical-align:{{ data.vertical_align }}"
	/>
	<span>{{ data.title }}</span>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-svg-tab">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon _{{data.type}}"
		style="width:{{data.svg_width}}em;vertical-align:{{ data.vertical_align }}"
	/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-svg-after">
	<span>{{ data.title }}</span>
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon _{{data.type}}"
		style="width:{{data.svg_width}}em;vertical-align:{{ data.vertical_align }}"
		/>
</script>

<script type="text/html" id="tmpl-menu-icons-item-sidebar-preview-svg-hide_label">
	<img src="{{ data.url }}"
		alt="{{ data.alt }}"
		class="_icon _{{data.type}}"
		style="width:{{data.svg_width}}em;vertical-align:{{ data.vertical_align }}"
		/>
</script>

<script type="text/html" id="tmpl-menu-icons-settings-field-text">
	<span>{{ data.label }}</span>
	<input type="text" data-setting="{{ data.id }}" value="{{ data.value }}" />
</script>

<script type="text/html" id="tmpl-menu-icons-settings-field-number">
	<span>{{ data.label }}</span>
	<input type="number" min="{{ data.attributes.min }}" step="{{ data.attributes.step }}" data-setting="{{ data.id }}" value="{{ data.value }}" />
	<# if ( data.description ) { #>{{ data.description }} <# } #>
</script>

<script type="text/html" id="tmpl-menu-icons-settings-field-select">
	<span>{{ data.label }}</span>
	<select data-setting="{{ data.id }}">
		<# _.each( data.choices, function( choice ) { #>
			<# if ( data.value === choice.value ) { #>
				<option selected="selected" value="{{ choice.value }}">{{ choice.label }}</option>
			<# } else { #>
				<option value="{{ choice.value }}">{{ choice.label }}</option>
			<# } #>
		<# } ); #>
	</select>
</script>

<?php do_action( 'menu_icons_js_templates' );
