{% extends "base.html" %}
{% block title %}Seal — catalog{% endblock %}
{% block content %}

<section class="hero">
  <div class="hero-eyebrow">
    <span class="pulse"></span>
    live · {{ count }} signed clip{{ '' if count == 1 else 's' }}
  </div>
  <h1 class="hero-title">
    a board for clips that <span class="grad">sign themselves.</span>
  </h1>
  <p class="hero-sub">
    no usernames. no passwords. I know who you are.
  </p>
  <p class="hero-sub">
    this board answers only to <span class="grad">{{ admin }}</span>.
  </p>
  <div class="hero-cta">
    <a class="btn primary" href="#upload">post a clip</a>
    <a class="btn ghost" href="#catalog">browse catalog</a>
  </div>
</section>

<section id="catalog" class="catalog">
  <header class="section-head">
    <h2>catalog</h2>
    <span class="muted">{{ count }} item{{ '' if count == 1 else 's' }} · public</span>
  </header>

  {% if count == 0 %}
    <p class="empty">no clips yet. be the first.</p>
  {% else %}
    <div class="video-grid">
      {% for v in videos %}
        <article class="card video-card">
          <div class="video-wrap">
            <video preload="metadata" autoplay controls playsinline muted loop
                   poster="" disablepictureinpicture
                   src="{{ url_for('video', vid_id=v) }}"></video>
          </div>
          <footer class="card-foot">
            <span class="mono small">{{ v }}</span>
            <a class="iconbtn" href="{{ url_for('video', vid_id=v) }}"
               download title="download">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" fill="none"
                      stroke="currentColor" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </footer>
        </article>
      {% endfor %}
    </div>
  {% endif %}
</section>

<section id="upload" class="upload">
  <header class="section-head">
    <h2>upload</h2>
    <span class="muted">mp4 / mov / webm · 30 MB · 6 sec · 480p</span>
  </header>

  <form class="upload-card" method="post" action="{{ url_for('upload') }}"
        enctype="multipart/form-data">
    <label class="dropzone" for="video-input">
      <svg class="dz-icon" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M24 32V12m0 0l-7 7m7-7l7 7M10 38h28"
              fill="none" stroke="currentColor" stroke-width="2.4"
              stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="dz-title">drop your clip here</span>
      <span class="dz-sub muted">or click to browse</span>
      <span class="dz-file" id="dz-file"></span>
      <input id="video-input" type="file" name="video"
             accept="video/mp4,video/quicktime,video/webm" required>
    </label>
    <button class="btn primary big" type="submit">
      <span>post</span>
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 12h14m0 0l-6-6m6 6l-6 6" fill="none"
              stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
  </form>
</section>

<script>
  (function () {
    const input = document.getElementById('video-input');
    const label = document.querySelector('.dropzone');
    const fileEl = document.getElementById('dz-file');
    if (!input || !label) return;

    function setName(name) {
      fileEl.textContent = name || '';
      label.classList.toggle('has-file', !!name);
    }

    input.addEventListener('change', () => {
      const f = input.files && input.files[0];
      setName(f ? f.name : '');
    });

    ['dragenter', 'dragover'].forEach(evt =>
      label.addEventListener(evt, (e) => {
        e.preventDefault();
        label.classList.add('drag');
      })
    );
    ['dragleave', 'dragend', 'drop'].forEach(evt =>
      label.addEventListener(evt, (e) => {
        e.preventDefault();
        label.classList.remove('drag');
      })
    );
    label.addEventListener('drop', (e) => {
      if (!e.dataTransfer || !e.dataTransfer.files.length) return;
      input.files = e.dataTransfer.files;
      setName(e.dataTransfer.files[0].name);
    });
  })();
</script>

{% endblock %}