<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>watch party :D</title>
    <link rel="stylesheet" href="/styles.css?v=1e57e6" />
  </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"
          maxlength="50"
          required
        />

        <label for="join-session-colour">Colour:</label>
        <input type="color" id="join-session-colour" value="#7ed0ff" 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>

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

    <div id="video-container"></div>
    <div id="chatbox-container">
      <div id="viewer-list"></div>
      <div id="chatbox"></div>
      <form id="chatbox-send">
        <input
          type="text"
          placeholder="Message... (/help for commands)"
          list="emoji-autocomplete"
        />
        <div id="emoji-autocomplete"></div>
        <!-- DO NOT ADD SPACING INSIDE THE TAG IT WILL BREAK THE CSS kthxbye -->
      </form>
    </div>

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