<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>atlantis</title>
    <meta name="description" content>
    <meta name="author" content>
    <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/xterm-5.3.0.css">
    <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/normalize.css">
    <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/skeleton.css">
    <link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/custom.css">
    <link rel="icon" type="image/png" href="{{ .CleanedBasePath }}/static/images/atlantis-icon.png">
    <style>
      #terminal {
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        border: 5px solid white;
        z-index: 10;
        }

      .terminal.xterm {
        padding: 10px;
      }
      #watermark {
        opacity: 0.5;
        color: BLACK;
        position: absolute;
        bottom: 0;
        padding-right: 30px;
        padding-bottom: 15px;
        right: 0;
        z-index: 15;
      }
    </style>
  </head>

  <body>
    <section id="watermark">
    <a title="atlantis" href="{{ .CleanedBasePath }}/"><img class="hero" src="{{ .CleanedBasePath }}/static/images/atlantis-icon_512.png"/></a>
    <p class="terminal-heading-white">atlantis</p>
    <p class="title-heading"><strong></strong></p>
    </section>
    <section>
      <div id="terminal"></div>
    </section>
  </div>
  <footer class="footer-white">Initializing...
  </footer>

    <script src="{{ .CleanedBasePath }}/static/js/jquery-3.5.1.min.js"></script>
    <script src="{{ .CleanedBasePath }}/static/js/xterm-5.3.0.js"></script>
    <script src="{{ .CleanedBasePath }}/static/js/xterm-addon-attach-0.9.0.js"></script>
    <script src="{{ .CleanedBasePath }}/static/js/xterm-addon-fit-0.8.0.js"></script>
    <script src="{{ .CleanedBasePath }}/static/js/xterm-addon-search-0.13.0.js"></script>
    <script src="{{ .CleanedBasePath }}/static/js/xterm-addon-search-bar.js"></script>

    <script>
      function updateTerminalStatus(msg) {
          document.getElementsByTagName("footer")[0].innerText = msg;
      }
      var term = new Terminal({scrollback: 15000, smoothScrollDuration:125 });
      var socket = new WebSocket(
        (document.location.protocol === "http:" ? "ws://" : "wss://") +
        document.location.host +
        document.location.pathname +
        "/ws");

      socket.onopen = function(event) {
        updateTerminalStatus("Running...");
      };
      socket.onclose = function(event) {
        updateTerminalStatus("Done");
      };

      window.addEventListener("unload", function(event) {
        websocket.close();
      })
      var attachAddon = new AttachAddon.AttachAddon(socket);
      var fitAddon = new FitAddon.FitAddon();
      var searchAddon = new SearchAddon.SearchAddon();
      var searchBarAddon = new SearchBarAddon.SearchBarAddon({searchAddon});
      term.loadAddon(attachAddon);
      term.loadAddon(fitAddon);
      term.loadAddon(searchAddon);
      term.loadAddon(searchBarAddon);
      term.open(document.getElementById("terminal"));
      searchBarAddon.show();
      fitAddon.fit();
      window.addEventListener("resize", () => fitAddon.fit());
    </script>
  </body>
</html>
