{{#if fileInfo.description}}
    <p>{{fileInfo.description}}</p>
{{/if}}

<div class="row row--wide">
    <div id="show-short-link">
        <div class="column column--2 column--sml-10">
            <a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"><span class="label">Link:</span></a>
        </div><div class="column column--8 column--sml-10">
            <div class="row row--short row--wide">
                <div class="column column--7">
                    <div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
                    <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>
        </div>
    </div>
    <div id="show-embed-code">
        <div class="column column--2 column--sml-10">
            <span class="label">Embed:</span>
        </div><div class="column column--8 column--sml-10">
            <div class="row row--short row--wide">
                <div class="column column--7">
                    <div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
                    {{#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 poster="{{fileInfo.thumbnail}}" 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>
    </div>
    </div>
</div>

<div id="show-share-buttons">
    <div class="row row--padded row--wide">
        <div class="column column--2 column--sml-10">
            <span class="label">Share:</span>
        </div><div class="column column--7 column--sml-10">
            <div class="row row--short row--wide flex-container flex-container--row flex-container--wrap">
                <a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
                <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
                <a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>
                <a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a>
            </div>
        </div>
    </div>
</div>

<div class="row row--wide">
    <a class="label" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a>
</div>

<div id="show-details" class="row row--padded row--wide" hidden="true">
    <div id="show-claim-name">
        <div class="column column--2 column--sml-10">
            <span class="label">Name:</span>
        </div><div class="column column--8 column--sml-10">
        {{fileInfo.name}}
        </div>
    </div>
    <div id="show-claim-id">
        <div class="column column--2 column--sml-10">
            <span class="label">Claim Id:</span>
        </div><div class="column column--8 column--sml-10">
        {{fileInfo.claimId}}
        </div>
    </div>
    <div id="show-claim-id">
        <div class="column column--2 column--sml-10">
            <span class="label">File Name:</span>
        </div><div class="column column--8 column--sml-10">
        {{fileInfo.fileName}}
        </div>
    </div>
    <div id="show-claim-id">
        <div class="column column--2 column--sml-10">
            <span class="label">File Type:</span>
        </div><div class="column column--8 column--sml-10">
        {{#if fileInfo.fileType}}
            {{fileInfo.fileType}}
        {{else}}
            unknown
        {{/if}}
        </div>
    </div>
</div>