<div>
	
	<script type="text/template" id="builder-sidebar-tpl">
		
		<div class="wpmudev-sidebar--header">
			
			<div class="wpmudev-header--main">
				
				<div class="wpmudev-header--text">
					
					<h2 class="wpmudev-title">{{Forminator.l10n.builder.click_drag_label}}</h2>
				
				</div>
				
				<div class="wpmudev-header--action">

					<button class="wpmudev-action--button forminator-sidebar-close">
						
						<span class="wpmudev-icon--close"></span>

						<span class="wpmudev-sr-only">{{ Forminator.l10n.options.close }}</span>
						
					</button>
				
				</div>

			</div>
		
		</div>

	</script>

	<script type="text/template" id="builder-sidebar-field-tabs-tpl">
		
		<div class="wpmudev-sidebar--section wpmudev-sort-fields">

			<ul class="wpmudev-sidebar--menu wpmudev-sort-fields--menu">
				
				{[ _.each( headings, function( value, key ) { ]}
					
					<li class="wpmudev-menu--item"><a href="#wpmudev-fields--{{value}}">{{ Forminator.l10n.builder[ value ] ? Forminator.l10n.builder[ value ] : value }}</a></li>

				{[ }) ]}

			</ul>

			{[ _.each( tabs, function( value, key ){ ]}
				
				<div id="wpmudev-fields--{{key}}" class="wpmudev-sidebar--content wpmudev-sort-fields--list">
					
					<ul class="wpmudev-list--options">{[ _.each( _.sortBy( value, 'position' ), function( tab ) { ]}<li class="draggable-element draggable-{{ tab.slug }}" data-shadowid="{{ tab.slug }}">{{ tab.name }}</li>{[ }) ]}</ul>

				</div>

			{[ }) ]}
			
		</div>

	</script>

	<script type="text/template" id="builder-sidebar-settings-tpl">

		<div class="wpmudev-sidebar--wrap">

			<div class="wpmudev-sidebar--header">

				<div class="wpmudev-header--breadcrumbs">
					
					<span class="wpmudev-breadcrumb wpmudev-breadcrumb--back">« <a href="#">{{ Forminator.l10n.builder.back_to_fields }}</a></span>

				</div>

				<div class="wpmudev-header--main">

					<div class="wpmudev-header--icon" aria-hidden="true">
						<span class="wpdui-icon wpdui-icon-widget-settings-config"></span>
					</div>
					
					<div class="wpmudev-header--text">
						<h2 class="wpmudev-title">{{ field_settings.name }}</h2>
					</div>

				</div>

			</div>

			<div class="wpmudev-sidebar--section">

				<ul class="wpmudev-sidebar--menu">

					<li class="wpmudev-menu--item settings-general"><a href="#wpmudev-settings--general">{{ Forminator.l10n.builder.general }}</a></li>
					
					<li class="wpmudev-menu--item settings-advanced"><a href="#wpmudev-settings--advanced">{{ Forminator.l10n.builder.advanced }}</a></li>

				</ul>

				<div id="wpmudev-settings--general" class="wpmudev-sidebar--content"></div>

				<div id="wpmudev-settings--advanced" class="wpmudev-sidebar--content"></div>

			</div>

			<div class="wpmudev-sidebar--footer">

				<div class="wpmudev-footer--buttons">
					
					<button class="wpmudev-button wpmudev-button-ghost wpmudev-clone-field">{{ Forminator.l10n.builder.clone }}</button>
					
					<button class="wpmudev-button wpmudev-button-blue wpmudev-done-field">{{ Forminator.l10n.conditions.done }}</button>

				</div>

				<p class="wpmudev-footer--link"><a href="/" class="wpmudev-delete-field">{{ Forminator.l10n.builder.delete }}</a></p>

			</div>

		</div>

	</script>

	<script type="text/template" id="builder-sidebar-conditions-popup-tpl">
		<div class="wpmudev-conditions--rule">

			<select class="wpmudev-select wpmudev-condition--actions" name="condition">
				<option value="show" {[ if( "show" === data.condition_action ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.show}}</option>
				<option value="hide" {[ if( "hide" === data.condition_action ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.hide}}</option>
			</select>

			<span class="wpmudev-rule--text">{{Forminator.l10n.conditions.show_field_if}}</span>

			<select class="wpmudev-select wpmudev-condition--rules" name="rules">
				<option value="any" {[ if( "any" === data.condition_rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.any}}</option>
				<option value="all" {[ if( "all" === data.condition_rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.all}}</option>
			</select>

			<span class="wpmudev-rule--text">{{Forminator.l10n.conditions.following_match}}:</span>

		</div>

		<div class="wpmudev-conditions--list">
			<div class="wpmudev-list--rules"></div>
			<div class="wpmudev-list--add"><button class="wpmudev-button wpmudev-button-sm">{{Forminator.l10n.conditions.add_condition}}</button></div>
		</div>

		<div class="wpmudev-conditions--done">
			<button class="wpmudev-button wpmudev-action-done wpmudev-button-blue">{{Forminator.l10n.conditions.done}}</button>
		</div>
	</script>
	<script type="text/template" id="builder-sidebar-conditions-rule-tpl">
		<div class="wpmudev-rule--new" data-index="{{ index }}">

			<select class="wpmudev-select wpmudev-conditions--field" name="fields">
				<option value="">{{ Forminator.l10n.sidebar.pick_field }}</option>
				{[ _.each( fields, function( value, key ){ ]}
					<option value="{{ value.element_id }}" {[ if( value.element_id === condition.element_id ) { ]}selected="selected"{[ } ]}>{{ value.label }}</option>
				{[ }) ]}
			</select>

			<select class="wpmudev-select wpmudev-conditions--action">
				<option value="is" {[ if( "is" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.is}}</option>
				<option value="is_not" {[ if( "is_not" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.is_not}}</option>
				{[ if( field && field.isNumber ) { ]}
				<option value="is_great" {[ if( "is_great" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.is_great}}</option>
				<option value="is_less" {[ if( "is_less" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.is_less}}</option>
				{[ } ]}
				{[ if( field && ! field.isNumber && ! field.hasOptions ) { ]}
				<option value="contains" {[ if( "contains" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.contains}}</option>
				<option value="starts" {[ if( "starts" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.starts}}</option>
				<option value="ends" {[ if( "ends" === condition.rule ) { ]}selected="selected"{[ } ]}>{{Forminator.l10n.conditions.ends}}</option>
				{[ } ]}
			</select>

			<div class="wpmudev-conditions--values-wrapper">
				<select class="wpmudev-select wpmudev-conditions--values"></select>
			</div>
			<div class="wpmudev-conditions--input-wrapper">
				<input type="text" name="rule_input" class="wpmudev-text wpmudev-conditions--input">
			</div>

			<div class="wpmudev-rule--delete">
				<button class="wpmudev-delete-action wpmudev-delete-condition"><span class="wpdui-icon wpdui-icon-trash"></span></button>
			</div>

		</div>
	</script>
</div>
