
<style>
	.cb-wrap.pull-right {
		width: 205px !important;
		z-index: 99999;
		left: initial !important;
		float: left !important;
		right: auto !important;
	}
	.cb-wrap.pull-left, .stage-wrap.pull-left {
		float: right;
	}
	.file-field .form-group.multiple-wrap {
		display: none;
	}
	.fld-label.form-control {
		padding: 6px 12px;
		border: 1px solid #c5c5c5;
		background-color: #fff;
		width: 95%;
		height: auto;
	}
	.form-wrap .form-field {
		margin: 0;
		background: none;
		min-height: 38px;
	}

	.frmb {
		padding: 15px;
		background-color: white;
	}

	.frmb .field-label, .frmb .legend {
		font-size: 14px;
	}

	.button-field .btn {
		background: green;
		border: 0;
		color: white;
		border-radius: 0;
		margin-top:  10px;
	}
	.frmb .sortable-options .option-selected {
		width: 15px;
	}

	/* show fields in 2 columns preview - start */
	.form-wrap.vg-two-columns .frmb{
		display: flex;
		flex-wrap: wrap;
	}
	.form-wrap.vg-two-columns .frmb .form-field .form-group{
		padding-right: 10px;
	}
	.form-wrap.vg-two-columns .form-field {
		width: 50%;
		/*float: left;*/
		display: block;
		clear: none;
	}
	.form-wrap.vg-two-columns .form-field.header-field,
	.form-wrap.vg-two-columns .form-field.container-trumbowyg{
		width: 100%;	
	}

	.form-wrap.vg-two-columns .form-field.button-field {
		clear: both;
	}
	.parent-formBuilder .form-wrap label{
		display: inline-block;
	}
	/* show fields in 2 columns preview - end */

	/* show fields in 2 columns selector - start */
	label.vg-two-columns-field {
		float: right;
	}

	.parent-formBuilder {
		clear: both;
		margin-top: 40px;
	}

	#contact-form-editor .contact-form-editor-panel fieldset legend {
		float: left;
	}
	/* show fields in 2 columns selector - end */
	.metabox-header {
		margin-bottom: 20px;
		border-bottom: 1px solid #bbb;
		padding-bottom: 20px;
	}

	.vgcf7b-intro .dashicons {
		padding-top: 4px;
	}
	fieldset.wpvsfb-builder-wrapper {
		margin-top: 40px;
		border-top: 1px solid;
		padding-top: 20px;
	}
	div.disable a.disable {
		display: inline-block;
		float: right;
	}
	.wpcf7-free .form-group.width-wrap {
		display: none;
	}
