{{ template "timemachine_base.html" . }}

{{ define "frame title" }}
  <div class="title">
    {{ . }}
    <img class="frame-close" src="{{ dataimg "timemachine/win95-close.gif" }}">
  </div>
{{ end }}

{{ define "content" }}
<div class="center-layout content mw7 ph3 flex flex-column g3">
  <div class="frame mv3 mv4-ns mw6 margin-center">
    {{ template "frame title" "Submit A Video" }}
    <form class="post-content" action="" method="POST">
      {{ csrftoken .Session }}
      <div class="post-content pa3">
        <div class="flex flex-column g3">
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-media.png" }}">
            </div>
            <div class="flex flex-column flex-grow-1 g1">
              <strong>Video URLs</strong>
              <div id="media-inputs" class="flex flex-column g1">
                <input
                  class="win95-input"
                  type="url"
                  name="media_url"
                  required
                >
              </div>
              <div class="f7">
                <a href="javascript:anotherVideo()">+ Add video</a>
              </div>
              <div class="f7 less-spacing">
                <p>
                  Take videos of yourself using an old device. The videos should:
                </p>
                <ul>
                  <li>Show the entire device</li>
                  <li>Clearly show the contents of the device's screen</li>
                  <li>Have minimal editing and clear sound</li>
                </ul>
                <p>
                  Upload the videos somewhere publicly accessible, then share the link here. We can download videos from file-sharing services or any video service supported by youtube-dl. <a href="javascript:terms()">See licensing terms.</a>
                </p>
                <p>
                  If you have a comparable modern device, feel free to submit video of that as well!
                </p>
                <div id="terms" class="dn">
                  <div></div> <!-- now the hr is not the :first-child -->
                  <hr>
                  <p>By submitting this form, you are granting us permission to:</p>
                  <ul>
                    <li>Download copies of any submitted videos</li>
                    <li>Edit any submitted videos and publish them with attribution on our website and other promotional channels</li>
                  </ul>
                  <p>Submitted videos will not be used for any commercial purpose.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-checklist.png" }}">
            </div>
            <div class="flex flex-column flex-grow-1 g1">
              <strong>Device Info</strong>
              <textarea class="win95-input h4" name="device_info" required></textarea>
              <div class="f7 less-spacing">
                <p>
                  Include specific info about the device such as its model number, release year, CPU speed, amount of memory, etc.
                </p>
              </div>
            </div>
          </div>
          <div class="flex g3">
            <div class="flex-shrink-0">
              <img class="pixelated" src="{{ dataimg "timemachine/win95-scroll.png" }}">
            </div>
            <div class="flex flex-column flex-grow-1 g1">
              <strong>Description</strong>
              <textarea class="win95-input h4" name="description" required></textarea>
              <div class="f7 less-spacing">
                <p>
                  What's the story behind this device? When did you get it? What did you use it for? Is it in good shape? Is there anything interesting or notable about it?
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="mt3 flex justify-end g3">
          <button class="win95-btn" type="submit" value="Submit"><u>S</u>ubmit</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script>
  let form = document.querySelector("form");
  let deviceInfo = document.querySelector("[name=device_info]");
  let description = document.querySelector("[name=description]");
  let submitBtn = document.querySelector("[type=submit]");

  function mediaUrls() {
    return document.querySelectorAll("[name=media_url]");
  }

  function saveData() {
    const urls = Array.from(mediaUrls()).map(i => i.value);
    localStorage.setItem("tm_media_url", JSON.stringify(urls));
    localStorage.setItem("tm_device_info", deviceInfo.value);
    localStorage.setItem("tm_description", description.value);
  }
  form.addEventListener("submit", function() {
    saveData();
    submitBtn.disabled = true;
  });

  document.addEventListener("visibilitychange", function() {
    saveData();
  });

  const urlsStr = localStorage.getItem("tm_media_url") ?? "";
  let urls = [];
  if (urlsStr[0] === "[") {
    urls = JSON.parse(urlsStr);
  } else if (urlsStr) {
    urls = [urlsStr];
  }

  for (let i = 1; i < urls.length; i++) {
    anotherVideo();
  }
  for (const [i, input] of mediaUrls().entries()) {
    input.value = urls[i] ?? "";
  }

  deviceInfo.value = localStorage.getItem("tm_device_info") ?? "";
  description.value = localStorage.getItem("tm_description") ?? "";

  function terms() {
    document.querySelector("#terms").classList.toggle("dn");
  }

  function anotherVideo() {
    const input = document.createElement("input");
    input.classList.add("win95-input");
    input.type = "url";
    input.name = "media_url";
    document.querySelector("#media-inputs").appendChild(input);
  }
</script>
{{ end }}
