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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/static/snakeviz.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="/static/vendor/jquery.dataTables.min.css" rel="stylesheet">
  </head>

  <body>
    <h1 id="snakeviz-text">
      <a href="https://jiffyclub.github.io/snakeviz/">SnakeViz</a>
    </h1>

    <!-- Entries table -->
    <div class="dir-listing">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="pstats-table">
      </table>
    </div>

    <!-- footer -->
    <footer class="sv-footer">
      <a class="footer-link" href="https://jiffyclub.github.io/snakeviz/">SnakeViz Docs</a>
    </footer>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- Vendor JS -->
    <script src="/static/vendor/jquery-3.2.1.min.js"></script>
    <script src="/static/vendor/jquery.dataTables.min.js"></script>

    <!-- SnakeViz JS -->
    <script>
      // Make the stats table
      var dir_entries = {% raw dir_entries %};
      $(document).ready(function() {
        $('#pstats-table').dataTable({
          'data': dir_entries,
          'columns': [
            {'title': 'filename',
             'render': function(data, type, row, meta){
                 if(type === "display") {
                    data = '<a href="' + data[1] + '">' + data[0] + '</a>';
                 }
                 return data;
             }}
          ],
          'order': [0, 'asc'],
          'paging': false
        });
      });
    </script>

  </body>
</html>
