<div>

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

			<div class="wpmudev-form-field forminator-field-type_{{ field.type }}">

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

				</div>

				{[ if( field.use_conditions === "true" ) { ]}

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

					{[ if( field.conditions && field.conditions.length > 0 ) { ]}
						<span class="wpdui-icon wpdui-icon-link"></span>
						<p class="wpmudev-conditions--text">{{ condition }}</p>
					{[ } else { ]}
						<span class="wpdui-icon wpdui-icon-link"></span>
               			<p class="wpmudev-conditions--text">{{ Forminator.l10n.builder.no_conditions }}</p>
					{[ } ]}

				</div>

				{[ } ]}

			</div>

	</script>

	<!-- 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="wpmudev-multivalue" aria-hidden="true">

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

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

				<label class="wpmudev-label">{{ Forminator.l10n.sidebar.value }}</label>

			</div>

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

				<div class="wpmudev-multivalue--empty">

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

				</div>

				<ul class="wpmudev-multivalue--items">{{ childs }}</ul>

			</div>

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

				<button class="wpmudev-button wpmudev-button-sm wpmudev-button-ghost wpmudev-add-option">{{ Forminator.l10n.sidebar.add_option }}</button>

			</div>

		</div>

	</script>

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

		<li class="wpmudev-multivalue--item" data-index="{{ index }}">

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

				<div class="wpmudev-item--move">

					<span class="wpmudev-icon--drag">

						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>

					</span>

				</div>

				<div class="wpmudev-item--label">

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

					<input class="wpmudev-input wpmudev-input--sm wpmudev-fill--label-input" value="{{ row.label }}" />

				</div>

				<div class="wpmudev-item--value">

					<label class="wpmudev-label">{{ Forminator.l10n.sidebar.value }}</label>

					<input class="wpmudev-input wpmudev-input--sm wpmudev-fill--value-input" value="{{ row.value }}" />

				</div>

			</div>

			<div class="wpmudev-item--kill">

				<button class="wpmudev-button wpmudev-button-ghost wpmudev-button-sm wpmudev-action--kill">

					<span class="wpdui-icon wpdui-icon-trash" aria-hidden="true"></span>
					<span class="wpmudev-text" aria-hidden="true">{{ Forminator.l10n.sidebar.delete }}</span>

				</button>

			</div>

		</li>

	</script>

	<!-- Date Multiple -->
	<script type="text/template" id="settings-field-date-multiple-tpl">
		<label for="restrict-date" class="wpmudev-option--label">{{ Forminator.l10n.options.custom_date }}</label>
		<div class="wpmudev-option--dynamicdates">
			<div class="restrict-date-field">
				<input type="text" class="forminator-field-singular wpmudev-option--datepicker" name="date_multiple" value="" placeholder="Pick a date" title="" id="">
				<button class="wpmudev-button wpmudev-add-date">{{ Forminator.l10n.options.add }}</button>
			</div>
			<ul class="wpmudev-option--dynamicdates-list">
				<li class="wpmudev-list-title">{{ Forminator.l10n.options.restricted_dates }}</li>
				{{ values }}
			</ul>
		</div>
	</script>

	<!-- Date Multiple (value structure) -->
	<script type="text/template" id="settings-field-date-multiple-row-tpl">
		<li class="wpmudev-date-choice" data-index="{{ index }}">
			<span class="wpmudev-choice-title">{{ value.value }}</span>
			<button class="wpmudev-choice-kill">
				<span class="wpdui-icon wpdui-icon-trash" aria-hidden="true"></span>
				<span class="wpmudev-sr-only">{{ Forminator.l10n.options.delete }}</span>
			</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 class="wpmudev-multianswer">
			<div class="wpmudev-multianswer--empty">
				<p>{{ Forminator.l10n.options.no_answers }}</p>
			</div>
			 <ul class="wpmudev-multianswer--list">
			 	{{ childs }}
			</ul>
			 <div class="wpmudev-multianswer--action">
				  <button class="wpmudev-button wpmudev-add-answer">{{ Forminator.l10n.polls.add_answer }}</button>
			 </div>
		</div>
	</script>

	<!-- Multi Answer (child structure) -->
	<script type="text/template" id="settings-field-answer-list-row-tpl">
		<li class="wpmudev-answer" data-index="{{ index }}">
			 <div class="wpmudev-answer--move">
				  <span class="wpmudev-icon--drag">
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
				  </span>
			 </div>
			 <div class="wpmudev-answer--input">
				  <input type="text" placeholder="{{ Forminator.l10n.polls.answer_placeholder }}" class="wpmudev-input wpmudev-answer-value" value="{{ row.title }}" />
				  {[ if( row.use_extra === true ) { ]}
					  <div class="wpmudev-input--extra">
							<label class="wpmudev-label">{{ Forminator.l10n.polls.custom_input_placeholder_label }}</label>
							<input type="text" placeholder="{{ Forminator.l10n.polls.custom_input_placeholder }}" value="{{ row.extra }}" class="wpmudev-input wpmudev-answer-placeholder" />
					  </div>
				  {[ } ]}
			 </div>
			 <nav class="wpmudev-answer--nav">
				  <button class="wpmudev-nav--action wpmudev-icon--dots"><span></span></button>
				  <ul class="wpmudev-answer--menu">
					   {[ if( row.use_extra !== true ) { ]}
							<li class="wpmudev-action--add_field wpmudev-is_active"><a href="/" class="wpmudev-action--add_field">{{ Forminator.l10n.polls.add_custom_field }}</a></li>
						{[ } else { ]}
							<li class="wpmudev-action--kill_field"><a href="/">{{ Forminator.l10n.polls.remove_custom_field }}</a></li>
						{[ } ]}
						<li class="wpmudev-action--kill_answer"><a href="/">{{ Forminator.l10n.polls.delete_answer }}</a></li>
				  </ul>
			 </nav>
		</li>
	</script>

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

		<div class="wpmudev-multiqs--empty">

			<div class="wpmudev-empty--message">

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

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

			</div>

		</div>

		<div class="wpmudev-multiqs--questions">

			{{ childs }}

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

		</div>

	</script>

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

		<div class="wpmudev-multiqs--item" data-index="{{ index }}">

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

				<div class="wpmudev-item--sidebar">
					<label>{{ Forminator.l10n.options.question_title }}</label>
				</div>

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

					<input type="text" class="wpmudev-input wpmudev-question-title" value="{{ row.title }}" size="1">

					<button class="wpmudev-button wpmudev-button-ghost wpmudev-delete-question">{{ Forminator.l10n.options.delete }}</button>
					
				</div>

			</div>

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

				<div class="wpmudev-item--sidebar">
					<label>{{ Forminator.l10n.options.answers }}</label>
				</div>

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

					<div class="wpmudev-multianswer--wrap"></div>

				</div>

			</div>

		</div>

	</script>

	<!-- Multi Question (answer structure) -->
	<script type="text/template" id="settings-field-question-answer-list-tpl">
		<div class="wpmudev-multianswer">
			<div class="wpmudev-multianswer--empty">
				<p>{{ Forminator.l10n.options.no_answers }}</p>
			</div>
			 <ul class="wpmudev-multianswer--list">
			 	{{ childs }}
		 	 </ul>
			<label class="forminator-validate-correct-answer wpmudev-label--notice" style="display: none;"><span>{{ Forminator.l10n.quizzes.validate_form_correct_answer }}</span></label>
			 <div class="wpmudev-multianswer--action">
					<button class="wpmudev-button wpmudev-button-ghost wpmudev-add_answer">{{ Forminator.l10n.options.add_answer }}</button>
			 </div>
		</div>
	</script>

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

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

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

				<div class="wpmudev-answer--move">
					<span class="wpmudev-icon--drag">
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
					</span>
				</div>

				<div class="wpmudev-answer--input">
					<input type="text" class="wpmudev-input wpmudev-answer-value" value="{{ row.title }}">
				</div>

				<div class="wpmudev-answer--toggle wpmudev-answer-toggle-container">
					<button class="wpmudev-action--options">
						<span class="wpmudev-icon--plus"></span>
					</button>
				</div>

			</div>

			<div class="wpmudev-answer--options">

				<div class="wpmudev-browse">

					<div class="wpmudev-browse--preview">

						<div class="wpmudev-preview--image">
							<div class="wpmudev-get_image" style="background-image: url( {{ row.image }} );"></div>
						</div>

						<div class="wpmudev-preview--url">
							<input class="wpmudev-url--input" type="url" value="{{ row.image }}" placeholder="{{ Forminator.l10n.options.placeholder_image_alt }}" size="1" />
							<button class="wpmudev-url--clear">{{ Forminator.l10n.options.clear }}</button>
						</div>

					</div>

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

				<button class="wpmudev-option--trash wpmudev-remove-answer">
					<span class="wpdui-icon wpdui-icon-trash" aria-hidden="true"></span>
					<span class="wpmudev-sr-only">{{ Forminator.l10n.options.trash_answer }}</span>
				</button>

			</div>
			<label class="forminator-validate-answer-result wpmudev-label--notice" style="display: none;" data-index="{{ index }}"><span>{{ Forminator.l10n.quizzes.validate_form_answers_result }}</span></label>
		</li>

	</script>

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

		<div class="wpmudev-multiresult">

			<div class="wpmudev-multiresult--empty">
				
				<p>{{ Forminator.l10n.options.no_results }}</p>

			</div>

			<div class="wpmudev-multiresult--list">{{ childs }}</div>

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

				<button class="wpmudev-button wpmudev-multiresult--add">{{ Forminator.l10n.options.add_result }}</button>

			</div>

		</div>

	</script>

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

		<div class="wpmudev-multiresult--item" data-index="{{ index }}">

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

				<div class="wpmudev-item--sidebar">
					<label>{{ Forminator.l10n.options.title }}</label>
				</div>

				<div class="wpmudev-item--content">
					<input type="text" class="wpmudev-input wpmudev-result-title" value="{{ row.title }}" />
				</div>

			</div>

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

				<div class="wpmudev-item--sidebar">
					<label>{{ Forminator.l10n.options.image }}</label>
				</div>

				<div class="wpmudev-item--content">
					<div class="wpmudev-browse">
						<div class="wpmudev-browse--preview">
							<div class="wpmudev-preview--image">
								<div class="wpmudev-get_image" style="background-image: url( {{ row.image }} );"></div>
							</div>
							<div class="wpmudev-preview--url">
								<input class="wpmudev-url--input wpmudev-result-image" type="url" value="{{ row.image }}" placeholder="{{ Forminator.l10n.options.placeholder_image }}" />
								<button class="wpmudev-url--clear">{{ Forminator.l10n.options.clear }}</button>
							</div>
						</div>
						<button class="wpmudev-browse--action wpmudev-open_media">{{ Forminator.l10n.options.browse }}</button>
					</div>
				</div>

			</div>

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

				<div class="wpmudev-item--sidebar">
					<label>{{ Forminator.l10n.options.description }}</label>
				</div>

				<div class="wpmudev-item--content">
					<textarea class="wpmudev-textarea wpmudev-result-descrition">{{ row.description }}</textarea>
					<div class="wpmudev-item--trash">
						<button class="wpmudev-button wpmudev-button-sm wpmudev-button-ghost wpmudev-button-red wpmudev-delete-result">{{ Forminator.l10n.options.delete_result }}</button>
					</div>
				</div>

			</div>

		</div>

	</script>

	<!-- Multi Order -->
	<script type="text/template" id="settings-field-order-list-tpl">
		 <ul class="wpmudev-multiorder--wrapper">
			{{ childs }}
		 </ul>
	</script>

	<!-- Multi Order (child structure) -->
	<script type="text/template" id="settings-field-order-list-row-tpl">
		<div class="wpmudev-multiorder--item" data-index="{{ index }}">
			 <div class="wpmudev-item--move">
				  <span class="wpmudev-icon-drag">
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
						<span class="wpmudev-drag-row"><i></i></span>
				  </span>
			 </div>
			 <label class="wpmudev-item--name">{{ row.title }}</label>
		</div>
	</script>

</div>
