<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-style"></div>
				<div class="appearance-section-customize-colors"></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.typography }}</label>
			</div>
			<div class="wpmudev-option--container appearance-section-customize-fonts"></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>
		
		<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>

	</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">
		
		<div class="wpmudev-row">
			<div class="wpmudev-col col-12">
				<label class="wpmudev-label--section">{{Forminator.l10n.appearance.general}}</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
			<div class="wpmudev-col col-12 col-sm-4 color-grid-form-background">
				<label class="wpmudev-label">{{Forminator.l10n.appearance.form_bg}}</label>
				<div class="wpmudev-picker"></div>
			</div>
		    <div class="wpmudev-col col-12 col-sm-4 color-grid-form-border">
				<label class="wpmudev-label">{{Forminator.l10n.appearance.form_border}}</label>
				<div class="wpmudev-picker"></div>
			</div>
			<div class="wpmudev-col col-12 col-sm-4 color-grid-title">
				<label class="wpmudev-label">{{Forminator.l10n.appearance.title}}</label>
				<div class="wpmudev-picker"></div>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
		    <div class="wpmudev-col col-12 col-sm-4 color-grid-subtitle">
				<label class="wpmudev-label">{{Forminator.l10n.appearance.subtitle}}</label>
				<div class="wpmudev-picker"></div>
			</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.labels }}</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
		    <div class="wpmudev-col col-12 col-sm-4 color-grid-main-label">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.field }}Field</label>
				<div class="wpmudev-picker"></div>
			</div>
			<div class="wpmudev-col col-12 col-sm-4 color-grid-asterisk-label">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.asterisk }}</label>
				<div class="wpmudev-picker"></div>
			</div>
			<div class="wpmudev-col col-12 col-sm-4 color-grid-helper-label">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.helper }}</label>
				<div class="wpmudev-picker"></div>
			</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.inputs }}</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
			<div class="wpmudev-col col-12 col-sm-6 color-grid-input-bg">
				<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">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.border }}</label>
				<div class="wpmudev-pickers"></div>
			</div>
		</div>
		
		<div class="wpmudev-row wpmudev-palettes">
		    <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>

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

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

		<div class="wpmudev-row wpmudev-palettes">
			<div id="appearance-upload-background" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
				<div class="wpmudev-pickers"></div>
			</div>
			<div id="appearance-upload-color" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
				<div class="wpmudev-pickers"></div>
			</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.submit }}</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
			<div id="appearance-submit-background" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.background }}</label>
				<div class="wpmudev-pickers"></div>
			</div>
			<div id="appearance-submit-color" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
				<div class="wpmudev-pickers"></div>
			</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.extras }}</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
			<div id="appearance-error-elements" class="wpmudev-col col-12 col-sm-4">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.error_elements }}</label>
				<div class="wpmudev-picker"></div>
			</div>
			<div id="appearance-filled-elements" class="wpmudev-col col-12 col-sm-4">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.filled_elements }}</label>
				<div class="wpmudev-picker"></div>
			</div>
		</div>

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

		<div class="wpmudev-row">
			<div class="wpmudev-col col-12">
				<label class="wpmudev-label--section">Pagination Buttons</label>
			</div>
		</div>

		<div class="wpmudev-row wpmudev-palettes">
			<div id="appearance-pagination-background" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">Background</label>
				<div class="wpmudev-pickers"></div>
			</div>
			<div id="appearance-pagination-color" class="wpmudev-col col-12 col-sm-6">
				<label class="wpmudev-label">{{ Forminator.l10n.appearance.value }}</label>
				<div class="wpmudev-pickers"></div>
			</div>
		</div>-->

	</script>

</div>
