<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?>

<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">

	<div class="one-half">
		<h4 class="label"><?php _e('Heading', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="string:Name,number:Salary,number:Full Time Employee" class="js_shortcode_template_changer data-input" data-shortcode-field="heading"><br />
		<span class="preset_description"><?php _e('Example: string:Name,number:Salary,number:Full Time Employee<br />
		Documentation: https://developers.google.com/chart/interactive/docs/gallery/table', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Table Data', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<textarea class="js_shortcode_template_changer data-area" data-shortcode-field="content">'Mike', {v: 10000, f: '$10,000'}, 1~'Jim', {v:8000, f: '$8,000'}, 1~'Alice', {v: 12500, f: '$12,500'}, 0~'Bob', {v: 7000, f: '$7,000'},1</textarea><br />
		<span class="preset_description"><?php _e("Example: 'Mike', {v: 10000, f: '$10,000'}, 1~'Jim', {v:8000, f: '$8,000'}, 1~'Alice', {v: 12500, f: '$12,500'}, 0~'Bob', {v: 7000, f: '$7,000'},1<br />
		Documentation: https://developers.google.com/chart/interactive/docs/gallery/table", THEMEMAKERS_THEME_FOLDER_NAME); ?></span>
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Show Row Number', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>   
		<input checked="" type="radio" name="show_row_number" id="show_row_number_1" value="1" class="js_shortcode_radio_self_update data-check" />
		<label for="show_row_number_1" class="label-form"><span></span><?php _e('Yes', THEMEMAKERS_THEME_FOLDER_NAME); ?></label>
		<input type="radio" name="show_row_number" id="show_row_number_0" value="0" class="js_shortcode_radio_self_update" />
		<label for="show_row_number_0" class="label-form"><span></span><?php _e('No', THEMEMAKERS_THEME_FOLDER_NAME); ?></label>
		<input type="hidden" value="1" class="js_shortcode_template_changer" data-shortcode-field="show_row_number" />
	</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 = "google_table";
			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-->


