<div>

	<script type="text/template" id="appearance-layout-tpl">

		<div id="wpmudev-forminator-content" class="forminator-appearance-content wpmudev-page-wizard"></div>

	</script>

	<script type="text/template" id="appearance-main-tpl">

		<div class="wpmudev-wizard--content">

			<nav class="wpmudev-content--nav">

				<ul class="wpmudev-nav--tabs">

					<li class="wpmudev-tab--item forminator-wizard-appearance"><a href="#forminator-wizard-appearance">
						<span class="wpmudev-text">{{ Forminator.l10n.appearance.appearance }}</span>
						<span class="wpmudev-icon-loading"></span>
						<span class="wpdui-icon wpdui-icon-check"></span>
					</a></li>

					{[ if( has_pagination ) { ]}
					<li class="wpmudev-tab--item forminator-wizard-pagination"><a href="#forminator-wizard-pagination">
						<span class="wpmudev-text">{{ Forminator.l10n.appearance.form_pagination }}</span>
						<span class="wpmudev-icon-loading"></span>
						<span class="wpdui-icon wpdui-icon-check"></span>
					</a></li>
					{[ } ]}

					<li class="wpmudev-tab--item forminator-wizard-behaviour"><a href="#forminator-wizard-behaviour">
						<span class="wpmudev-text">{{ Forminator.l10n.appearance.form_behaviour }}</span>
						<span class="wpmudev-icon-loading"></span>
						<span class="wpdui-icon wpdui-icon-check"></span>
					</a></li>

					<li class="wpmudev-tab--item forminator-wizard-emails"><a href="#forminator-wizard-emails">
						<span class="wpmudev-text">{{ Forminator.l10n.appearance.form_emails }}</span>
						<span class="wpmudev-icon-loading"></span>
						<span class="wpdui-icon wpdui-icon-check"></span>
					</a></li>

					<!-- Disable until integrations are done
					<li class="wpmudev-tab--item forminator-wizard-advanced"><a href="#forminator-wizard-advanced">
						<span class="wpmudev-text">{{ Forminator.l10n.appearance.advanced }}</span>
						<span class="wpmudev-icon-loading"></span>
						<span class="wpdui-icon wpdui-icon-check"></span>
					</a></li>
					-->

				</ul>

				<select class="wpmudev-select wpmudev-tabs-mobile">
					<option value="forminator-wizard-appearance">{{ Forminator.l10n.appearance.appearance }}</option>
					{[ if( has_pagination ) { ]}
					<option value="forminator-wizard-pagination">{{ Forminator.l10n.appearance.form_pagination }}</option>
					{[ } ]}
					<option value="forminator-wizard-behaviour">{{ Forminator.l10n.appearance.form_behaviour }}</option>
					<option value="forminator-wizard-emails">{{ Forminator.l10n.appearance.form_emails }}</option>
					<!-- Disable until integrations are done
					<option value="forminator-wizard-advanced">{{ Forminator.l10n.appearance.advanced }}</option>
					-->
				</select>

				<div class="wpmudev-preview-anchor" aria-hidden="true"></div>

				<div class="wpmudev-preview" aria-hidden="true" data-modal="preview_cforms" data-form-id="{{ Forminator.Data.currentForm.formID }}" data-nonce="{{ Forminator.Data.modules.custom_form.preview_nonce }}">

					<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 150 100" preserveAspectRatio="none" class="wpmudev-icon wpmudev-i_preview"><path fill-rule="evenodd" d="M75 100C25 100 0 50 0 50S25 0 75 0s75 50 75 50-25 50-75 50zm0-25c13.807 0 25-11.193 25-25S88.807 25 75 25 50 36.193 50 50s11.193 25 25 25z"/></svg>

					<span class="wpmudev-preview--text">{{ Forminator.l10n.appearance.preview_form }}</span>

				</div>

			</nav>

			<div class="wpmudev-content--settings">
				<div id="forminator-wizard-appearance" class="wpmudev-settings--box" style="display: block;"></div>
				{[ if( has_pagination ) { ]}
				<div id="forminator-wizard-pagination" class="wpmudev-settings--box"></div>
				{[ } ]}
				<div id="forminator-wizard-behaviour" class="wpmudev-settings--box"></div>
				<div id="forminator-wizard-emails" class="wpmudev-settings--box"></div>
				<!-- Disable until integrations are done
				<div id="forminator-wizard-advanced" class="wpmudev-settings--box"></div>
				-->
			</div>

		</div>

	</script>

	<script type="text/template" id="appearance-buttons-tpl">

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

			<div class="wpmudev-footer--clear"></div>

			<nav class="wpmudev-footer--nav">

				<div class="wpmudev-nav--left">

					<button class="wpmudev-button wpmudev-button-ghost wpmudev-button-back">{{Forminator.l10n.builder.form_builder}}</button>

				</div>

				<div class="wpmudev-nav--right">

					<button class="wpmudev-button wpmudev-button-blue forminator-save forminator-save-changes" data-nonce="" data-id="">
						<span class="wpmudev-loading-text">{{Forminator.l10n.builder.save}}</span>
						<span class="wpmudev-loading"></span>
					</button>

					<button class="wpmudev-button forminator-save forminator-save-layout">
						<span class="wpmudev-loading-text">{{Forminator.l10n.builder.publish}}</span>
						<span class="wpmudev-loading"></span>
					</button>

				</div>

			</nav>

		</div>

	</script>

	<script type="text/template" id="appearance-section-appearance-tpl">

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.form_name_main }}</label>
				<label class="wpmudev-name--alt">{{ Forminator.l10n.appearance.form_name_main_desc }}</label>
			</div>
			<div class="wpmudev-option--container">
				<div class="appearance-section-form-name"></div>
				<label id="forminator-validate-name" class="wpmudev-label--notice" style="display: none;"><span>{{ Forminator.l10n.appearance.form_name_validation }}</span></label>
			</div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.design_colors }}</label>
				<label class="wpmudev-name--alt">{{ Forminator.l10n.appearance.design_colors_desc }}</label>
			</div>
			<div class="wpmudev-option--container">
				<div class="appearance-section-form-design"></div>
				<div class="appearance-section-customize-colors"></div>
			</div>
		</div>

		<div id="appearance-cform-typo-border" class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div id="appearance-cform-typo-styles" class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.typography }}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-customize-fonts"></div>
		</div>

		<div id="appearance-cform-form-border" class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div id="appearance-cform-form-customize" class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.form_style }}</label>
			</div>
			<div class="wpmudev-option--container">

				<div id="appearance-cform-form-styles" class="wpmudev-box-gray">

					<div class="wpmudev-row">
						<div class="wpmudev-col col-12">
							<label class="wpmudev-label--section">{{ Forminator.l10n.appearance.form_padding }}</label>
						</div>
					</div>

					<div class="wpmudev-row">
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-padding-top"></div>
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-padding-right"></div>
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-padding-bottom"></div>
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-padding-left"></div>
					</div>

					<div class="wpmudev-row--border"></div>

					<div class="wpmudev-row">
						<div class="wpmudev-col col-12">
							<label class="wpmudev-label--section">{{ Forminator.l10n.appearance.form_border }}</label>
						</div>
					</div>

					<div class="wpmudev-row">
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-border-radius"></div>
						<div class="wpmudev-col col-12 col-sm-6 col-lg-3 cform-appearance-form-border-width"></div>
						<div class="wpmudev-col col-12 col-lg-6 cform-appearance-form-border-style"></div>
					</div>

				</div>

			</div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.fields_style }}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-fields-style"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.custom_text }}</label>
				<label class="wpmudev-name--alt">{{ Forminator.l10n.appearance.custom_text_desc }}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-custom-submit"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{ Forminator.l10n.appearance.custom_css }}</label>
				<label class="wpmudev-name--alt">{{ Forminator.l10n.appearance.custom_css_desc }}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-custom-style"></div>
		</div>

	</script>

	<script type="text/template" id="appearance-section-behaviour-tpl">

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.form_lifespan}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-lifespan"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<!--Autofill-->
		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.autofill.autofill_feature}}</label>
				<label class="wpmudev-name--alt">{{Forminator.l10n.autofill.autofill_desc}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-autofill"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.submission_behaviour}}</label>
				<label class="wpmudev-name--alt">{{Forminator.l10n.appearance.submission_behaviour_desc}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-after-submit"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.submission_method}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-submission"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.validation_method}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-validation"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.security}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-security"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.privacy}}</label>
				<label class="wpmudev-name--alt">{{Forminator.l10n.appearance.privacy_desc}}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-form-privacy"></div>
		</div>

	</script>

	<script type="text/template" id="appearance-section-emails-tpl">

		<div class="wpmudev-option">
			<div class="appearance-section-form-user-email"></div>
		</div>

		<div class="wpmudev-option">
			<div class="wpmudev-border"></div>
		</div>

		<div class="wpmudev-option">
			<div class="appearance-section-form-user-admin-email"></div>
		</div>
	</script>

	<script type="text/template" id="appearance-section-pagination-tpl">

		<div class="wpmudev-option--divided">
			<div class="wpmudev-option--name">
				<label class="wpmudev-name--main">{{Forminator.l10n.appearance.pagination_header}}</label>
				<label class="wpmudev-name--alt">{{Forminator.l10n.appearance.pagination_header_desc}}</label>
			</div>
			<div class="wpmudev-option--container pagination-settings-header"></div>
		</div>

	</script>

	<script type="text/template" id="appearance-section-advanced-tpl">

		<div class="appearance-section-form-advanced"></div>

	</script>

	<script type="text/template" id="appearance-color-grid-tpl">

		<!-- FORM -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.form }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-form-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-picker"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-form-border">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
						<div class="wpmudev-picker"></div>
					</div>

				</div>

			</div>

		</div>

		<!-- LABELS -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.labels }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-main-label">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.main }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-asterisk-label">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.asterisk }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-helper-label">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.description }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-validation-background wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.error_bg }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-validation-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.error_color }}</label>
					</div>

				</div>

			</div>

		</div>

		{[ if ( has_section ) { ]}
		<!-- SECTION -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.section }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-title">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.title }}</label>
						<div class="wpmudev-picker"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-subtitle">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.subtitle }}</label>
						<div class="wpmudev-picker"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-4 color-grid-section-border-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
						<div class="wpmudev-picker"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		<!-- INPUT + TEXTAREA -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.input_textarea }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-bg wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-border wpmudev-not--flat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-placeholder">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.placeholder }}</label>
					</div>

					{[ if( has_date_datepicker ) { ]}
					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-icon">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.icon_cal }}</label>
					</div>
					{[ } ]}

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-filled wpmudev-not--material wpmudev-not--flat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.filled }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-input-error">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.error }}</label>
					</div>

				</div>

			</div>

		</div>

		{[ if( has_multi_checkbox || has_single_radio || has_gdpr ) { ]}
		<!-- RADIO + CHECKBOX -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.radio_checkbox }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-radio-background wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-radio-border wpmudev-not--flat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-radio-icon">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.check_icon }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-radio-label">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.label }}</label>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		{[ if( has_single_dropdown || has_dropdowns ) { ]}
		<!-- SELECT -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.select }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-select-bg wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-select-border wpmudev-not--flat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-select-value">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-select-icon">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.icon }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		{[ if( has_single_dropdown || has_dropdowns ) { ]}
		<!-- SELECT DROPDOWN -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.dropdown }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-shadow wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.shadow }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-option-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.option_bg }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-option-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.option_color }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-search-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.search_background }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-search-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.search_border }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-dropdown-search-value">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.search_value }}</label>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		{[ if( has_multi_multiselect ) { ]}
		<!-- MULTI SELECT -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.multi_select }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-multiselect-background wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-multiselect-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-multiselect-item-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.item_color }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-multiselect-item-background wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.item_bg }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-multiselect-item-border wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.item_border }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		{[ if( has_date_datepicker ) { ]}
		<!-- CALENDAR -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.calendar }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-background wpmudev-not--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-header wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.header_bg }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-content wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.content_bg }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-arrows">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.nav_arrows }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-dweek">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.dweek }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-days-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.days_color }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-calendar-days-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.days_background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		{[ if ( has_upload ) { ]}
		<!-- BUTTON UPLOAD -->
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.upload }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-upload-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-upload-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		<!-- BUTTON SUBMIT -->
		{[ if( ! has_pagination ) { ]}
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.submit }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-submit-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-submit-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		<!-- PAGINATION TIMELINE -->
		{[ if( has_pagination ) { ]}
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.timeline }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.dot_background }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-background-current">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.dot_background_current }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.dot_border }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-border-current wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.dot_border_current }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-step wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.timeline_step }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-dot-step-current wpmudev-only--material">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.timeline_step_current }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-text">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.timeline_text }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-text-current">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.timeline_text_current }}</label>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-timeline-border">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.timeline_border }}</label>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

		<!-- PAGINATION BUTTON -->
		{[ if( has_pagination ) { ]}
		<div class="wpmudev-multiname wpmudev-palettes">

			<div class="wpmudev-multiname--action">

				<div class="wpmudev-action--text">
					<p>{{ Forminator.l10n.appearance.pagination_footer }}</p>
				</div>

				<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

			</div>

			<div class="wpmudev-multiname--content">

				<div class="wpmudev-row wpmudev-palettes">

					<div class="wpmudev-col col-12 col-sm-6 color-grid-previous-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.prev_background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-previous-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.prev_value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-next-background">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.next_background }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-next-color">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.next_value }}</label>
						<div class="wpmudev-pickers"></div>
					</div>

					<div class="wpmudev-col col-12 col-sm-6 color-grid-pagination-border wpmudev-not--matflat">
						<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
					</div>

				</div>

			</div>

		</div>
		{[ } ]}

	</script>

	<!-- Autofill -->
	<script type="text/template" id="appearance-autofills-tpl">

		{[ if (_.isEmpty(fields_with_autofill)) { ]}
		<div class="wpmudev-row">
			<div class="wpmudev-col col-12">
				<label class="wpmudev-label">
					{{ Forminator.l10n.autofill.no_autofill_fields_available }}
				</label>
			</div>
		</div>
		{[ } ]}

		<div class="forminator-fields-autofill">
			{[ _.each( fields_with_autofill, function( field_with_autofill, key ) { ]}
			<div class="wpmudev-multiname {[ if( field_with_autofill.is_active ) { ]} wpmudev-is_active {[ } ]}">

				<div class="wpmudev-multiname--action">

					<div class="wpmudev-action--text">
						<p>{{ field_with_autofill.label }}</p>
					</div>

					<button class="wpmudev-action--button wpmudev-toggle-field"><span class="wpmudev-icon--plus" aria-hidden="true"></span><span class="wpmudev-text">{{ Forminator.l10n.appearance.open_field }}</span></button>

				</div>

				<div class="wpmudev-multiname--content">

					<div class="wpmudev-row">

						<div class="wpmudev-col col-12 col-sm-8">

							<label class="wpmudev-label">{{ Forminator.l10n.autofill.source }}</label>

							<select class="wpmudev-select forminator-autofill-provider" data-element="{{ field_with_autofill.element_id }}">
								<option value="">{{ Forminator.l10n.autofill.disable_autofill }}</option>
								{[ _.each( field_with_autofill.autofill_providers, function( autofill_provider, provider_group_key ) { ]}
								<optgroup label="{{autofill_provider.name}}">
									{[ _.each( autofill_provider.attributes, function( attribute, attribute_key ) { ]}
									<option value="{{attribute_key}}" {[ if( field_with_autofill.selected_provider.provider === attribute_key ) { ]} selected="selected" {[ } ]}>{{attribute.name}}</option>
									{[ }) ]}
								</optgroup>
								{[ }) ]}
							</select>

						</div>

						<div class="wpmudev-col col-12 col-sm-4">

							<label class="wpmudev-label">{{ Forminator.l10n.autofill.editable }}</label>

							<select class="wpmudev-select forminator-autofill-is-editable" data-element="{{ field_with_autofill.element_id }}">
								<option value="no" {[ if( field_with_autofill.selected_provider.is_editable === "no" ) { ]}selected="selected" {[ } ]}>{{Forminator.l10n.autofill.editable_no}}</option>
								<option value="yes" {[ if( field_with_autofill.selected_provider.is_editable === "yes" ) { ]}selected="selected" {[ } ]}>{{Forminator.l10n.autofill.editable_yes}}</option>
							</select>

						</div>

					</div>

				</div>

			</div>
			{[ }) ]}
		</div>

	</script>

</div>
