<div class="panel">
	<h2>Name</h2>
	<p>{{fileInfo.name}}</>
</div>
<div class="panel links">
	<h2 class="subheader">Links</h2>
	{{!--short direct link to asset--}}
	<div class="share-option">
		<a href="/{{fileInfo.name}}/{{fileInfo.shortUrl}}">Permanent Short Link</a>
		(most convenient)
		<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
		<br/>
		<input type="text" id="short-link" class="link" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.shortUrl}}" onclick="select()"/>
		<button class="copy-button" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
	</div>
	{{!-- link to show route for asset--}}
	<div class="share-option">
		<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">Permanent Long Link</a>
		(fastest service)
		<div class="input-error" id="input-error-copy-long-link" hidden="true"></div>
		</br>
		<input type="text" id="long-link" class="link" readonly onclick="select()" spellcheck="false" value="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}"/>
		<button class="copy-button" data-elementtocopy="long-link" onclick="copyToClipboard(event)">copy</button>
	</div>
	{{!-- html text for embedding asset--}}
	<div class="share-option">
		Embed HTML
		<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
		<br/>
		{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
			<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
		{{else}}
			<input type="text" id="embed-text" class="link" readonly onclick="select()" 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>
	</div>
	{{!--markdown text using asset--}}
	{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
	{{else}}
	<div class="share-option">
		Markdown
		<div class="input-error" id="input-error-copy-markdown-text" hidden="true"></div>
		<br/>
		<input type="text" id="markdown-text" class="link" readonly onclick="select()" spellcheck="false" value='![{{fileInfo.name}}](https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}})'/>
		<button class="copy-button" data-elementtocopy="markdown-text" onclick="copyToClipboard(event)">copy</button>
	</div>
	{{/ifConditional}}
</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">File Type</td>
			<td>{{#if fileInfo.fileType}}
					{{fileInfo.fileType}}
				{{else}}
					unknown
				{{/if}}
			</td>
		</tr>
	</table>
</div>