<?php
	function fap_mediaview_templates() {
		?>

		<script type="text/html" id="tmpl-fap-image-upload">
			<div class="progress-container">
				<ul class="progress">
				  <li data-name="CSS Skill" data-percent="100%">
				  	<svg viewBox="-10 -10 220 220">
					    <g fill="none" stroke-width="6" transform="translate(100,100)">
					      <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
					      <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
					      <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
					      <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
					      <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
					      <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
					    </g>
				    </svg>
				    <svg viewBox="-10 -10 220 220">
				    	<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
				    </svg>
				    <span class="dashicons dashicons-yes"></span>
				</li>
				</ul>

				<!--  Defining Angle Gradient Colors  --> 
				<svg width="0" height="0">
				<defs>
				  <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
				    <stop stop-color="#e67724"/>
				    <stop offset="100%" stop-color="#e7642f"/>
				  </linearGradient>
				  <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
				    <stop stop-color="#e7642f"/>
				    <stop offset="100%" stop-color="#e85139"/>
				  </linearGradient>
				  <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
				    <stop stop-color="#e85139"/>
				    <stop offset="100%" stop-color="#e85139"/>
				  </linearGradient>
				  <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
				    <stop stop-color="#e85139"/>
				    <stop offset="100%" stop-color="#e7652e"/>
				  </linearGradient>
				  <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
				    <stop stop-color="#e7652e"/>
				    <stop offset="100%" stop-color="#e67824"/>
				  </linearGradient>
				  <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
				    <stop stop-color="#e67824"/>
				    <stop offset="100%" stop-color="#e67724"/>
				  </linearGradient>
				</defs>
				</svg>
			</div>
		</script>

		<script type="text/html" id="tmpl-fap-image-details">
			<h3>
				<?php _e('Attachment Details'); ?>
			</h3>

			<div class="attachment-info">
				<div class="thumbnail thumbnail-{{ data.type }}">
					<# if ( 'image' === data.type && data.sizes ) { #>
						<img src="{{ data.size.url }}" draggable="false" />
					<# } else { #>
						<img src="{{ data.icon }}" class="icon" draggable="false" />
					<# } #>
				</div>
				<div class="details">
					<div class="filename">{{ data.filename }}</div>
					<div class="uploaded">{{ data.dateFormatted }}</div>

					<div class="file-size">{{ data.filesizeHumanReadable }}</div>
					<# if ( 'image' === data.type && ! data.uploading ) { #>
						<# if ( data.width && data.height ) { #>
							<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
							<a href="{{ data.link }}?utm_source=fap-plugin&utm_medium=preview&utm_campaign=media-preview&utm_term=preview" target="_blank">Preview</a>
						<# } #>
					<# } #>

					<# if ( data.fileLength ) { #>
						<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
					<# } #>

					<div class="compat-meta">
						<# if ( data.compat && data.compat.meta ) { #>
							{{{ data.compat.meta }}}
						<# } #>
					</div>
				</div>
			</div>

			<label class="setting" data-setting="url">
				<span class="name"><?php _e('URL'); ?></span>
				<input type="text" value="{{ data.size.url }}" readonly />
			</label>
			<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>

			<label class="setting" data-setting="title">
				<span class="name"><?php _e('Title'); ?></span>

				<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />

			</label>
		</script>

		<script type="text/html" id="tmpl-lh-logo">
			<div class="lh-logo">
				<a href="http://www.luehrsen-heinrich.de/?utm_source=fap-plugin&utm_medium=banner&utm_campaign=media-banner&utm_term=banner" target="_blank">
					<img src="<?=LHFAP__PLUGIN_URL?>img/lh_logo_head.svg" alt="Luehrsen // Heinrich GmbH" title="Luehrsen // Heinrich GmbH">
				</a>
			</div>
		</script>
		<?php
	}

	add_action('print_media_templates', 'fap_mediaview_templates');

