spee.ch/views/partials/assetInfo.handlebars

<h2 class="h2--top">Title</h2>
<div class="row row--short">
    {{fileInfo.title}}
</div>
<h2>Links</h2>
{{!-- short direct link to asset --}}
<div class="row row--short">
    <div class="column column--7">
        <p><a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a></p>
        <div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
        <br/>
        <input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
    </div><div class="column column--1"></div><div class="column column--2">
        <button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
    </div>
</div>
{{!-- html text for embedding asset--}}
<div class="row row--short">
    <div class="column column--7">
        <p>Embed HTML</p>
        <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="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
        {{else}}
            <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
        {{/ifConditional}}
    </div><div class="column column--1"></div><div class="column column--2">
        <button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
    </div>
</div>

<h2>Description</h2>
<div class="row row--short">
    {{fileInfo.description}}
</div>

<h2>Metadata</h2>
<div class="row row--short">
    <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 class="wrap-words">{{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>

<script type ="text/javascript">
    function copyToClipboard(event){
        var elementToCopy = event.target.dataset.elementtocopy;
        var element = document.getElementById(elementToCopy);
        var errorElement = 'input-error-copy-text' + elementToCopy;
        element.select();
        try {
            document.execCommand('copy');
        } catch (err) {
            showError(errorElement, 'Oops, unable to copy');
        }
    }
</script>