Form_Edit_Page_Handler::print_templates()

	private function print_templates() {
		?>
		<script type="text/html" id="tmpl-torro-failure">
			<div class="torro-notice notice-error">
				<p>
					<strong><?php _e( 'Error:', 'torro-forms' ); ?></strong>
					{{ data.message }}
				</p>
			</div>
		</script>

		<script type="text/html" id="tmpl-torro-form-canvas">
			<div class="torro-form-canvas-header torro-form-canvas-tabs">
				<button type="button" class="torro-form-canvas-tab add-button">
					<span aria-hidden="true">+</span><span class="screen-reader-text"><?php _e( 'Add New Container', 'torro-forms' ); ?></span>
				</button>
			</div>
			<div class="torro-form-canvas-content">
				<div class="torro-form-canvas-panel add-panel">
					<div class="drag-drop-area is-empty">
						<div class="content"><?php _e( 'Click the button above to add your first container', 'torro-forms' ); ?></div>
					</div>
				</div>
			</div>
			<div class="torro-form-canvas-footer"></div>
		</script>

		<script type="text/html" id="tmpl-torro-container-tab">
			<span>{{ data.label }}</span>
		</script>

		<script type="text/html" id="tmpl-torro-container-panel">
			<div class="drag-drop-area"></div>
			<div class="add-element-wrap">
				<div class="{{ data.addingElement ? 'add-element-toggle-wrap is-expanded' : 'add-element-toggle-wrap' }}">
					<button type="button" class="add-element-toggle" aria-controls="torro-{{ data.id }}-add-element-content-wrap" aria-expanded="{{ data.addingElement ? 'true' : 'false' }}">
						<?php _e( 'Add element', 'torro-forms' ); ?>
					</button>
				</div>
				<div id="torro-{{ data.id }}-add-element-content-wrap" class="{{ data.addingElement ? 'add-element-content-wrap is-expanded' : 'add-element-content-wrap' }}" role="region">
					<div class="torro-element-types">
						<# _.each( data.elementTypes, function( elementType ) { #>
							<div class="torro-element-type torro-element-type-{{ elementType.slug }}{{ elementType.slug === data.selectedElementType ? ' is-selected' : '' }}" data-slug="{{ elementType.slug }}">
								<div class="torro-element-type-header">
									<# if ( ! _.isEmpty( elementType.icon_css_class ) ) { #>
										<span class="torro-element-type-header-icon {{ elementType.icon_css_class }}" aria-hidden="true"></span>
									<# } else if ( ! _.isEmpty( elementType.icon_svg_id ) ) { #>
										<svg class="torro-icon torro-element-type-header-icon" aria-hidden="true" role="img">
											<use href="#{{ elementType.icon_svg_id }}" xlink:href="#{{ elementType.icon_svg_id }}"></use>
										</svg>
									<# } else { #>
										<img class="torro-element-type-header-icon" src="{{ elementType.icon_url }}" alt="">
									<# } #>
									<span class="torro-element-type-header-title">
										{{ elementType.title }}
									</span>
								</div>
								<div class="torro-element-type-content">
									<p>{{ elementType.description }}</p>
								</div>
							</div>
						<# } ); #>
					</div>
					<button type="button" class="button add-element-button"{{{ data.selectedElementType ? '' : ' disabled' }}}>
						<?php _e( 'Add element', 'torro-forms' ); ?>
					</button>
				</div>
			</div>

			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>containers[{{ data.id }}][form_id]" value="{{ data.form_id }}" />
			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>containers[{{ data.id }}][label]" value="{{ data.label }}" />
			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>containers[{{ data.id }}][sort]" value="{{ data.sort }}" />
		</script>

		<script type="text/html" id="tmpl-torro-container-footer-panel">
			<button type="button" class="button-link button-link-delete delete-container-button">
				<?php _e( 'Delete Page', 'torro-forms' ); ?>
			</button>
		</script>

		<script type="text/html" id="tmpl-torro-element">
			<div class="torro-element-header">
				<# if ( ! _.isEmpty( data.type.icon_css_class ) ) { #>
					<span class="torro-element-header-icon {{ data.type.icon_css_class }}" aria-hidden="true"></span>
				<# } else if ( ! _.isEmpty( data.type.icon_svg_id ) ) { #>
					<svg class="torro-icon torro-element-header-icon" aria-hidden="true" role="img">
						<use href="#{{ data.type.icon_svg_id }}" xlink:href="#{{ data.type.icon_svg_id }}"></use>
					</svg>
				<# } else { #>
					<img class="torro-element-header-icon" src="{{ data.type.icon_url }}" alt="">
				<# } #>
				<span class="torro-element-header-title">
					{{ ! _.isEmpty( data.label ) ? data.label : data.type.title }}
				</span>
				<button type="button" class="torro-element-expand-button" aria-controls="torro-element-{{ data.id }}-content" aria-expanded="{{ data.active ? 'true' : 'false' }}">
					<span class="torro-element-expand-button-icon" aria-hidden="true"></span><span class="screen-reader-text">{{ data.active ? '<?php _e( 'Hide Content', 'torro-forms' ); ?>' : '<?php _e( 'Show Content', 'torro-forms' ); ?>' }}</span>
				</button>
			</div>
			<div id="torro-element-{{ data.id }}-content" class="{{ data.active ? 'torro-element-content is-expanded' : 'torro-element-content' }}" role="region">
				<div class="torro-element-content-main">
					<div class="torro-element-content-tabs"></div>
					<div class="torro-element-content-panels"></div>
				</div>
				<div class="torro-element-content-footer">
					<button type="button" class="button-link button-link-delete delete-element-button">
						<?php _e( 'Delete Element', 'torro-forms' ); ?>
					</button>
				</div>
			</div>
			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>elements[{{ data.id }}][container_id]" value="{{ data.container_id }}" />
			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>elements[{{ data.id }}][type]" value="{{ data.type.slug }}" />
			<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>elements[{{ data.id }}][sort]" value="{{ data.sort }}" />
		</script>

		<script type="text/html" id="tmpl-torro-element-section-tab">
			<button type="button" id="element-tab-{{ data.elementId }}-{{ data.slug }}" class="torro-element-content-tab torro-element-content-tab-{{ data.slug }}" data-slug="{{ data.slug }}" aria-controls="element-panel-{{ data.elementId }}-{{ data.slug }}" aria-selected="{{ data.active ? 'true' : 'false' }}" role="tab">
				{{ data.title }}
			</button>
		</script>

		<script type="text/html" id="tmpl-torro-element-section-panel">
			<div id="element-panel-{{ data.elementId }}-{{ data.slug }}" class="torro-element-content-panel torro-element-content-panel-{{ data.slug }}" aria-labelledby="element-tab-{{ data.elementId }}-{{ data.slug }}" aria-hidden="{{ data.active ? 'false' : 'true' }}" role="tabpanel">
				<table class="torro-element-fields form-table"></table>
			</div>
		</script>

		<script type="text/html" id="tmpl-torro-element-field">
			<tr{{{ _.attrs( data.wrapAttrs ) }}}>
				<th scope="row">
					<div id="{{ data.id }}-label-wrap" class="label-wrap"></div>
				</th>
				<td>
					<div id="{{ data.id }}-content-wrap" class="content-wrap"></div>
					<# if ( data._element_setting ) { #>
						<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>element_settings[{{ data._element_setting.id }}][element_id]" value="{{ data._element_setting.element_id }}" />
						<input type="hidden" name="<?php echo $this->form_manager->get_prefix(); ?>element_settings[{{ data._element_setting.id }}][name]" value="{{ data._element_setting.name }}" />
					<# } #>
				</td>
			</tr>
		</script>
		<?php

		/**
		 * Fires after templates for the form builder have been printed.
		 *
		 * @since 1.0.0
		 */
		do_action( "{$this->form_manager->get_prefix()}print_form_builder_templates" );
	}