<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Galène</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
    <link rel="stylesheet" type="text/css" href="/common.css"/>
    <link rel="stylesheet" type="text/css" href="/galene.css"/>
    <link rel="author" href="https://www.irif.fr/~jch/"/>
    <!-- Font Awesome File -->
    <link href="/css/fontawesome.min.css" rel="stylesheet" type="text/css">
    <link href="/css/solid.css" rel="stylesheet" type="text/css">
    <link href="/css/regular.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/toastify.min.css">
  </head>

  <body>
    <div id="main" class="app">
      <div class="row full-height">
        <nav id="left-sidebar">
          <div class="users-header">
            <div class="galene-header">Galène</div>
          </div>
          <div class="header-sep"></div>
          <div id="users"></div>
        </nav>
        <div class="container">
          <header>
            <nav class="topnav navbar navbar-expand navbar-light fixed-top">
              <div id="header">
                <div class="collapse" title="Collapse left panel" id="sidebarCollapse">
                  <svg class="svg-inline--fa" aria-hidden="true" data-icon="align-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path fill="currentColor" d="M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z"></path>
                  </svg>
                </div>
                <h1 id="title" class="header-title"></h1>
              </div>

              <ul class="nav-menu">
                <li>
                  <button id="presentbutton" class="invisible btn btn-success">
                    <i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Ready</span>
                  </button>
                </li>
                <li>
                  <button id="unpresentbutton" class="invisible btn btn-cancel">
                    <i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Panic</span>
                  </button>
                </li>
                <li>
                  <div id="mutebutton" class="nav-link nav-button">
                    <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
                    <label>Mute</label>
                  </div>
                </li>
                <li>
                  <div id="sharebutton" class="invisible nav-link nav-button">
                    <span><i class="fas fa-share-square" aria-hidden="true"></i></span>
                    <label>Share Screen</label>
                  </div>
                </li>
                <li>
                  <div id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
                    <span><i class="fas fa-window-close" aria-hidden="true"></i></span>
                    <label>Unshare Screen</label>
                  </div>
                </li>
                <li>
                  <div id="stopvideobutton" class="invisible nav-link nav-button nav-cancel">
                    <span><i class="fas fa-window-close" aria-hidden="true"></i></span>
                    <label>Stop Video</label>
                  </div>
                </li>
                <li>
                  <div class="nav-button nav-link nav-more" id="openside">
                    <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
                  </div>
                </li>
              </ul>
            </nav>
          </header>
          <div class="row full-width" id="mainrow">
            <div class="coln-left" id="left">
              <div id="chat">
                <div id="chatbox">
                  <div class="close-chat" id="close-chat"  title="Hide chat">
                    <span class="close-icon"></span>
                  </div>
                  <div id="box"></div>
                  <div class="reply">
                    <form id="inputform">
                      <textarea id="input" class="form-reply"></textarea>
                      <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div id="resizer"></div>
            <div class="coln-right" id="right">
              <span class="show-video blink" id="switch-video"><i class="fas fa-exchange" aria-hidden="true"></i></span>
              <div class="collapse-video" id="collapse-video">
                  <i class="far fa-comment-alt open-chat" title="Open chat"></i>
                </div>
              <div class="video-container no-video" id="video-container">
                <div id="expand-video" class="expand-video">
                  <div id="peers"></div>
                </div>
              </div>
              <div class="login-container invisible" id="login-container">
                <div class="login-box">
                  <form id="userform" class="userform">
                    <label for="username">Username</label>
                    <input id="username" type="text" name="username"
                           autocomplete="username" class="form-control"/>
                    <label for="password">Password</label>
                    <input id="password" type="password" name="password"
                           autocomplete="current-password" class="form-control"/>
                    <label>Auto ready</label>
                    <div class="present-switch">
                      <p class="switch-radio">
                        <input id="presentoff" type="radio" name="presentradio" value="" checked/>
                        <label for="presentoff">Disabled</label>
                      </p>
                      <p class="switch-radio">
                        <input id="presentmike" type="radio" name="presentradio" value="mike"/>
                        <label for="presentmike">Enable microphone</label>
                      </p>
                      <p class="switch-radio">
                        <input id="presentboth" type="radio" name="presentradio" value="both"/>
                        <label for="presentboth">Enable camera and microphone</label>
                      </p>
                    </div>
                    <div class="clear"></div>
                    <div class="connect">
                      <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
                    </div>
                  </form>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="sidebarnav" class="sidenav">
      <div class="sidenav-header">
        <h2>Settings</h2>
        <a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
      </div>
      <div class="sidenav-content" id="optionsdiv">
        <div id="profile" class="profile invisible">
          <div class="profile-user">
            <div class="profile-logo">
              <span><i class="fas fa-user" aria-hidden="true"></i></span>
            </div>
            <div class="profile-info">
              <span id="userspan"></span>
              <span id="permspan"></span>
            </div>
            <div class="user-logout">
              <a id="disconnectbutton">
                <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
                <span class="logout-text">Logout</span>
              </a>
            </div>
          </div>
        </div>
        <div id="mediaoptions" class="invisible">
          <fieldset>
            <legend>Media Options</legend>
            <label for="videoselect" class="sidenav-label-first">Camera:</label>
            <select id="videoselect" class="select select-inline">
              <option value="">off</option>
            </select>
  
            <label for="audioselect" class="sidenav-label">Microphone:</label>
            <select id="audioselect" class="select select-inline">
              <option value="">off</option>
            </select>
  
            <form>
              <input id="blackboardbox" type="checkbox"/>
              <label for="blackboardbox">Blackboard mode</label>
            </form>
  
          </fieldset>
        </div>

        <fieldset>
          <legend>Other Settings</legend>

          <form id="sendform">
            <label for="sendselect" class="sidenav-label-first">Send:</label>
            <select id="sendselect" class="select select-inline">
              <option value="lowest">lowest</option>
              <option value="low">low</option>
              <option value="normal" selected>normal</option>
              <option value="unlimited">unlimited</option>
            </select>
          </form>

          <form id="requestform">
            <label for="requestselect" class="sidenav-label">Receive:</label>
            <select id="requestselect" class="select select-inline">
              <option value="">nothing</option>
              <option value="audio">audio only</option>
              <option value="screenshare">screen share</option>
              <option value="everything" selected>everything</option>
            </select>
          </form>
  
          <form>
            <input id="activitybox" type="checkbox"/>
            <label for="activitybox">Activity detection</label>
          </form>

        </fieldset>

        <form id="fileform">
          <label for="fileinput" class=".sidenav-label-first">Play local file:</label>
          <input type="file" id="fileinput" accept="audio/*,video/*" multiple/>
        </form>
      </div>
    </div>

    <div id="videocontrols-template" class="invisible">
      <div class="video-controls vc-overlay">
        <div class="controls-button controls-left">
          <span class="volume" title="Volume">
            <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
            <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
          </span>
        </div>
        <div class="controls-button controls-right">
          <span class="pip" title="Picture In Picture">
            <i class="far fa-clone" aria-hidden="true"></i>
          </span>
          <span class="fullscreen" title="Fullscreen">
            <i class="fas fa-expand" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>

    <script src="/protocol.js" defer></script>
    <script src="/scripts/toastify.js" defer></script>
    <script src="/galene.js" defer></script>
  </body>
</html>