<?php
class Skyhaus_Customizer_Control_Shadow extends Skyhaus_Customizer_Control_Base {
	static function field_template() {
		echo '<script type="text/html" id="tmpl-field-skyhaus-shadow">';
		self::before_field();
		?>
		<#
			if ( ! _.isObject( field.value ) ) {
			field.value = { };
			}

			var uniqueID = field.name + ( new Date().getTime() );
		#>
			<?php echo self::field_header(); ?>
			<div class="skyhaus-field-settings-inner">

				<div class="skyhaus-input-color" data-default="{{ field.default }}">
					<input type="hidden" class="skyhaus-input skyhaus-input--color" data-name="{{ field.name }}-color" value="{{ field.value.color }}">
					<input type="text" class="skyhaus--color-panel" data-alpha="true" value="{{ field.value.color }}">
				</div>

				<div class="skyhaus--gr-inputs">
					<span>
						<input type="number" class="skyhaus-input skyhaus-input-css change-by-js"  data-name="{{ field.name }}-x" value="{{ field.value.x }}">
						<span class="skyhaus--small-label"><?php _e( 'X', 'skyhaus' ); ?></span>
					</span>
					<span>
						<input type="number" class="skyhaus-input skyhaus-input-css change-by-js"  data-name="{{ field.name }}-y" value="{{ field.value.y }}">
						<span class="skyhaus--small-label"><?php _e( 'Y', 'skyhaus' ); ?></span>
					</span>
					<span>
						<input type="number" class="skyhaus-input skyhaus-input-css change-by-js" data-name="{{ field.name }}-blur" value="{{ field.value.blur }}">
						<span class="skyhaus--small-label"><?php _e( 'Blur', 'skyhaus' ); ?></span>
					</span>
					<span>
						<input type="number" class="skyhaus-input skyhaus-input-css change-by-js" data-name="{{ field.name }}-spread" value="{{ field.value.spread }}">
						<span class="skyhaus--small-label"><?php _e( 'Spread', 'skyhaus' ); ?></span>
					</span>
					<span>
						<span class="input">
							<input type="checkbox" class="skyhaus-input skyhaus-input-css change-by-js" <# if ( field.value.inset == 1 ){ #> checked="checked" <# } #> data-name="{{ field.name }}-inset" value="{{ field.value.inset }}">
						</span>
						<span class="skyhaus--small-label"><?php _e( 'inset', 'skyhaus' ); ?></span>
					</span>
				</div>
			</div>
			<?php
			self::after_field();
			echo '</script>';
	}
}
