<?php
/**
 * 3D model element markup
 *
 * @package scene3d
 */

?>
<script type="text/html" id="tmpl-scene3d-3dmodel">
	<div data-elemid="__elem-id__" class="scene3d-element">
		<input type="hidden" name="elements[__elem-id__][type]" value="{{data.type}}"/>
		<input type="hidden" name="elements[__elem-id__][filename]" value="{{data.filename}}"/>
		<input type="hidden" name="elements[__elem-id__][url]" value="{{data.url}}"/>
		<input type="hidden" name="elements[__elem-id__][quaternion][x]" value="{{data.quaternion[0]}}"/>
		<input type="hidden" name="elements[__elem-id__][quaternion][y]" value="{{data.quaternion[1]}}"/>
		<input type="hidden" name="elements[__elem-id__][quaternion][z]" value="{{data.quaternion[2]}}"/>
		<input type="hidden" name="elements[__elem-id__][quaternion][w]" value="{{data.quaternion[3]}}"/>
		<div class="element-head">
			<span class="elemet-title">{{data.filename}}</span>
			<span class="alignright icons">
				<i class="ion ion-ios-trash remove-element"></i>
				<i class="ion ion-ios-arrow-up"></i>
				<i class="ion ion-ios-arrow-down"></i>
			</span>
		</div>
		<div class="element-details">
			<div class="vector-container">
				<span class="label"><?php esc_html_e( 'Position', 'scene3d' ); ?></span>
				<div class="vector">
					<label>
						<span class="vector-index">X</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][position][x]" value="{{data.position[0]}}"/>
					</label>
					<label>
						<span class="vector-index">Y</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][position][y]" value="{{data.position[1]}}"/>
					</label>
					<label>
						<span class="vector-index">Z</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][position][z]" value="{{data.position[2]}}"/>
					</label>
				</div>
			</div>
			<div class="vector-container">
				<span class="label"><?php esc_html_e( 'Rotation', 'scene3d' ); ?></span>
				<div class="vector">
					<label>
						<span class="vector-index">X</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][rotation][x]" value="{{data.rotation[0]}}"/>
					</label>
					<label>
						<span class="vector-index">Y</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][rotation][y]" value="{{data.rotation[1]}}"/>
					</label>
					<label>
						<span class="vector-index">Z</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][rotation][z]" value="{{data.rotation[2]}}"/>
					</label>
				</div>
				<input type="hidden" name="elements[__elem-id__][rotation][order]" value="{{data.rotation[3]}}"/>
			</div>
			<div class="vector-container">
				<span class="label"><?php esc_html_e( 'Scale', 'scene3d' ); ?></span>
				<div class="vector">
					<label>
						<span class="vector-index">X</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][scale][x]" value="{{data.scale[0]}}"/>
					</label>
					<label>
						<span class="vector-index">Y</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][scale][y]" value="{{data.scale[1]}}"/>
					</label>
					<label>
						<span class="vector-index">Z</span>
						<input type="number" step="any" class="transform" name="elements[__elem-id__][scale][z]" value="{{data.scale[2]}}"/>
					</label>
				</div>
			</div>
			<div>
				<p><span class="label"><?php esc_html_e( 'Shadows', 'scene3d' ); ?></span></p>
				<!-- @formatter:off -->
				<select class="shadows" name="elements[__elem-id__][shadows]">
					<option value="" <# print( data.shadows === '' ? 'selected' : '' ) #> ><?php esc_html_e( 'Disabled', 'scene3d' ); ?></option>
					<option value="c" <# print( data.shadows === 'c' ? 'selected' : '' ) #> ><?php esc_html_e( 'Cast', 'scene3d' ); ?></option>
					<option value="r" <# print( data.shadows === 'r' ? 'selected' : '' ) #> ><?php esc_html_e( 'Receive', 'scene3d' ); ?></option>
					<option value="cr" <# print( data.shadows === 'cr' ? 'selected' : '' ) #> ><?php esc_html_e( 'Cast and receive', 'scene3d' ); ?></option>
				</select>
				<!-- @formatter:on -->
				<p class="description"><?php esc_html_e( 'Cast shadows to other elements of the scene', 'scene3d' ); ?></p>
			</div>
			<# if ( 'fbx' === data.type ) { #>
			<p class="scene3d-notice info"><?php esc_html_e( 'FBX files often need to be scaled down around 0.01 when used along side glTF ones', 'scene3d' ); ?></p>
			<# } #>
			<# if ( 'stl' === data.type ) { #>
			<div class="material">
				<label class="label">
					<span class="label"><?php esc_html_e( 'Color', 'scene3d' ); ?></span>
					<span class="cpicker"><input type="text" data-what="material" data-elemid="__elem-id__" name="elements[__elem-id__][material][color]" value="{{data.material.color}}"/></span>
				</label>
				<p class="description"><?php esc_html_e( 'Material color', 'scene3d' ); ?></p>
				<label class="label">
					<span class="label"><?php esc_html_e( 'Specular', 'scene3d' ); ?></span>
					<span class="cpicker"><input type="text" data-what="specular" data-elemid="__elem-id__" name="elements[__elem-id__][material][specular]" value="{{data.material.specular}}"/></span>
				</label>
				<p class="description"><?php esc_html_e( 'Specular highlight color', 'scene3d' ); ?></p>
				<label class="label">
					<span class="label"><?php esc_html_e( 'Shininess', 'scene3d' ); ?></span>
					<input type="number" step="1" min="0" name="elements[__elem-id__][material][shininess]" value="{{data.material.shininess}}"/>
				</label>
				<p class="description"><?php esc_html_e( 'How shiny the specular highlight is, a higher value gives a sharper highlight', 'scene3d' ); ?></p>
			</div>
			<# } #>
			<# if ( 'obj' === data.type ) { #>
			<div class="mtl-file">
				<label class="label">
					<span class="label"><?php esc_html_e( 'Add a MTL file', 'scene3d' ); ?></span>
					<button class="button add-mtl"><?php esc_html_e( 'Select a MTL file', 'scene3d' ); ?></button>
					<input type="hidden" class="mtl-url" name="elements[__elem-id__][mtl]" value="{{data.mtl}}" />
					<input type="hidden" class="mtl-type" value=""/>
					<button class="button clear-mtl <# print( ! data.mtl ? 'hidden' : '' ); #>" data-id="__elem-id__"><?php esc_html_e( 'Clear', 'scene3d' ); ?></button>
				</label>
				<p class="description"><?php esc_html_e( 'Add a material file', 'scene3d' ); ?></p>
				<p><span class="mtl-filename">{{data.mtlName}}</span></p>
			</div>
			<# } #>
			<# if ( data.animationNames.length ) { #>
			<div class="played-animations">
				<p><span class="label"><?php esc_html_e( 'Animations', 'scene3d' ); ?></span></p>
				<# for ( const anim of data.animationNames ) { #>
				<label class="toggle">
					<input class="toggle-checkbox play-anim" data-elemid="__elem-id__" name="elements[__elem-id__][playedAnim][]"
					<# print( data.playedAnim && data.playedAnim.indexOf( anim ) !== -1 ? 'checked' : '' ); #> type="checkbox" value="{{anim}}"/>
					<span class="toggle-switch"></span>
					<span class="toggle-label">{{anim}}</span>
				</label>
				<# } #>
			</div>
			<p class="description"><?php esc_html_e( 'Animations will be played simultaneously', 'scene3d' ); ?></p>
			<# } #>
			<div class="mesh-sizes" data-id="__elem-id__"></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmpl-scene3d-model-size">
	<div>
		<label class="label">
			<span class="label"><?php esc_html_e( 'Approximate model size (in meters)', 'scene3d' ); ?>:</span>
		</label>
		<p>{{data.x.toFixed(3)}} x {{data.y.toFixed(3)}} x {{data.z.toFixed(3)}}</p>
	</div>
</script>
