<div>

	<!-- Select -->
	<script type="text/template" id="builder-field-select-tpl">

		<select class="wpmudev-form-field--select" style="width: 100%;" {{ field.required ? 'required' : '' }}>

		{[ _.each( field.options, function( value, key ){ ]}
			<option>{{ value.label }}</option>
		{[ }) ]}

		</select>

	</script>

	<script type="text/template" id="builder-field-input-tpl">

		<input type="{{ field.type }}" class="wpmudev-form-field--{{ field.type }}" {{ field.required ? 'required' : '' }}>

	</script>

	<script type="text/template" id="builder-field-checkbox-tpl">

		{[ _.each( field.options, function( value, key ){ ]}

			<div class="wpmudev-form-field--checkbox">

				<div class="wpmudev-checkbox--design">

					<input type="checkbox" id="{{ value.id }}">

					<label for="{{ value.id }}" class="wpdui-icon wpdui-icon-check"></label>

				</div>

				<label for="{{ value.id }}" class="wpmudev-checkbox--label">{{ value.label }}</label>

			</div>

		{[ }) ]}

	</script>

	<!-- Multiple Value -->
	<script type="text/template" id="settings-field-multiple-tpl">

		<div class="fui-multi-value-empty sui-block-content-center">

			<p>{{ Forminator.l10n.options.no_options }}</p>

			<button class="sui-button fui-add-indicator">{{ Forminator.l10n.sidebar.add_option }}</button>

		</div>

		<ul class="fui-multi-value">

			{{ childs }}

			<li><button class="sui-button sui-button-ghost fui-add-indicator">{{ Forminator.l10n.sidebar.add_option }}</button></li>

		</ul>

	</script>

	<!-- Multiple Value (child structure) -->
	<script type="text/template" id="settings-field-multiple-row-tpl">

		<li class="fui-multi-value-item" data-index="{{ index }}">

			<span class="fui-move-indicator" aria-label="{{ Forminator.l10n.commons.reorder_option }}">
				<i class="sui-icon-thumbnails" aria-hidden="true"></i>
			</span>

			<div class="fui-multi-value-settings">

				<div class="fui-top-row">

					<input class="sui-form-control fui-update-label" size="1" value="{{ row.label }}" placeholder="{{ Forminator.l10n.commons.label }}" />

					<div class="fui-multi-value-delete">
						<button class="fui-delete-indicator sui-tooltip sui-tooltip-top-left" data-tooltip="{{ Forminator.l10n.commons.delete_option }}">
							<i class="sui-icon-trash" aria-hidden="true"></i>
						</button>
					</div>

				</div>

				<input class="sui-form-control fui-update-value" size="1" value="{{ row.value }}" placeholder="{{ Forminator.l10n.commons.value }}" />

				<label class="sui-toggle">
					<input type="checkbox" value="true" {[ if( row.default === true || row.default === "true" ) { ]}checked="checked"{[ } ]}>
					<span class="sui-toggle-slider"></span>
				</label>
				<span class="sui-toggle-label">{{ Forminator.l10n.options.default_value }}</span>
			</div>

		</li>

	</script>

	<!-- Date Multiple -->
	<script type="text/template" id="settings-field-date-multiple-tpl">
		<label for="restrict-date" class="sui-label">{{ Forminator.l10n.options.custom_date }}</label>
		<div class="sui-date">
			<input type="text" class="sui-form-control forminator-field-singular forminator-datepicker" name="date_multiple" value="" placeholder="Pick a date" title="" id="">
			<button class="sui-button-icon forminator-date-add" aria-label="{{ Forminator.l10n.options.add }}">
				<i class="sui-icon-plus" aria-hidden="true"></i>
			</button>
		</div>
		<ul>
			<li class="sui-label">{{ Forminator.l10n.options.restricted_dates }}</li>
			{{ values }}
		</ul>
	</script>

	<!-- Date Multiple (value structure) -->
	<script type="text/template" id="settings-field-date-multiple-row-tpl">
		<li class="wpmudev-date-choice" data-index="{{ index }}">
			{{ value.value }}
			<button class="sui-button-icon forminator-date-kill" aria-label="{{ Forminator.l10n.options.delete }}">
				<i class="sui-icon-trash" aria-hidden="true"></i>
			</button>
		</li>
	</script>

	<!-- Multi Product -->
	<script type="text/template" id="settings-field-product-multiple-tpl">
		<div class="wpmudev-multiproduct">
			<div class="wpmudev-multiproduct--empty">
				<p>{{ Forminator.l10n.product.add_variation }}</p>
			</div>
			<ul class="wpmudev-multiproduct--list">
				{{ childs }}
			</ul>
			<div class="wpmudev-multiproduct--actions">
				<div class="wpmudev-toggle">
					<div class="wpmudev-toggle--design">
						<input class="forminator-field-singular forminator-field-required" id="list-all-variations" name="list_variations" value="true" title="List all variations" type="checkbox" {[ if( list_variations === "true" || list_variations === true ) { ]}checked="checked"{[ } ]}>
						<label for="list-all-variations"></label>
					</div>
					<label for="list-all-variations" class="wpmudev-toggle--label wpmudev-label-list-variations wpmudev-label--sm wpmudev-label-container">{{ Forminator.l10n.product.use_list }}</label>
				</div>
				<button class="wpmudev-button wpmudev-button-sm wpmudev-button-ghost wpmudev-add-variation">{{ Forminator.l10n.product.add_variation }}</button>
			</div>
		</div>
	</script>

	<!-- Multi Product (child structure) -->
	<script type="text/template" id="settings-field-product-multiple-row-tpl">
		<li class="wpmudev-list--item" data-index="{{ index }}">
			<div class="wpmudev-product">
				<div class="wpmudev-browse">
					<label class="wpmudev-label">{{ Forminator.l10n.product.image }}</label>
					<div class="wpmudev-browse--preview">
						<button class="wpmudev-preview--image wpmudev-open_media">
							<span class="wpmudev-get_image" style="background-image: url( '{{ row.image }}' );"></span>
						</button>
					</div>
				</div>
				<div class="wpmudev-option">
					<label class="wpmudev-label">{{ Forminator.l10n.product.name }}</label>
					<input type="text" class="forminator-field-singular wpmudev-input wpmudev-add-name" value="{{ row.label }}" />
				</div>
				<div class="wpmudev-option">
					<label class="wpmudev-label">{{ Forminator.l10n.product.price }}</label>
					<input type="number" class="forminator-field-singular wpmudev-input wpmudev-add-price" value="{{ row.value }}" />
				</div>
			</div>
			<div class="wpmudev-item--kill">
				<button class="wpmudev-action--kill">
					<span class="wpdui-icon wpdui-icon-trash" aria-hidden="true"></span>
					<span class="wpmudev-text">{{ Forminator.l10n.sidebar.delete }}</span>
				</button>
			</div>
		</li>
	</script>

	<!-- List Product -->
	<script type="text/template" id="settings-field-product-list-tpl">
		<div class="wpmudev-option--productList">
			<div class="wpmudev-productList--items">
				{{ childs }}
			</div>
			<div class="wpmudev-productList--action">
				<button class="wpmudev-button wpmudev-button-sm wpmudev-button-ghost wpmudev-add-product">Add Product Field</button>
			</div>
		</div>
	</script>

	<!-- List Product (child structure) -->
	<script type="text/template" id="settings-field-product-list-row-tpl">
		<div class="wpmudev-productList--item" data-index="{{ index }}">
			<select class="wpmudev-select wpmudev-product-select">
				{[ _.each( products, function ( product ) { ]}
					<option value="{{ product.element_id }}" {[ if( row.value === product.element_id ) { ]}selected="selected"{[ } ]}>{{ product.label }}</option>
				{[ }) ]}
			</select>
			<div class="wpmudev-product--kill">
				<button class="wpmudev-action--kill">
					<span class="wpdui-icon wpdui-icon-trash" aria-hidden="true"></span>
					<span class="wpmudev-sr-only">{{ Forminator.l10n.sidebar.delete }}</span>
				</button>
			</div>
		</div>
	</script>

	<!-- Multi Answer -->
	<script type="text/template" id="settings-field-answer-list-tpl">
		<div
			role="alert"
			class="sui-notice sui-notice-red forminator-validate-answers"
			aria-live="assertive"
		>

			<div class="sui-notice-content">

				<div class="sui-notice-message">

					<span class="sui-notice-icon sui-icon-info" aria-hidden="true"></span>

					<p></p>

				</div>

			</div>

		</div>

		<div class="fui-multi-answer-empty sui-block-content-center">

			{[ if( Forminator.Data.showBranding ) { ]}
			<img src="{{ Forminator.Data.pluginUrl }}assets/img/forminator-face.png"
			     srcset="{{ Forminator.Data.pluginUrl }}assets/img/forminator-face.png 1x, {{ Forminator.Data.pluginUrl }}assets/img/forminator-face@2x.png 2x" alt="Forminator"
			     class="sui-image sui-image-center fui-image"/>
			{[ } ]}

			<h2>{{ Forminator.l10n.options.answers }}</h2>

			<p>{{ Forminator.l10n.options.no_answers }}</p>

			<button class="sui-button fui-add-indicator">{{ Forminator.l10n.options.add_answer }}</button>

		</div>

		<ul class="fui-multi-answer">

			{{ childs }}

			<li class="fui-answer fui-answer-add-indicator"><button class="sui-button sui-button-ghost fui-add-indicator">{{ Forminator.l10n.options.add_new_answer }}</button></li>

		</ul>

	</script>

	<!-- Multi Answer (child structure) -->
	<script type="text/template" id="settings-field-answer-list-row-tpl">

		<li class="fui-answer fui-answer-poll" data-index="{{ index }}">

			<div class="fui-answer-basics">

				<span class="fui-answer-cell-fit fui-answer-move-indicator" aria-label="Reorder answer">
					<i class="sui-icon-thumbnails sui-fw" aria-hidden="true"></i>
				</span>

				<div class="fui-answer-cell block">
					<div class="fui-answer-type-text">
						<input type="text" class="sui-form-control wpmudev-answer-value" value="{{ row.title }}" placeholder="{{ Forminator.l10n.options.placeholder_answer }}">
						<button class="fui-answer-delete sui-tooltip" data-tooltip="{{ Forminator.l10n.options.trash_answer }}">
							<i class="sui-icon-trash sui-fw" aria-hidden="true"></i>
						</button>
					</div>
					{[ if( row.use_extra === true ) { ]}
					<div class="sui-form-field">
						<label class="sui-label">{{ Forminator.l10n.polls.custom_input_placeholder_label }}</label>
						<input type="text" class="sui-form-control wpmudev-answer-placeholder" value="{{ row.extra }}" placeholder="{{ Forminator.l10n.polls.custom_input_placeholder }}">
					</div>
					{[ } ]}
				</div>

				<div class="fui-answer-cell-fit">
					<div class="sui-dropdown">
						<a role="button" aria-expanded="false" class="sui-dropdown-anchor sui-icon-more" href="#"><span class="sui-screen-reader-text">{{ Forminator.l10n.commons.dropdown }}</span></a>
						<ul>
							{[ if( row.use_extra !== true ) { ]}
							<li><a role="button" href="/" class="fui-add-field-indicator">{{ Forminator.l10n.polls.add_custom_field }}</a></li>
							{[ } else { ]}
							<li><a role="button" href="/" class="fui-delete-field-indicator">{{ Forminator.l10n.polls.remove_custom_field }}</a></li>
							{[ } ]}
						</ul>
					</div>
				</div>

			</div>

		</li>

	</script>

	<!-- Multi Question -->
	<script type="text/template" id="settings-field-question-multiple-tpl">

		<div class="fui-multi-question-empty sui-block-content-center">

			<div
				role="alert"
				class="sui-notice sui-notice-red forminator-validate-question"
				aria-live="assertive"
			>

				<div class="sui-notice-content">

					<div class="sui-notice-message">

						<span class="sui-notice-icon sui-icon-info" aria-hidden="true"></span>

						<p>{{ Forminator.l10n.quizzes.validate_form_question }}</p>

					</div>

				</div>

			</div>

			{[ if( Forminator.Data.showBranding ) { ]}
			<img src="{{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled.png"
			     srcset="{{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled.png 1x, {{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled@2x.png 2x" alt="Forminator"
			     class="sui-image sui-image-center fui-image"/>
			{[ } ]}

			<h2>{{ Forminator.l10n.quizzes.questions }}</h2>

			<p class="fui-limit-block-600 fui-limit-block-center">{{ Forminator.l10n.options.multiqs_empty }}</p>

			<button class="sui-button sui-button-primary wpmudev-add-question">{{ Forminator.l10n.options.add_question }}</button>

		</div>

		<ul class="fui-multi-question wpmudev-multiqs--questions">

			{{ childs }}

			<li class="fui-question"><button class="sui-button sui-button-primary wpmudev-add-question">{{ Forminator.l10n.options.add_new_question }}</button></li>

		</ul>

	</script>

	<!-- Multi Question (child structure) -->
	<script type="text/template" id="settings-field-question-multiple-question-tpl">

		<li class="fui-question" data-index="{{ index }}">

			<div class="sui-form-field">

				<label for="forminator-quiz-question-{{ index }}" class="sui-label">{{ Forminator.l10n.options.question_title }}</label>

				<span class="fui-question-input">

					<input type="text" id="forminator-quiz-question-{{ index }}" class="sui-form-control wpmudev-question-title" value="{{ row.title }}" size="1">

					<span class="fui-question-delete sui-tooltip" aria-label="{{ Forminator.l10n.options.delete }}" data-tooltip="{{ Forminator.l10n.options.delete_question }}"><i class="sui-icon-cross-close" aria-hidden="true"></i></span>

				</span>

				<span class="sui-error-message" style="display: none">{{ Forminator.l10n.options.question_title_error }}</span>

			</div>

			<div class="sui-form-field question-image-field">
				<label class="sui-label">{{ Forminator.l10n.options.image }}</label>
				<div class="fui-browse-group">
					<span class="fui-browse-preview" aria-hidden="true">
						<span style="background-image: url('{{ row.image }}');"></span>
					</span>
					<div class="fui-browse {{ row.image ? 'fui-browse-has-image' : ''}}">
						<div class="fui-browse-cell">
							<input readonly="readonly" class="wpmudev-url--input wpmudev-question-image" type="url" value="{{ row.image }}" placeholder="{{ Forminator.l10n.options.placeholder_image }}" />
						</div>
						<div class="fui-browse-cell-fit fui-browse-delete">
							<button class="sui-tooltip" data-tooltip="{{ Forminator.l10n.options.remove_image }}" aria-label="{{ Forminator.l10n.options.remove_image }}"><i class="sui-icon-cross-close" aria-hidden="true"></i></button>
						</div>
						<div class="fui-browse-cell-fit">
							<button class="sui-button fui-open-media" aria-hidden="true">{{ Forminator.l10n.options.browse }}</button>
						</div>
					</div>
				</div>
			</div>

		</li>

	</script>

	<!-- Multi Question (answer structure) -->
	<script type="text/template" id="settings-field-question-answer-list-tpl">

		<div
			role="alert"
			class="sui-notice sui-notice-red forminator-validate-correct-answer"
			aria-live="assertive"
		>

			<div class="sui-notice-content">

				<div class="sui-notice-message">

					<span class="sui-notice-icon sui-icon-info" aria-hidden="true"></span>

					<p>{{ Forminator.l10n.quizzes.validate_form_correct_answer }}</p>

				</div>

			</div>

		</div>

		<div class="fui-multi-answer-empty sui-block-content-center">

			{[ if( Forminator.Data.showBranding ) { ]}
			<img src="{{ Forminator.Data.pluginUrl }}assets/img/forminator-face.png"
			     srcset="{{ Forminator.Data.pluginUrl }}assets/img/forminator-face.png 1x, {{ Forminator.Data.pluginUrl }}assets/img/forminator-face@2x.png 2x" alt="Forminator"
			     class="sui-image sui-image-center fui-image"/>
			{[ } ]}

			<h2>{{ Forminator.l10n.quizzes.answer }}</h2>

			<p>{{ Forminator.l10n.quizzes.no_answer }}</p>

			<button class="sui-button fui-add-indicator">{{ Forminator.l10n.options.add_answer }}</button>

		</div>

		<ul class="fui-multi-answer">

			{{ childs }}

			<li class="fui-answer fui-answer-add-indicator"><button class="sui-button sui-button-ghost fui-add-indicator">{{ Forminator.l10n.options.add_new_answer }}</button></li>

		</ul>

	</script>

	<!-- Multi Question Answer (child structure) -->
	<script type="text/template" id="settings-field-question-multiple-answer-tpl">

		<li class="fui-answer" data-index="{{ index }}">

			{[ if( type === "nowrong" ) { ]}
				<div
					role="alert"
					class="sui-notice sui-notice-red forminator-validate-answer-result"
					aria-live="assertive"
					data-index="{{ index }}"
				>

					<div class="sui-notice-content">

						<div class="sui-notice-message">

							<span class="sui-notice-icon sui-icon-info" aria-hidden="true"></span>

							<p>{{ Forminator.l10n.quizzes.validate_form_answers_result }}</p>

						</div>

					</div>

				</div>
			{[ } ]}

			<div class="fui-answer-basics">

				<span class="fui-answer-cell-fit fui-answer-move-indicator" aria-label="Reorder answer">
					<i class="sui-icon-thumbnails sui-fw" aria-hidden="true"></i>
				</span>

				<div class="fui-answer-cell fui-answer-type-text">
					<input type="text" class="sui-form-control wpmudev-answer-value" value="{{ row.title }}" placeholder="{{ Forminator.l10n.options.placeholder_answer }}">
					<button class="fui-answer-delete sui-tooltip" data-tooltip="{{ Forminator.l10n.options.trash_answer }}">
						<i class="sui-icon-trash sui-fw" aria-hidden="true"></i>
					</button>
				</div>

				<span class="fui-answer-cell-fit">
					<button class="fui-answer-open-indicator" aria-lalbel="{{ Forminator.l10n.options.answer_settings }}">
						<i class="sui-icon-chevron-down" aria-hidden="true"></i>
					</button>
				</span>

			</div>

			<div class="fui-answer-extras">

				<div class="fui-answer-cell">

					<div class="fui-browse-group">

						<span class="fui-browse-preview" aria-hidden="true">
							<span style="background-image: url('{{ row.image }}');"></span>
						</span>

						<div class="fui-browse">

							<span class="fui-browse-cell">
								<input type="url" value="{{ row.image }}" placeholder="{{ Forminator.l10n.options.placeholder_image_alt }}" size="1" aria-describedby="forminator-answer-image-{{ question_index }}_{{ index }}">
							</span>

							<span class="fui-browse-cell-fit fui-browse-delete">
								<button class="sui-tooltip" data-tooltip="{{ Forminator.l10n.options.remove_image }}" aria-label="{{ Forminator.l10n.options.remove_image }}"><i class="sui-icon-cross-close" aria-hidden="true"></i></button>
							</span>

							<span class="fui-browse-cell-fit">
								<button class="sui-button fui-open-media" aria-hidden="true">{{ Forminator.l10n.options.browse }}</button>
							</span>

						</div>

					</div>

				</div>

				<div class="fui-answer-cell-fit">

					{[ if( type === "nowrong" ) { ]}
						<select class="fui-select-sm wpmudev-quiz-results">
							<option value="">{{ Forminator.l10n.options.select_result }}</option>
							{[ _.each( results, function ( result ) { ]}
								<option value="{{ result.slug }}" {[ if( row.result === result.slug ) { ]}selected="selected"{[ } ]}>{{ result.title }}</option>
							{[ }) ]}
						</select>
					{[ } else { ]}
						<label class="sui-toggle" for="forminator-answer_{{ question_index }}_{{ index }}">
							<input type="checkbox" value="true" id="forminator-answer_{{ question_index }}_{{ index }}" {[ if( row.toggle === true || row.toggle === "true" ) { ]}checked="checked"{[ } ]}>
							<span class="sui-toggle-slider"></span>
						</label>
						<span class="sui-toggle-label">{{ Forminator.l10n.options.correct }}</span>
					{[ } ]}

				</div>

			</div>

		</li>

	</script>

	<!-- Multi Result -->
	<script type="text/template" id="settings-field-result-list-tpl">

		<div class="fui-multi-result-empty sui-block-content-center">

			<div
				role="alert"
				class="sui-notice sui-notice-red forminator-validate-quiz-results"
				aria-live="assertive"
			>

				<div class="sui-notice-content">

					<div class="sui-notice-message">

						<span class="sui-notice-icon sui-icon-info" aria-hidden="true"></span>

						<p>{{ Forminator.l10n.options.no_results }}</p>

					</div>

				</div>

			</div>

			{[ if( Forminator.Data.showBranding ) { ]}
			<img src="{{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled.png"
			     srcset="{{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled.png 1x, {{ Forminator.Data.pluginUrl }}assets/img/forminator-disabled@2x.png 2x" alt="Forminator"
			     class="sui-image sui-image-center fui-image"/>
			{[ } ]}

			<h2>{{ Forminator.l10n.quizzes.results }}</h2>

			<p class="fui-limit-block-600 fui-limit-block-center">{{ Forminator.l10n.options.no_results }}</p>

			<button class="sui-button sui-button-primary fui-add-result">{{ Forminator.l10n.options.add_result }}</button>

		</div>

		<ul class="fui-multi-result">

			{{ childs }}

			<li class="fui-result">
				<button class="sui-button sui-button-primary fui-add-result">{{ Forminator.l10n.options.add_new_result }}</button>
			</li>

		</ul>

	</script>

	<!-- Multi Result (child structure) -->
	<script type="text/template" id="settings-field-result-list-row-tpl">

		<li class="fui-result" data-index="{{ index }}">

			<div class="sui-form-field">
				<label class="sui-label">{{ Forminator.l10n.options.title }}</label>
				<span class="fui-result-input">
					<input type="text" class="sui-form-control wpmudev-result-title" value="{{ row.title }}">
					<span class="fui-result-delete sui-tooltip" aria-label="Delete" data-tooltip="{{ Forminator.l10n.options.delete_result }}"><i class="sui-icon-cross-close" aria-hidden="true"></i></span>
				</span>
			</div>

			<div class="sui-form-field">
				<label class="sui-label">{{ Forminator.l10n.options.image }}</label>
				<div class="fui-browse-group">
					<span class="fui-browse-preview" aria-hidden="true">
						<span style="background-image: url('{{ row.image }}');"></span>
					</span>
					<div class="fui-browse {{ row.image ? 'fui-browse-has-image' : ''}}">
						<div class="fui-browse-cell">
							<input class="wpmudev-url--input wpmudev-result-image" type="url" value="{{ row.image }}" placeholder="{{ Forminator.l10n.options.placeholder_image }}" />
						</div>
						<div class="fui-browse-cell-fit fui-browse-delete">
							<button class="sui-tooltip" data-tooltip="{{ Forminator.l10n.options.remove_image }}" aria-label="{{ Forminator.l10n.options.remove_image }}"><i class="sui-icon-cross-close" aria-hidden="true"></i></button>
						</div>
						<div class="fui-browse-cell-fit">
							<button class="sui-button fui-open-media" aria-hidden="true">{{ Forminator.l10n.options.browse }}</button>
						</div>
					</div>
				</div>
			</div>

			<div class="sui-form-field description-wrapper">
				<label class="sui-label">{{ Forminator.l10n.options.description }}</label>
				{{ editor }}
			</div>

		</li>

	</script>

	<!-- Multi Order -->
	<script type="text/template" id="settings-field-order-list-tpl">

		<ul class="fui-multi-order">{{ childs }}</ul>

	</script>

	<!-- Multi Order (child structure) -->
	<script type="text/template" id="settings-field-order-list-row-tpl">
		<li class="fui-item" data-index="{{ index }}"><i class="fui-item-move-indicator sui-icon-thumbnails" aria-hidden="true"></i> {{ row.title }}</li>
	</script>

</div>
