<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Extracted video(s) for {{url}}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <style>
    * {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
    }

    html {
      font-size: 16px;
    }

    video {
      max-width: 100%;
    }

    main {
      width: 100%;
      padding: 1rem;
      margin: auto;
      max-width: 90ch;
    }

    section {
      margin-bottom: 1rem;
      padding-top: 1rem;
      border-top: 1px solid gray;
    }

    h1, h2 {
      margin-bottom: 0.5rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.5rem;
      margin-bottom: 0.5rem;
    }

    p span {
      display: inline-block;
      background-color: antiquewhite;
      padding: 0.2rem;
      padding-left: 0.35rem;
      padding-right: 0.35rem;
      border-radius: 0.25rem;
    }

    ul {
      list-style-position: inside;
    }

    table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 1rem;
    }

    table * {
      word-break: break-word;
    }

    table tr {
      border-bottom: 1px solid lightgray;
      display: block;
      padding: 0.5rem;
      padding-left: 0rem;
    }

    table tr:last-of-type {
      border-bottom: 0px;
    }

    table tr td:first-of-type {
      width: 20ch;
    }

    video {
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      margin: auto;
      margin-bottom: 1rem;
      background-color: black;
    }
    </style>

  </head>

  <body>
    
    <main>

      <header>
        <h1>Extracted Video(s)</h1>
        <p>The following video data was extracted by Scoop using yt-dlp during the capture of {{ url }}.</p>
        <p>This summary was generated on {{ now }}.</p>
      </header>

      {% if videoSaved %}
      <section>
        <h2>Video</h2>

        {% for filename, locales in availableVideosAndSubtitles %}
        <video controls>
          <source src="{{ filename }}.mp4" type="video/mp4" />
            {% for locale in locales %}
            <track 
              kind="captions" 
              srclang="{{ locale }}" 
              src="{{ filename }}.{{ locale }}.vtt"
              {% if loop.first %} default {% endif %}>
            {% endfor %}
        </video>
        {% endfor %}

      </section>
      {% endif %}
        
      {% if metadataSaved %}
      <section>
        <h2>Metadata summary</h2>

        <p>At the time of capture.</p>

        {% for entry in metadataParsed %}
        <table>

          <tr>
            <td>Video #</td>
            <td>{{ loop.index }}</td>
          </tr>

          {% if entry.title %}
          <tr>
            <td>Video title:</td>
            <td>{{ entry.title }}</td>
          </tr>
          {% endif %}

          {% if entry.description %}
          <tr>
            <td>Video description:</td>
            <td>{{ entry.description }}</td>
          </tr>
          {% endif %}

          {% if entry.uploader %}
          <tr>
            <td>Video uploader:</td>
            <td>{{ entry.uploader }}</td>
          </tr>
          {% endif %}

          {% if entry.uploader_url %}
          <tr>
            <td>Uploader url:</td>
            <td>{{ entry.uploader_url }}</td>
          </tr>
          {% endif %}

          {% if entry.comment_count %}
          <tr>
            <td>Comments:</td>
            <td>{{ entry.comment_count }}</td>
          </tr>
          {% endif %}

          {% if entry.like_count %}
          <tr>
            <td>Likes:</td>
            <td>{{ entry.like_count }}</td>
          </tr>
          {% endif %}

          {% if entry.repost_count %}
          <tr>
            <td>Reposts:</td>
            <td>{{ entry.repost_count }}</td>
          </tr>
          {% endif %}

          {% if entry.timestamp %}
          <tr>
            <td>Publication time:</td>
            <td class="publication-timestamp-{{ loop.index }}"></td>
            <script>
            const publication = new Date({{ entry.timestamp }} * 1000);
            document.querySelector(".publication-timestamp-{{ loop.index }}").innerText = publication.toISOString();
            </script>
          </tr>
          {% endif %}
        </table>
        {% endfor %}

      </section>
      {% endif %}

      <section>
        <h2>Individual assets</h2>

        {% for filename, locales in availableVideosAndSubtitles %}
        <li>
          <a href="{{ filename }}.mp4">Video file: {{ filename }}.mp4</a>
        </li>
          
          {% for locale in locales %}
          <li>
            <a href="{{ filename }}.{{ locale }}.vtt">Video subtitles: {{ filename }}.{{ locale }}.vtt</a>
          </li>
          {% endfor %}
        {% endfor %}

        {% if metadataSaved %}
        <li>
          <a href="video-extracted-metadata.json">Video metadata</a>
        </li>
        {% endif %}

      </section>
    </main>

  </body>

</html>

