{#
	Content of the fields of the Drag & Drop editor

	@since 2.2
#}
<div class="cred-editor-scaffold-item-container js-cred-editor-scaffold-item-container"
	data-bind="attr: {'data-shortcode': shortcode, 'data-fieldtype': fieldType, 'data-label': label, 'data-attributes': formattedAttributes, 'data-options': formattedOptions, 'data-include': containerInclude, 'data-permanent': permanent, 'data-scaffold_field_id': scaffoldFieldId },css: { 'cred-editor-scaffold-item-container-can-toggle js-cred-editor-scaffold-item-container-can-toggle': hasOptions }, afterFieldRendered: true"
>
	<span class="cred-editor-scaffold-item-header js-cred-editor-scaffold-item-header js-cred-editor-tippy" data-bind="attr: {'data-tippy-content': label}" data-tippy-condition="text-not-visible">
		<i class="fa fa-arrows cred-editor-scaffold-item-move js-cred-editor-scaffold-item-move"></i>

		<span class="cred-editor-scaffold-field-title js-cred-editor-scaffold-field-title">
			<i class="cred-editor-scaffold-field-type-icon" data-bind="attr: { class: fieldTypeIcon }, visible: fieldTypeIcon"></i>
			<span data-bind="text: label"></span>
			<i data-bind="visible: hasOptions" class="fa fa-caret-down fa-fw cred-editor-scaffold-item-options-toggle js-cred-editor-scaffold-item-options-toggle" title="<?php echo esc_attr( __( 'Toggle options', 'wp-cred' ) ); ?>"></i>
		</span>

		<span class="cred-editor-scaffold-item-container-disabled-reason" data-bind="visible: blockedReason">
			<a data-bind="attr: {href: blockedLink}, visible: blockedLink" target="_blank"><span data-bind="text: blockedReason"></span><i class="fa fa-external-link"></i></a>
			<span data-bind="text: blockedReason, visible: !blockedLink"></span>
		</span>

		<i class="fa fa-lock fa-fw cred-editor-scaffold-item-required" data-bind="visible: requiredItem"></i>
		<i class="fa fa-times fa-fw cred-editor-scaffold-item-blocked" data-bind="visible: blockedItem"></i>
		<i class="fa fa-check-square fa-fw cred-editor-scaffold-item-autogenerated js-cred-editor-tippy" data-tippy-content="{{ __( 'Can be auto-generated', 'wp-cred' ) }}" data-bind="visible: autogeneratedItem"></i>
		<i class="fa fa-trash fa-fw cred-editor-scaffold-item-include-toggle js-cred-editor-scaffold-item-include-remove" data-bind="visible: removable, click: $parent.removeField"></i>

		<i class="fa fa-plus fa-fw cred-editor-scaffold-item-push js-cred-editor-scaffold-item-push js-cred-editor-tippy" data-tippy-content="{{ __( 'Include', 'wp-cred' ) }}"></i>
	</span>
	<span data-bind="visible: hasOptions">
		<div class="cred-editor-scaffold-item-options js-cred-editor-scaffold-item-options hidden">
			<button class="cred-editor-scaffold-options-close js-cred-editor-scaffold-options-close"><i class="fa fa-times"></i></button>

			<form data-bind="html: optionHTML"></form>
		</div>
	</span>
</div>