<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">
	
	<div class="one-half">
		<h4 class="label"><?php _e('Title Text', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="content">
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Title Heading', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="type">
			<option value="h1">h1</option>
			<option value="h2">h2</option>
			<option value="h3">h3</option>
			<option value="h4">h4</option>
			<option value="h5">h5</option>
			<option value="h6">h6</option>
		</select>
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Font Size (px)', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="font_size">
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Font Family', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<?php
		$font_families = ThemeMakersHelperFonts::get_google_fonts();
		$google_fonts_array = array("" => "none");
		foreach ($font_families as $key => $value) {
			$index = explode(":", $value);
			$google_fonts_array[$index[0]] = $value;
		}
		?>
		
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="font_family">
			<?php if (!empty($google_fonts_array)): ?>
				<?php foreach ($google_fonts_array as $name) : ?>
					<option value="<?php echo $name ?>"><?php echo $name ?></option>
				<?php endforeach; ?>
			<?php endif; ?>
		</select>
		
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Line Height (px)', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="line_height">
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Bottom Indent (px)', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="bottom_indent">
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Align', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="align">
			<option value="none"><?php _e('None', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="right"><?php _e('Right', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="left"><?php _e('Left', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="center"><?php _e('Center', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
		</select>
	</div><!--/ .one-half-->
	
</div><!--/ .thememakers_shortcode_template-->


<!-- --------------------------  PROCESSOR  --------------------------- -->

<div class="fullwidth-frame">
	
	<h4 class="label"><?php _e('Preview', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>

	<?php $frame_uri = Thememakers_Application_Shortcodes::get_application_uri() . "/preview.php"; ?>

	<div class="shortcode_app_frame_block">
		<div class="thememakers_shortcode_info_popup" style="display: none"></div>
		<iframe src="<?php echo $frame_uri ?>" class="shortcode_app_frame" frameborder="1" id="thememakers_shortcode_template_preview"></iframe>
	</div>

	<script type="text/javascript">
		var thememakers_app_shortcodes_preview_url = "<?php echo $frame_uri ?>";
		jQuery(function() {
			var shortcode_name = "title";
			thememakers_app_shortcodes.changer(shortcode_name);
			jQuery("#thememakers_shortcode_template .js_shortcode_template_changer").on('keyup, change', function() {
				thememakers_app_shortcodes.changer(shortcode_name);
			});

		});
	</script>
	
</div><!--/ .fullwidth-frame-->



