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

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

    <div id="pre-join-controls">
      <form id="join-session-form">
        <h2>Join a session</h2>

        <p id="post-create-message">
          Your session has been created successfully. Copy the current url or
          the Session ID below and share it with your friends. :)
        </p>

        <label for="join-session-nickname">Nickname:</label>
        <input
          type="text"
          id="join-session-nickname"
          placeholder="Nickname"
          required
        />

        <label for="join-session-id">Session ID:</label>
        <input
          type="text"
          id="join-session-id"
          placeholder="123e4567-e89b-12d3-a456-426614174000"
          required
        />
        <button id="join-session-button">Join</button>
      </form>

      <p>
        No session to join? <a href="/create.html">Create a session</a> instead.
      </p>
    </div>

    <div id="video-container"></div>
    <div id="chatbox-container">
      <div id="chatbox"></div>
      <form id="chatbox-send">
        <input type="text" placeholder="Message..." />
      </form>
    </div>

    <script type="module" src="/main.mjs?v=5"></script>
  </body>
</html>