<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- automatically refresh the page every 30 seconds -->
  <!-- <meta http-equiv="refresh" content="30"> -->

  <title>Web Terminal</title>

  <!-- Bootstrap core CSS -->
  <script src="/assets/external/bootstrap.min.js"></script>
  <link href="/assets/external/bootstrap.min.css" rel="stylesheet">
  <link href="/assets/main.css" rel="stylesheet">
</head>

<body>
  <header>
    <nav class="navbar navbar-dark bg-dark shadow-sm navbar-xs">
      <div class="container-fluid">
        <a class="navbar-brand mx-auto" href="https://github.com/syssecfsu/witty" target="_blank">
          <img src="/assets/img/logo.svg" style="margin-right: 0.5rem;" height="32"
            class="d-inline-block align-text-top">
          WiTTY: Web-based interactive TTY
        </a>
        <div class="btn-toolbar float-end" role="toolbar" aria-label="top buttons">
          <a class="btn btn-primary btn-sm  m-1" href="/new" onClick="setTimeout(function(){refresh(true)}, 1000)"
            target="_blank" role="button">
            New Session
          </a>
          <a class="btn btn-primary btn-sm  m-1 {{.disabled}}" href="/logout" role="button">
            Logout
          </a>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <div class="container-fluid" style="margin-top:1em;">
      <ul class="nav nav-tabs" id="js_sucks" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link bg-light active" id="interactive-tab" data-bs-toggle="tab"
            data-bs-target="#interactive-cnt" type="button" role="tab" aria-controls="interactive-cnt"
            aria-selected="true"><img src="/assets/img/keyboard.svg" style="margin-right: 0.5rem;" height="18px">Live
            Sessions</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link bg-light" id="saved-tab" data-bs-toggle="tab" data-bs-target="#saved-cnt"
            type="button" role="tab" aria-controls="saved-cnt" aria-selected="false"><img src="/assets/img/record.svg"
              style="margin-right: 0.5rem;" height="18px">Recorded Sessions</button>
        </li>
      </ul>

      <div class="tab-content bg-light border border-info rounded-bottom" id="nav-tabContent">
      </div>
    </div>
  </main>

  <script>
    var active_tab = 0

    function del_btn(path) {
      fetch("/delete/" + path)
      setTimeout(function () {
        refresh(true)
      }, 20);
    }

    // fresh the page every 10 seconds, in case active sessions are closed.
    function refresh(once) {
      tabs = document.getElementById("nav-tabContent")
      fetch("/update/" + active_tab)
        .then((response) => {
          return response.text();
        })
        .then((result) => {
          tabs.innerHTML = result;
        });

      if (once == false) {
        setTimeout(function () {
          refresh(false)
        }, 8000);
      }
    }

    refresh(false)

    var itab = document.querySelector('#interactive-tab')
    itab.addEventListener('shown.bs.tab', function (event) {
      active_tab = 0
    })

    var stab = document.querySelector('#saved-tab')
    stab.addEventListener('shown.bs.tab', function (event) {
      active_tab = 1
    })
  </script>

</body>

</html>