<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mint</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!--  NVD3 css -->
    <link href="http://nvd3.org/assets/css/nv.d3.css" type="text/css" rel="stylesheet"/>
    <!-- static sidebar -->
    <link href="{{ url_for('static', filename='css/simple-sidebar.css') }}" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
    <script src="http://nvd3.org/assets/js/nv.d3.js"></script>
    <!-- Simple Ajax content -->
    <script>
    function getCurrentTimeString() {
      var now = new Date();
      return now.toLocaleString();
    }
    function loadVisualization(content) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          var response = JSON.parse(xmlhttp.responseText);
          document.getElementById("visualization_" + content).innerHTML =
              response['result'];
          document.getElementById("visualization_" + content + "_time").innerHTML =
              getCurrentTimeString();
          eval(response['script']);
        }
      }
      document.getElementById("visualization_" + content).innerHTML =
          "Loading...";
      xmlhttp.open("GET", "visualization/" + content, true);
      xmlhttp.send();
    }
    </script>

    <div id="wrapper">
      <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
          <li class="sidebar-brand">
            <h3><span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>&nbspCaffe-Mint</h3>
          </li>
          <li><a href="#page-content-wrapper"><strong>Top</strong></a></li>
          {% for name in names %}
            <li><a href="#visualization_{{name}}_panel"> {{name}} </a></li>
          {% endfor %}
        </ul>
      </div> <!-- /#sidebar-wrapper -->

      <div id="page-content-wrapper">
        <p>
          Visualizing folder: {{ root }}.<br/>
          <a class="btn btn-default" id="menu-toggle">Toggle sidebar</a>
          <a class="btn btn-default" id="menu-toggle" onclick="refreshAll()">Refresh all</a>
        </p>
        <div role="tabpanel">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#visualizations" aria-controls="visualizations" role="tab" data-toggle="tab">Visualizations</a></li>
            <li role="presentation"><a href="#debug" aria-controls="debug" role="tab" data-toggle="tab">Debug</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <p></p>
            <div role="tabpanel" class="tab-pane active" id="visualizations">
              {% for name in names %}
                <div class="panel panel-default" id="visualization_{{name}}_panel">
                  <div class="panel-heading">
                    {{ name }}
                    <a onclick="loadVisualization('{{name}}')">
                      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    </a>
                    <a href="#page-content-wrapper" class="pull-right"> Top </a>
                  </div>
                  <div class="panel-body">
                    <div id="visualization_{{name}}"> Loading... </div>
                    <p> Last updated: <span id="visualization_{{name}}_time">NA</span></p>
                  </div>
                </div>
              {% endfor %}
            </div>
            <div role="tabpanel" class="tab-pane" id="debug">
              <ul>
                {% for message in debug_messages %}
                  <li>{{ message }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>


        <hr>
        <div id="footer">
          <div class="container">
            <p>
              Mint is a minimal Caffe2 visualization tool by
              <a href="http://daggerfs.com/" target="_blank">Yangqing</a>.
            </p>
          </div>
        </div>
      </div> <!-- /#page-content-wrapper -->
    </div><!-- /#wrapper -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
    <!-- load all contents for the first time when this page loads. -->
    <script>
      function refreshAll() {
        {% for name in names %}
          loadVisualization("{{name}}");
        {% endfor %}
      }
      refreshAll();
    </script>
  </body>
</html>