<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">  
	
	<div class="fullwidth">
		
		<h4 class="label"><?php _e('List Type', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>   
		
		<div class="radio-holder">
			<input checked="" type="radio" name="type" value="ul" id="list_type_ul" class="js_shortcode_radio_self_update data-check" />
			<label for="list_type_ul" class="label-form"><span></span><?php _e('Unordered', THEMEMAKERS_THEME_FOLDER_NAME); ?></label>
			<input type="radio" name="type" id="list_type_ol" value="ol" class="js_shortcode_radio_self_update" />
			<label for="list_type_ol" class="label-form"><span></span><?php _e('Ordered', THEMEMAKERS_THEME_FOLDER_NAME); ?></label>
			<input type="hidden" value="ul" class="js_shortcode_template_changer" data-shortcode-field="type" />
		</div><!--/ .radio-holder-->
		<br><br>
		<span class="preset_description">Ordered list has only 2 first types from a list below, Unordered has all 16th list types there.</span>
	
		<h4 class="label"><?php _e('List Styles', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<?php
		$type_array = array();
		for ($i = 1; $i <= 16; $i++) {
			$type_array[$i] = $i;
		}
		?>
		
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="style">
			<?php if (!empty($type_array)): ?>
				<?php foreach ($type_array as $type) : ?>
					<option value="<?php echo $type ?>"><?php _e('Type', THEMEMAKERS_THEME_FOLDER_NAME); ?> <?php echo $type ?></option>
				<?php endforeach; ?>
			<?php endif; ?>
		</select>	
		
		<h4 class="label"><?php _e('List Items', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<textarea class="js_shortcode_template_changer data-area" data-shortcode-field="content">option 1^option 2^option 3</textarea>
		<span class="preset_description"><?php _e('Example: option 1^option 2^option 3', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>		
	
	</div><!--/ .fullwidth-->

</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 = "list";
			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-->



