<div class="panel">
	<h2>Name</h2>
	<p>{{fileInfo.name}}</>
</div>
<div class="panel links">
	<h2 class="subheader">Links</h2>
	<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">Direct Link</a>
	<br/>
	<input type="text" id="direct-link" class="link" readonly="true" spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
	<button class="copy-button" data-elementtocopy="direct-link" onclick="copyToClipboard(event)">copy</button>
	<br/>
	<br/>
	Embed HTML
	<br/>
	{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
		<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;video controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
	{{else}}
		<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />'/>
	{{/ifConditional}}
	<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
	<br/>
	<br/>
	<a href="/show/{{fileInfo.name}}/{{fileInfo.claimId}}">Details</a>
	</br>
	<input type="text" id="show-link" class="link" readonly="true" spellcheck="false" value="https://spee.ch/show/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
	<button class="copy-button" data-elementtocopy="show-link" onclick="copyToClipboard(event)">copy</button>
	<br/>
	<br/>
</div>
<div class="panel">
	<h2 class="subheader">Metadata</h2>
	<table class="metadata-table" style="table-layout: fixed">
		<tr class="metadata-row">
			<td class="left-column">Name</td>
			<td>{{fileInfo.name}}</td>
		</tr>
		<tr class="metadata-row">
			<td class="left-column">Claim Id</td>
			<td>{{fileInfo.claimId}}</td>
		</tr>
		<tr class="metadata-row">
			<td class="left-column">File Name</td>
			<td>{{fileInfo.fileName}}</td>
		</tr>
		<tr>
			<td class="left-column">fileType</td>
			<td>{{#if fileInfo.fileType}}
					{{fileInfo.fileType}}
				{{else}}
					unknown
				{{/if}}
			</td>
		</tr>
	</table>
</div>

<script type ="text/javascript">
 	// update the link holder
	function copyToClipboard(event){
		var elementToCopy = event.target.dataset.elementtocopy;
		var element = document.getElementById(elementToCopy);
		element.select();
		try {
			var successful = document.execCommand('copy');
		} catch (err) {
			alert('Oops, unable to copy');
		}
	}
</script>