<!doctype html>
<html lang="en">
  <head>
    <title>Experiments record</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/d3.min.js"></script>
  </head>
  <body>
      <div class='container'>
          <div class='row'>
              <h1>Experiments Information</h1>
              <table class='table table-striped table-hover table-bordered'>
                  <thead>
                    <tr class="table-success">
                        <th>Comments</th>
                        <th>Start time</th>
                        <th>Stop time</th>
                        <th>Status</th>
                        <th>Traceback</th>
                        <th>Time lapse</th>
                        <th>Cpu time</th>
                        <th>Result</th>
                    </tr>
                  </thead>
                  <tbody>
                      % if result.get('status', '') == 'Failed':
                      <tr class="table-danger">
                      % elif result.get('status', '') == 'Aborted':
                      <tr class="table-warning">
                      % else:
                      <tr class="table-success">
                      % endif
                          <td>${result.get('comments', '')}</td>
                          <td>${result.get('start_time', '')}</td>
                          <td>${result.get('stop_time', '')}</td>
                          <td>${result.get('status','')}</td>
                          <td>${result.get('traceback', '')}</td>
                          <td>${result.get('lapse_time', '')}</td>
                          <td>${result.get('cpu_time', '')}</td>
                          <td>${result.get('result', '')}</td>
                      </tr>
                  </tbody>
              </table>
          </div>
          <div class="row">
            <h1>Host Information</h1>
            <table class="table table-striped table-hover table-bordered">
              <thead>
                <tr class="table-success">
                  <th>Host Name</th>
                  <th>Operating System</th>
                  <th>CPU</th>
                  <th>GPU</th>
                  <th>Python Version</th>
                  <th>Python Packages</th>
                </tr>
              </thead>
              <tbody>
                <tr class="table-success">
                    <%
                        host = result['host_info']
                    %>
                  <td>${host.get('hostname', '')}</td>
                  <td>${host.get('os', '')}</td>
                  <td>${host.get('cpu','')}</td>
                  <td>${host.get('gpu', '')}</td>
                  <td>${host.get('python_version', '')}</td>
                  <td>${host.get('packages', '')}</td>
                </tr>
              </tbody>
            </table>
        </div>
        <div class="row">
            <h1>Config Options</h1>
            <table class="table table-striped table-hover table-bordered">
                <tbody>
                    % for name in config.keys():
                    <tr class='table-primary'>
                        <td>${name}</td>
                        <td>${config[name]}</td>
                    </tr>
                    % endfor
                </tbody>
            </table>
        </div>
        <div>
            <h1>Curve</h1>
            <div id="plot-selector">
                <label>Plot:</label>
                <div id='value'>
                </div>
                <div>Start epoch:<input type='text' id='start' name='start'></div>
                <div>End epoch:<input type='text' id='end' name='start'></div>
                <div><input type='submit' id='submit' onclick="chooseData()"></div>
            </div>
            <canvas id='chart'></canvas>
        </div>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="../js/jquery-3.2.1.min.js" ></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/Chart.js"></script>
    <script src="../js/script.js"></script>
  </body>
</html>
