<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SFU</title>
    <link rel="stylesheet" type="text/css" href="/common.css"/>
    <link rel="stylesheet" type="text/css" href="/sfu.css"/>
    <link rel="author" href="https://www.irif.fr/~jch/"/>
  </head>

  <body>
    <h1 id="title">SFU</h1>

    <div id="header">
      <div id="statdiv">
        <span id="statspan"></span>
        <span id="userspan"></span>
        <form id="userform" class="userform">
          <label for="username">Username:</label>
          <input id="username" type="text" name="username"
                 autocomplete="username"/>
          <label for="password">Password:</label>
          <input id="password" type="password" name="password"
                 autocomplete="current-password"/>
          <input id="connectbutton" type="submit" value="Connect" disabled/>
        </form>
        <input id="disconnectbutton" class="invisible"
               type="submit" value="Disconnect"/>
        <span id="errspan"></span>
      </div>

      <div id="optionsdiv">
        <button id="presentbutton" class="invisible">Present</button>
        <button id="unpresentbutton" class="invisible">Stop presenting</button>

        <span id="mediaoptions">
          <label for="videoselect">Camera:</label>
          <select id="videoselect">
            <option>default</option>
            <option>off</option>
          </select>

          <label for="audioselect">Microphone:</label>
          <select id="audioselect">
            <option>default</option>
            <option>off</option>
          </select>
          <button id="mutebutton">Mute</button>
        </span>

        <button id="sharebutton" class="invisible">Share screen</button>
        <button id="unsharebutton" class="invisible">Stop sharing</button>

        <label for="sendselect">Send:</label>
        <select id="sendselect">
          <option value="lowest">lowest</option>
          <option value="low">low</option>
          <option value="normal" selected>normal</option>
          <option value="unlimited">unlimited</option>
        </select>

        <label for="requestselect">Receive:</label>
        <select id="requestselect">
          <option value="audio">audio only</option>
          <option value="screenshare">screen share</option>
          <option value="everything" selected>everything</option>
        </select>
      </div>
    </div>

    <div id="main">
      <div id="users"></div>
      <div id="chat">
        <div id="chatbox">
          <div id="box"></div>
          <form id="inputform">
            <textarea id="input"></textarea>
            <input id="inputbutton" type="submit" value="&#10148;"/>
          </form>
        </div>
        <div id="resizer">
        </div>
      </div>

      <div id="peers"></div>
    </div>

    <script src="/protocol.js" defer></script>
    <script src="/sfu.js" defer></script>
  </body>
</html>