<div class="asset-preview-details text-centered">
  <div class="asset-preview-details-preview">
    {{#ifValueEquals assetType "image"}}
      <img src="api/asset/serve/{{_id}}"/>
    {{/ifValueEquals}}

    {{#ifValueEquals assetType "video"}}
      <video preload="none" width="640px" height="360px" poster="" style="width:100%; height:100%;">
        <source src="api/asset/serve/{{_id}}" type="{{mimeType}}"/>
      </video>
    {{/ifValueEquals}}

    {{#ifValueEquals assetType "audio"}}
      <i class="fa fa-file-audio-o"></i>
      <audio src="api/asset/serve/{{_id}}" type="{{mimeType}}" controls="controls" style="width:100%;"></audio>
    {{/ifValueEquals}}

    {{#ifValueEquals assetType "other"}}
      <i class="fa fa-file-o"></i>
    {{/ifValueEquals}}
  </div>

  <h1 class="asset-preview-title">{{title}}</h1>
  <div class="asset-preview-description">{{description}}</div>
  <div class="asset-size">{{t 'app.assetsize'}} : {{{bytesToSize size}}}</div>

  {{#if metadata.duration}}
    <div class="asset-duration break">{{t 'app.assetduration'}} : {{{formatDuration metadata.duration}}}</div>
  {{/if}}

  {{#if metadata.height}}
    <div class="asset-height">{{t 'app.assetdimensions'}} : {{{metadata.width}}} x {{{metadata.height}}}</div>
  {{/if}}

  {{#if tags.length}}
    <div class="asset-tags">{{t 'app.tags'}} : {{{renderTags tags "title"}}}</div>
  {{/if}}

  {{#if isSelectable}}
  <div class="assset-select">
   <a href="#" class="btn btn-primary confirm-select-asset">Select</a>
  </div>
  {{/if}}
  <div class="asset-preview-edit">
    <button class="asset-preview-edit-button btn btn-primary">{{t 'app.edit'}}</button>
  </div>

</div>
