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

<head>
  <meta charset="utf-8">
  <title>LogonTracer</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" integrity="sha384-yakM86Cz9KJ6CeFVbopALOEQGGvyBFdmA4oHMiYuHcd9L59pLkCEFSlr6M9m434E" crossorigin="anonymous">
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="stylesheet" href="static/css/dark-mode.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" integrity="sha384-0saKbDOWtYAw5aP4czPUm6ByY5JojfQ9Co6wDgkuM7Zn+anp+4Rj92oGK8cbV91S" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.2/jquery.floatThead.min.js" integrity="sha384-ASdxdxzGplF9B/P3mStsNmNS1x+OFhChbFeLziK29WOvaWkGDMspp2xw5+Vha6Ck" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js" integrity="sha384-Q9RsZ4GMzjlu4FFkJw4No9Hvvm958HqHmXI9nqo5Np2dA/uOVBvKVxAvlBQrDhk4" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js" integrity="sha384-J1rV4940pYhBtFhx6SqDEMJP35rgSVSVx+44+TPf67jyXL8dsBtYMZeBCNLf/2zk" crossorigin="anonymous"></script>
  <!-- Neo4j JavaScript Driver -->
  <script src="https://cdn.jsdelivr.net/npm/neo4j-driver@4.2.3/lib/browser/neo4j-web.min.js" integrity="sha384-1D5NgvaN05AW2uC9b49MURqg8/grsmT+Rmq97UTE8+hnwhArsP2FPrtkz71Ga3Gu" crossorigin="anonymous"></script>
  <script src="static/js/script.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light p-1 shadow">
    <a class="navbar-brand" href="#"><img class="my_svg" src="static/images/logo_timeline.svg" alt="top" width="144"></a>
    <div class="collapse navbar-collapse">
      <form class="navbar-nav mr-auto" role="search">
        <div class="form-group mt-3" id="itemForm">
          <div class="form-inline">
            <label class="sr-only" for="InputSelect">select</label>
            <select class="custom-select" id="InputSelect">
              <option>Username</option>
            </select>
            <input class="form-control my-2 my-lg-0 ml-1" type="text" value="administrator" id="query-input">
          </div>
        </div>
        <input type="button" class="btn btn-primary ml-1 mt-3 h-25" value="+" onclick="ItemField.add();" />
        <input type="button" class="btn btn-primary ml-1 mt-3 h-25 mr-1" value="-" onclick="ItemField.del();" />
        <span class="mt-3">
          <input type="checkbox" data-toggle="toggle" data-on="Table" data-onstyle="outline-info" data-height="38" data-off="Graph" data-offstyle="outline-primary" id="timelineTypes">
        </span>
        <button type="button" class="btn btn-outline-primary ml-1 mt-3 h-25" onclick="searchTimeline()">search</button>
        <button type="button" class="btn btn-outline-primary ml-1 mt-3 h-25" onclick="createAlltimeline()">all</button>
        <div class="btn-group  ml-1 mt-3 h-25">
          <button class="btn btn-outline-secondary" type="button">Download</button>
          <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only"></span>
          </button>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" onclick="downloadSummary()" href="#">Summary</a>
            <a class="dropdown-item" onclick="downloadDetail()" href="#">Details</a>
          </div>
        </div>
        <div class="custom-control custom-switch ml-4 mt-4">
          <input type="checkbox" class="custom-control-input" id="darkSwitch">
          <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        </div>

        <script src="static/js/dark-mode-switch.min.js"></script>
      </form>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md-12 main mt-3">
        <div id="error"></div>
        <div id="cy"></div>
        <div id="addcanvas"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var neo = neo4j.default;
    //Neo4j access settings
    var driver = neo.driver("bolt://{{ server_ip }}:{{ ws_port }}", neo.auth.basic("{{ neo4j_user }}", "{{ neo4j_password }}"));
    var session = driver.session();
    //createAlltimeline();

    var currentNumber = 0;
    var ItemField = {
      currentNumber: 0,
      itemTemplate: '<div class="form-inline my-5 my-lg-0"><label class="sr-only" for="InputSelect">select</label>\
                                <select class="custom-select" id="InputSelect_count_">\
                                <option>Username</option></select>\
                                <input class="form-control my-2 my-lg-0 ml-1"" type="text" id="query-input_count_"></div>',
      add: function() {
        currentNumber++;
        if (currentNumber <= 10) {
          var new_item = this.itemTemplate.replace(/_count_/mg, currentNumber);
          var new_area = document.createElement("div");
          new_area.setAttribute("id", "item" + currentNumber);
          var field = document.getElementById('itemForm');
          field.appendChild(new_area);
          document.getElementById('item' + currentNumber).innerHTML = new_item;
        }
      },
      del: function() {
        if (currentNumber == 0) {
          return;
        }
        var field = document.getElementById('itemForm');
        field.removeChild(field.lastChild);
        currentNumber--;
      }
    }

    $(function(){
      deSVG('.my_svg', true);
    });
  </script>
</body>

</html>
