<div id="asset-display-component">
    <div id="asset-status">
        <div id="searching-message" hidden="true">
            <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
            {{> progressBar}}
            <p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
        </div>
        <div id="failure-message" hidden="true">
            <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
            <i><p id="error-message"></p></i>
        </div>
    </div>
    <div id="asset-holder" hidden="true">
        {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
            {{> video}}
        {{else}}
            {{> image}}
        {{/ifConditional}}
        <div>
            <a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
        </div>

    </div>
</div>

<script type="text/javascript">

    const asset = new Asset();
    asset.data['src'] = '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}';
    asset.data['claimName'] = '{{claimInfo.name}}';
    asset.data['claimId'] = '{{claimInfo.claimId}}';
    asset.data['fileExt'] = '{{claimInfo.fileExt}}';
    asset.data['contentType'] = '{{claimInfo.contentType}}';
    console.log('asset data:', asset.data);
    asset.checkFileAndRenderAsset();

</script>