<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>watch party :D</title>
    <link rel="stylesheet" href="/styles.css?v=3" />
  </head>

  <body>
    <noscript>
      This site will <em>not</em> work without JavaScript, and there's not
      really any way around that :(
    </noscript>

    <div id="create-controls">
      <form id="create-session-form">
        <h2>Create a session</h2>

        <label for="create-session-video">Video:</label>
        <input
          type="text"
          id="create-session-video"
          placeholder="https://video.example.com/example.mp4"
          required
        />

        <!-- TODO: Ability to add multiple subtitles for different languages -->
        <label for="create-session-subs">Subtitles:</label>
        <input
          type="text"
          id="create-session-subs"
          placeholder="https://video.example.com/example.vtt"
        />

        <label for="create-session-subs-name">Subtitle track name:</label>
        <input
          type="text"
          id="create-session-subs-name"
          placeholder="English"
        />
        <button>Create</button>
      </form>

      <p>
        Already have a session?
        <a href="/">Join your session</a> instead.
      </p>
    </div>

    <script type="module" src="/create.mjs?v=1"></script>
  </body>
</html>