<html lang="en">
  <head>
    <title>{{filename}}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    {{#if isImage}}
      <meta name="twitter:image" content="{{url}}" />
      <meta name="twitter:image:src" content="{{url}}" />
      <meta name="twitter:card" content="summary_large_image" />
    {{/if}}
    {{#if isVideo}}
      <meta name="twitter:card" content="player" />
      <meta name="twitter:player" content="{{url}}" />
      <meta name="twitter:player:stream" content="{{url}}" />
      <meta name="twitter:player:stream:content_type" content="{{mimetype}}" />
    {{/if}}
    <meta property="og:{{ogType}}" content="{{url}}" />
    {{#if title}}
      <meta property="og:title" content="{{title}}" />
      <meta name="twitter:title" content="{{title}}" />
    {{/if}}
    {{#if description}}
      <meta property="og:description" content="{{description}}" />
      <meta name="twitter:description" content="{{description}}" />
    {{/if}}
    {{#if color}}
      <meta name="theme-color" content={{color}} />
    {{/if}}
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    {{#if embed_enabled}}
      <link type="application/json+oembed" href="{{oembed}}" />
    {{/if}}
    <style>
      html, body{min-height:100%;} body{font-family: 'DM Sans', sans-serif;
      background: #0f172a;} .bg-darker{background-color:#1e293b; color: #FFF;}
      .bg-purple {background-color: #9333ea !important;} .text-purple {color:
      #9333ea !important;}
    </style>
  </head>
  <body>
    <div class="row mt-5 mb-5 no-gutters">
      <div class="col-md-3"> </div>
      <div class="col-md-6">
        <div class="card card-shadow bg-darker text-center">
          <div class="card-body">
            <h5 class="card-title">{{filename}}</h5>
            <p class="card-text">{{slug}}
              <span class="text-muted"> ({{size}}) </span>
            </p>
            <a href="{{url}}">
              {{#if isImage}}
                <img
                  decoding="async"
                  src="{{url}}"
                  class="card-img-top"
                  alt="{{filename}}"
                />
              {{/if}}
              {{#if cannotDisplay}}
                <h5 class="text-center"> This file can&apos;t be displayed </h5>
              {{/if}}
            </a>
            {{#if isVideo}}
              <video
                preload="metadata"
                controls
                loop
                muted
                style="max-height: 75vh;
          width: auto; max-width: 100%; border-radius: 0.25rem"
              >
                <source src="{{url}}" type="{{mimetype}}" />
                Your browser does&apos;t support this video type
              </video>
            {{/if}}
            {{#if isAudio}}
              {{#if albumCover}}
                <img
                  decoding="async"
                  src="{{albumCover}}"
                  class="card-img-top mb-3"
                  alt="Album Cover"
                />
              {{/if}}
              <audio controls loop preload="metadata">
                <source src="{{url}}" type="{{mimetype}}" />
                Your browser does&apos;t support this audio type
              </audio>
            {{/if}}
            <h5 class="mt-3 text-center">Views:
              {{views}}</h5>
            <h5 class="mt-1 text-center">Uploaded by
              <span class="fw-bold text-purple">{{username}}</span></h5>
            <h6 class="mt-1 text-center">
              Uploaded at:
              <span class="text-muted">
                {{timestamp}}
              </span>
            </h6>
            <a
              href="{{url}}"
              class="btn bg-purple mt-1"
              download="{{filename}}"
            >Download</a>
          </div>
        </div>
      </div>
      <div class="col-md-3"></div>
    </div>
  </body>
</html>