</style>
<div class="wpvsfb-metabox-wrapper  <?php
$classes = array_map('sanitize_html_class', apply_filters('vgcf7b_metabox_classes', array()));
echo implode(' ', $classes);
?>">
	<div class="metabox-header">
		<h2><?php echo esc_html(__('Form builder', $this->textname)); ?></h2>
		<?php do_action('vgcf7b_after_header'); ?>
	</div>
	<p class="wpvsfb-description-form-builder"><?php echo esc_html(__('Available designs', $this->textname)); ?></p>

	<!--OPCIONES PARA PODER SELECCIONAR ESTILOS EN EL FORMBUILDER -->
	<div class="container-style-formBuilder">
		<div class="wpvsfb-option-style-formBuilder" id="active-form-plain">
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-plain-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-plain">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'plain')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'plain'); ?>
			</div>
		</div>
		<div class="wpvsfb-option-style-formBuilder" id="active-form-blue">
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-blue-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-buttonized-blue">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'blue')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'blue'); ?>
			</div>
		</div>
		<div class="wpvsfb-option-style-formBuilder" id="active-form-green">
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-green-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-buttonized-green">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'green')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'green'); ?>
			</div>
		</div>
		<div class="wpvsfb-option-style-formBuilder" id="active-form-red">
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-red-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-buttonized-red">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'red')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'red'); ?>
			</div>
		</div>
		<div class="wpvsfb-option-style-formBuilder" id="active-form-orange">
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-orange-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-buttonized-orange">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'orange')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'orange'); ?>
			</div>
		</div>
		<div class="wpvsfb-option-style-formBuilder" id="active-form-black" >
			<img src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-black-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">

			<!-- Botones para ver preview de formulario o activar un estilo en particular -->
			<div class="wpvsfb-container-preview do-not-activate-buttons" scheme-color="form-buttonized-black">
				<button class="wpvsfb-button-actions button-preview"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo esc_html(__('Preview', $this->textname)); ?></button>
				<?php if (apply_filters('vgcf7b_allow_to_activate', true, 'black')) { ?>
					<button class="wpvsfb-button-actions button-activate"><i class="fa fa-check" aria-hidden="true"></i><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<p><?php echo esc_html(__('Active', $this->textname)); ?></p>
				<?php } ?>
				<?php do_action('vgcf7b_after_style_buttons', 'black'); ?>
			</div>
		</div>
	</div>

	<!--Contenido de popup para mostrar preview de esquema de colores-->
	<div id="wpvsfb-overlay">
		<div id="wpvsfb-popup">

			<div class="wpvsfb-popup-header">
				<div class="wpvsfb-buttons-left">
					<button id="wpvsfb-prev-preview" class="buttons-actions-popup"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
					<button id="wpvsfb-next-preview" class="buttons-actions-popup"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
					<?php if (apply_filters('vgcf7b_allow_to_activate_preview', true)) { ?>
						<button id="wpvsfb-activate-form-preview" class="button-primary"><?php echo esc_html(__('Activate', $this->textname)); ?></button>
					<?php } ?>
					<?php do_action('vgcf7b_after_preview_buttons'); ?>
				</div>	

				<div class="wpvsfb-buttons-right">
					<button class="buttons-actions-popup" id="wpvsfb-close-popup"><i class="fa fa-times" aria-hidden="true"></i></button>
				</div>	
			</div>	

			<div id="wpvsfb-popup-body">
				<img id="wpvsfb-image-preview" src="<?php echo esc_url(plugins_url('/assets/imgs/previews-forms/form-blue-cf7.png', VG_CF7_Form_Builder_Core::$file)); ?>">
			</div>

			<div id="wpvsfb-popup-footer">
				<?php if (apply_filters('vgcf7b_allow_to_activate_preview', true)) { ?>
					<button id="wpvsfb-activate-form-preview" class="button-primary"><?php echo esc_html(__('Activate', $this->textname)); ?></button>
				<?php } ?>
				<?php do_action('vgcf7b_after_preview_buttons'); ?>

			</div>

		</div>
	</div>

	<fieldset class="wpvsfb-builder-wrapper">
		<legend><?php echo esc_html(__("Drag and drop the elements from the left column.", $this->textname)); ?></legend>
		<label class="vg-two-columns-field"><input type="checkbox" <?php checked('yes', $vg_two_columns); ?>  value="yes" name="vg_two_columns" <?php echo $is_two_columns_disabled; ?>> <?php echo esc_html(__("Show fields in two columns. ", $this->textname)) . $two_columns_after; ?></label>

		<?php
		$builder_settings = get_post_meta($form_id, 'vg_form_builder_fields', true);
		if (empty($builder_settings)) {
			$builder_settings = '';
		}
		?>

		<!--@todo-->
		<!--
			El problema que tengo es que me esta quitando todavia los enlaces y los estilos que aplico a cada párrafo en el editor de párrafos.
			El problema es que los datos del formulario los extraigo de la una input hidden entonces esa input que tiene ese datos como que me quita los enlaces entonces si recargo el formulario no aparece el enlace. Si lo añado y guardo si, pero al querer editarlo no.
		-->
		<input name="vg_form_builder_fields" class="vg-form-builder-settings" type="hidden" value="<?php echo esc_attr($this->_sanitize($builder_settings)); ?>"/>
	</fieldset>
</div>
<?php
