{{/*
    Copyright 2016 The Vanadium Authors. All rights reserved.
    Use of this source code is governed by a BSD-style
    license that can be found in the LICENSE file.
*/}}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Debugging {{.ServerName}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-blue.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        .fixed-width {
            font-family: monospace;
        }

        body header {
            background-color: #00838F !important;
        }

        .mdl-data-table__cell--non-numeric pre {
            margin: 0px;
            white-space: pre-wrap;
        }

        .chart-container {
          position: relative;
          width: 800px;
          height: 400px;
        }

        .area-chart {
          position: absolute;
          display: none;
        }

        .area-chart.selected {
          display: block;
        }

        .duration-selector-container {
          bottom: 8px;
          right: 20px;
          position: absolute;
          display: flex;
          line-height: 20px;
          height: 20px;
        }

        .duration-selector {
          cursor: pointer;
          padding: 0px 4px 0px 4px;
        }

        .duration-selector:not(.selected):hover {
          background-color: #CCC;
        }

        .duration-selector.selected {
          background-color: #00838f;
          color: white;
        }
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      function drawHistoryGraphs(d) {
        // Convert data.
        var data = JSON.parse(d);
        var keys = ['1m', '10m', '1h'];
        keys.forEach(function(k) {
          data[k] = data[k].map(function(ele) {
            return [new Date(parseInt(ele[0] * 1000)), parseInt(ele[1])];
          });
        });
        var defaultDuration = '1h';

        // Create and setup graphs and duration selectors.
        var container = document.currentScript.parentNode;
        google.charts.load("current", {packages:["corechart"]});
        google.charts.setOnLoadCallback(function() {
          // Create container for charts.
          var chartContainer = document.createElement('div');
          chartContainer.className = 'chart-container';
          container.appendChild(chartContainer);

          // Create container for duration selectors.
          var durationSelectorContainer = document.createElement('div');
          durationSelectorContainer.className = 'duration-selector-container';
          container.appendChild(durationSelectorContainer);

          // Create graphs and duration selectors.
          var graphs = {};
          var selectors = {};
          keys.forEach(function(k) {
            // Create graph.
            var graph = document.createElement('div');
            graphs[k] = graph;
            graph.className = 'area-chart';
            if (k === defaultDuration) {
              graph.className += ' selected';
            }
            chartContainer.appendChild(graph);
            var dt = new google.visualization.DataTable();
            dt.addColumn('datetime', '');
            dt.addColumn('number', '');
            dt.addRows(data[k]);
            var options = {
              width: 800,
              height: 400,
              legend: {
                position: 'none'
              },
              series: {
                0: {
                  color: '#00838F'
                }
              },
              vAxis: {
                format: 'short'
              },
              'chartArea': {
                left: 80
              },
              backgroundColor: {fill: 'transparent'},
            };
            var chart = new google.visualization.AreaChart(graph);
            chart.draw(dt, options);

            // Create duration selector for this graph.
            var selector= document.createElement('div');
            selectors[k] = selector;
            selector.className = 'duration-selector';
            if (k === defaultDuration) {
              selector.className += ' selected';
            }
            var selectorText = document.createTextNode(k);
            selector.appendChild(selectorText);
            durationSelectorContainer.appendChild(selector);
          });

          // Add click handler for each selector.
          keys.forEach(function(k) {
            var curKey = k;
            selectors[k].addEventListener('click', function() {
              keys.forEach(function(k) {
                if (k == curKey) {
                  graphs[k].className = 'area-chart selected';
                  selectors[k].className = 'duration-selector selected';
                } else {
                  graphs[k].className = 'area-chart'
                  selectors[k].className = 'duration-selector';
                }
              });
            });
          });
        });
      }
    </script>
</head>

<body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">Debug</span>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
                <!-- Navigation. We hide it in small screens. -->
                <nav class="mdl-navigation mdl-layout--large-screen-only">
                    <a class="mdl-navigation__link" href="name?n={{.ServerName}}">Name</a>
                    <a class="mdl-navigation__link" href="blessings?n={{.ServerName}}">Blessings</a>
                    <a class="mdl-navigation__link" href="stats?n={{.ServerName}}">Stats</a>
                    <a class="mdl-navigation__link" href="logs?n={{.ServerName}}">Logs</a>
                    <a class="mdl-navigation__link" href="glob?n={{.ServerName}}">Glob</a>
                    <a class="mdl-navigation__link" href="profiles?n={{.ServerName}}">Profiles</a>
                    <a class="mdl-navigation__link" href="vtraces?n={{.ServerName}}">Traces</a>
                    <a class="mdl-navigation__link" href="syncbase?n={{.ServerName}}">Syncbase</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="name?n={{.ServerName}}">Name</a>
                <a class="mdl-navigation__link" href="blessings?n={{.ServerName}}">Blessings</a>
                <a class="mdl-navigation__link" href="stats?n={{.ServerName}}">Stats</a>
                <a class="mdl-navigation__link" href="logs?n={{.ServerName}}">Logs</a>
                <a class="mdl-navigation__link" href="glob?n={{.ServerName}}">Glob</a>
                <a class="mdl-navigation__link" href="profiles?n={{.ServerName}}">Profiles</a>
                <a class="mdl-navigation__link" href="vtraces?n={{.ServerName}}">Traces</a>
                <a class="mdl-navigation__link" href="syncbase?n={{.ServerName}}">Syncbase</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <section class="section--center mdl-grid">
                <h5 class="fixed-width">{{.ServerName}}</h5>
            </section>
            {{block "content" .}}Main Content Here{{end}}
            <hr/> {{with .CommandLine}}
            <section class="section--center mdl-grid">
                <h5>CommandLine</h5>
                <div class="mdl-cell mdl-cell--12-col fixed-width">{{.}}</div>
            </section>
            {{end}} {{with printf "%v" .Vtrace}}
            <section class="section--center mdl-grid">
                <h5>Trace</h5>
                <div class="mdl-cell mdl-cell--12-col"><pre>{{.}}</pre></div>
            </section>
            {{end}}
        </main>
    </div>
</body>
</html>