<?php
/**
 * Main live customizer template containing cotrols used to display on screen
 */
?>

<div class="essb-live-customizer essb-live-customizer-main">
		<div class="essb-live-customizer-options-title">
			<span class="title"></span><i
				class="fa fa-arrow-right essb-live-customizer-back"
				title="Back to main menu"></i>
		</div>
	<div class="essb-live-customizer-close">
		<a href="#" class="essb-live-customizer-close-icon" title="Close"><i
			class="fa fa-close"></i></a>
	</div>

	<!-- Customizer Navigation -->
	<div class="essb-live-customizer-icons essb-scroll-effect">
		<div class="customizer-box customizer-close active"
			data-title="Share Optimization" data-options="close">
			<div class="icon">
				<i class="ti-close"></i>
			</div>
			<div class="title">Close</div>
		</div>
	
		<div class="customizer-box customizer-share"
			data-title="Share Optimization" data-options="share">
			<div class="icon">
				<i class="ti-new-window"></i>
			</div>
			<div class="title">Share Optimization</div>
		</div>

		<div class="customizer-box customizer-layout"
			data-title="Button Positions" data-options="positions">
			<div class="icon">
				<i class="ti-layout"></i>
			</div>
			<div class="title">Button Positions</div>
		</div>
		<div class="customizer-box customizer-layout"
			data-title="Additional Social Network Options" data-options="networks" style="display: none;">
			<div class="icon">
				<i class="ti-server"></i>
			</div>
			<div class="title">Network Specific Options</div>
		</div>

		<div class="customizer-box customizer-mobile"
			data-title="Mobile Setup" data-options="mobile">
			<div class="icon">
				<i class="ti-mobile"></i>
			</div>
			<div class="title">Mobile Setup</div>
		</div>

		<div class="customizer-box customizer-mobile"
			data-title="Share Counters Information and Setup"
			data-options="counters">
			<div class="icon">
				<i class="ti-infinite"></i>
			</div>
			<div class="title">Counter Info & Setup</div>
		</div>
		
		<div class="customizer-box customizer-modules" data-title="Quick Module Activate" data-options="modules">
			<div class="icon">
				<i class="ti-package"></i>
			</div>
			<div class="title">Modules</div>
		</div>

		<div class="customizer-box customizer-optimize"
			data-title="Plugin Optimizations" data-options="optimize">
			<div class="icon">
				<i class="ti-rocket"></i>
			</div>
			<div class="title">Plugin Optimizations</div>
		</div>

	</div>

	<!-- Customizer Settings Panel -->
	<div class="essb-live-customizer-options essb-scroll-effect">
		<div class="essb-live-customizer-options-content"></div>
	</div>
</div>

<div class="essb-live-customizer essb-live-buttons-customizer">
	<div style="padding: 7px 0px";>
		<div class="essb-live-customizer-title col4-5" style="width: 50%">Customize Buttons</div>
		<div class="essb-live-customizer-close col1-5" style="width: 48%;">

		<a href="#"
			class="essb-composer-button essb-composer-blue essb-open-location"
			data-section="section-position-settings" target="_blank"><i class="fa fa-cog"></i> Open All Location Settings</a>
		
		
		<a href="#"
			class="essb-composer-button essb-composer-blue essb-update-preview"
			data-section="section-position-settings"><i class="fa fa-refresh"></i> Update Preview</a>
		<a href="#"
			class="essb-composer-button essb-composer-blue essb-section-save"
			data-section="section-position-settings"><i class="fa fa-save"></i> Save Settings</a>

			<a href="#" class="essb-live-button-customizer-close-icon"
				title="Close"><i class="fa fa-close"></i></a>
		</div>
	</div>
	
	<!-- Customizer Settings Panel -->
	<div class="essb-live-button-customizer-options essb-scroll-effect">
		
		
		<div class="essb-live-button-customizer-options-content"></div>
	</div>
</div>