<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project</title>

  <link rel="stylesheet" href="./scroll.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
      <div class="sidebar-heading">Functions in Order</div>
      <div id="sidebar" class="list-group list-group-flush">
      </div>
    </div>

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <h5 class=""><a href=''>Home</a></h5>
        <h5 id="space">Documentation generated by <a href="https://pypi.org/project/scroll/">SCROLL</a></h5>

        <!-- <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
              </ul>
            </div> -->

      </nav>

      <div class="container-fluid">
        <p class="args">Function: <code id="func" class="code">func_name</code></p>
        <p class="args">Called By: <code id="func-caller" class="code">func_name</code></p>
        <p class="args">Description:</p>
        <pre id="func-code">Doc-String</pre>
        <p class="args font-weight-bold">Arguments & Types :</p>
        <table id="arg-types" style="width:auto">
          <tbody>
          </tbody>
        </table>

        <p class="args">Returns: <code class="code" id="return">type</code></p>
        <p class="args">Function file: <code class="code" id="file-name" href="">./example.py</code></p>
        <p class="args">This functions calls:
        <p id="func-calls">
          <a class="calls" name="Age.__init__" onclick="display_func(this)">example_func()</a><br>
        <p>
        </p>
      </div>
      <br><br><br>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    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="./functions_data.js"></script>
  <script src="./traces_data.js"></script>

  <script>
    // console.log(functions); // this will show the info in firebug console
    const sidebar = document.getElementById('sidebar');
    functions.forEach(function (item, index) {
      // console.log(item, index);
      var func_link = document.createElement("a");
      func_link.innerHTML = item;
      func_link.setAttribute("class", "list-group-item list-group-item-action bg-light");
      func_link.setAttribute("href", '#' + item);
      func_link.setAttribute("name", item);
      func_link.setAttribute("onclick", 'display_func(this)');
      // func_link.setAttribute("href", '#');
      sidebar.appendChild(func_link);

    });

    display_func_name = (class_name) => {
      // console.log(class_name);
      func_trace = traces[class_name];
      // console.log(func_trace);
      var args_str = ''
      call_args = func_trace['call_args']
      for (var item in call_args) {
        let arg_type = call_args[item];
        args_str = args_str + `<tr><td class='to-right'>${item} :</td><td>${arg_type}</td></tr>`;
      };
      var calls_str = ''
      func_calls = func_trace['calls']
      func_calls.forEach(function (item, index) {
        // console.log(item)
        calls_str = calls_str + `<a class='calls' name="${item}" href="#${item}" onclick="display_func(this)">${item}()</a><br>`;
        // console.log(calls_str)
      });
      document.getElementById('func-calls').innerHTML = calls_str;
      document.getElementById('arg-types').innerHTML = args_str;
      document.getElementById('func').innerHTML = func_trace['function_name'];
      let func_caller = func_trace['caller'];
      document.getElementById('func-caller').innerHTML = `<a class='callers' name="${func_caller}" onclick="display_func(this)">${func_caller}()</a><br>`
      document.getElementById('func-code').innerHTML = func_trace['docstring'];
      document.getElementById('return').innerHTML = func_trace['return_type'];
      document.getElementById('file-name').innerHTML = '.' + func_trace['filename'];
    };

    display_func = (e) => {
      let class_name = e.name;
      // console.log(class_name);
      func_trace = traces[class_name];
      // console.log(func_trace);
      var args_str = ''
      call_args = func_trace['call_args']
      for (var item in call_args) {
        let arg_type = call_args[item];
        args_str = args_str + `<tr><td class='to-right'>${item} :</td><td>${arg_type}</td></tr>`;
      };
      var calls_str = ''
      func_calls = func_trace['calls']
      func_calls.forEach(function (item, index) {
        // console.log(item)
        calls_str = calls_str + `<a class='calls' href='#${item}' name='${item}' onclick='display_func(this)'>${item}()</a><br>`;
        // console.log(calls_str)
      });
      document.getElementById('func-calls').innerHTML = calls_str;
      document.getElementById('arg-types').innerHTML = args_str;
      document.getElementById('func').innerHTML = func_trace['function_name'];
      let func_caller = func_trace['caller'];
      document.getElementById('func-caller').innerHTML = `<a class='callers' href="#${func_caller}" name="${func_caller}" onclick="display_func(this)">${func_caller}()</a><br>`
      document.getElementById('func-code').innerHTML = func_trace['docstring'];
      document.getElementById('return').innerHTML = func_trace['return_type'];
      document.getElementById('file-name').innerHTML = '.' + func_trace['filename'];
    };

    display_func_name(functions[0]);

    window.addEventListener('hashchange', function () {
      // console.log('location changed!');
      let full_url = location.href
      let anchor = full_url.split('#')[1]
      // console.log(anchor)
      display_func_name(anchor);
    })


  </script>




</body>

</html>