{{define "preview.html"}}{{template "base" .}}{{end}}

{{define "content"}}
<section class="download-view" aria-labelledby="preview-title">
  <div class="card download-card">
    <div class="card-content">
      {{if .Data.Locked}}
        <div class="file-emblem" aria-hidden="true">
          <svg viewBox="0 0 24 24" role="img" focusable="false"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" /><path d="M19 11V8A7 7 0 0 0 5 8v3" /><path d="M5 11h14v10H5z" /></svg>
        </div>
        <h1 id="preview-title">Protected file</h1>
        <p class="download-subtitle">Unlock the box before viewing this file.</p>
        <a class="button button-primary button-wide" href="/d/{{.Data.Box.ID}}">Unlock box</a>
      {{else}}
        <div class="preview-stage">
          {{if eq .Data.File.PreviewKind "image"}}
            <img src="{{.Data.DownloadURL}}?inline=1" alt="{{.Data.File.Name}}">
          {{else if eq .Data.File.PreviewKind "video"}}
            <video src="{{.Data.DownloadURL}}?inline=1" poster="{{.Data.File.ThumbnailURL}}" controls preload="metadata"></video>
          {{else if eq .Data.File.PreviewKind "audio"}}
            <audio src="{{.Data.DownloadURL}}?inline=1" controls preload="metadata"></audio>
          {{else}}
            <img src="{{.Data.File.ThumbnailURL}}" alt="">
          {{end}}
        </div>
        <h1 id="preview-title" class="file-name" title="{{.Data.File.Name}}">{{.Data.File.Name}}</h1>
        <p class="download-subtitle">{{.Data.File.Size}} · {{.Data.File.ContentType}}</p>
        <a class="button button-primary button-wide" href="{{.Data.DownloadURL}}">
          <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
          Download file
        </a>
      {{end}}
    </div>
  </div>
</section>
{{end}}