<!doctype html>

<html>
  <head>
    <meta charset="utf-8" .>
    <title>{{profile_name.split('/')[-1].split('.')[0]}}</title>

    <!-- bootstrap stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <style>
      body {
        padding-bottom: 10px;
      }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Load d3 -->
    <script src="http://d3js.org/d3.v2.min.js"></script>

    <!-- Mouse-over tooltip -->
    <script src="/static/tooltip/tooltip.js"></script>
    <link href="/static/tooltip/tooltip.css" rel="stylesheet" />

    <!-- Stats table. -->
    <script src='https://www.google.com/jsapi'></script>
    <script>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'ncalls');
        data.addColumn('number', 'tottime');
        data.addColumn('number', 'percall');
        data.addColumn('number', 'cumtime');
        data.addColumn('number', 'percall');
        data.addColumn('string', 'filename:lineno(function)')
        data.addRows([
          {% for row in stats_rows -%}
            [{v: {{row.calls_value}}, f: "{{row.calls_str}}"},
             {v: {{row.tottime}}, f: "{{row.tottime_str}}"},
             {v: {{row.tottime_percall}}, f: "{{row.tottime_percall_str}}"},
             {v: {{row.cumtime}}, f: "{{row.cumtime_str}}"},
             {v: {{row.cumtime_percall}}, f: "{{row.cumtime_percall_str}}"},
             "{{row.file_line_func|safe}}"],
          {%- endfor %}
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {sortColumn: 3, sortAscending: false});
      }
    </script>

    <!-- Global variable with the profile name. -->
    <script>
      var profile_json_path = '{{json_path}}';
    </script>
  </head>

  <body>
    <!-- Navbar -->
    <div class="navbar navbar-static-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">SnakeViz</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="dropdown" id="vizmenu">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#vizmenu">
                  Viz Type
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Sunburst</a></li>
                </ul>
              <li><a href="{{json_path}}">JSON</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <!-- Everything else -->
    <div class="container">
      <div class="gallery" id="chart">
        <button class="btn" id="resetbutton" disabled="True"
                style="position: absolute; top: 60px;">
                <em class="icon-refresh"></em> Reset
        </button>
      </div>
      <script src='/static/viz/sunburst.js'> </script>
      <script src='/static/loading.js'> </script>
      <br>
      <div id="table_div"></div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
