<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Longwave - View Data</title>

    <!-- Bootstrap Core CSS -->
    <link href="/bootstrap_vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="/bootstrap_vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="/bootstrap_vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/bootstrap_vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/regionalDashboard">LongWave Viewer v0.5</a>
          </div>
          <!-- /.navbar-header -->

          <ul class="nav navbar-top-links navbar-right">
              <!-- /.dropdown -->
              <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-user">
                      <li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                      </li>
                  </ul>
                  <!-- /.dropdown-user -->
              </li>
              <!-- /.dropdown -->
          </ul>
          <!-- /.navbar-top-links -->
      </nav>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{{patientName}}</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                          <p>
                            {% if afib_flag %}
                            <h5 style="color:red"><b>FLAGGED FOR AFIB</b></h5>
                            {% endif %}
                            <b>{{readingDate}}</b>
                          </p>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                          <!--
                            <div style="layout:inline-block; float:left; margin-right:20px">
                              <p>Voltage (millivolts)</p>
                            </div>
                          -->
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-line-chart"></div>
                            </div>
                            <div>
                              <p style="margin-left: 375px">Time Elapsed (seconds)</p>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <div class="col-lg-4">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <b>Doctor Feedback</b>
                    </div>
                    <div class="panel-body">
                      {% for comment in comment_list %}
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          {{comment.author}}
                          <div style="float: right; margin-top: -5px">
                            <form action="/removecomment" method="get">
                              <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                              <input type="hidden" value="{{urlsafe}}" name="url_key">
                              <input type="hidden" value="{{comment.author + ":" + comment.text}}" name="comment_text">
                            </form></div>
                        </div>
                        <div class="panel-body">{{comment.text}}</div>
                      </div>
                      {% endfor %}
                      <form method="post" action="/sendFeedback">

                        <div class="form-group">
                          <label for="comment">Provide Feeback:</label>
                          <textarea class="form-control" rows="5" id="comment" name="new_comment"></textarea>
                        </div>
                        <div class="checkbox">
                          <label><input type="checkbox" value="True" name="afib_flag">Atrial Fibrillation</label>
                        </div>

                        <input type="hidden" value="{{urlsafe}}" name="url_key">
                        <button type="submit" class="btn btn-primary">Submit</button>

                      </form>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="/bootstrap_vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/bootstrap_vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/bootstrap_vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Flot Charts JavaScript -->
    <script src="/bootstrap_vendor/flot/excanvas.min.js"></script>
    <script src="/bootstrap_vendor/flot/jquery.flot.js"></script>
    <script src="/bootstrap_vendor/flot/jquery.flot.pie.js"></script>
    <script src="/bootstrap_vendor/flot/jquery.flot.resize.js"></script>
    <script src="/bootstrap_vendor/flot/jquery.flot.time.js"></script>
    <script src="/bootstrap_vendor/flot-tooltip/jquery.flot.tooltip.min.js"></script>
    <script src="/rsrc/flot-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/js/sb-admin-2.js"></script>

    <meta id="sampleData"  data-datapoints="{{sample}}">
    <script>
      var js_var = $('#sampleData').data();
      console.log(js_var["datapoints"])

      //Flot Line Chart
      $(document).ready(function() {
          var offset = 0;
          plot();

          function plot() {
              var voltages = [];
              count = 0;
              for (var i = 0; i < js_var["datapoints"].length; i++) {
                  voltages.push([count, js_var["datapoints"][i]]);
                  count += 0.004
              }

              var options = {
                  series: {
                      lines: {
                          show: true
                      },
                      points: {
                          show: false
                      }
                  },
                  grid: {
                      hoverable: true //IMPORTANT! this is needed for tooltip to work
                  },
                  yaxis: {
                      min: -1.0,
                      max: 1.0
                  },
                  tooltip: true,
                  tooltipOpts: {
                      content: "'%s' of %x.1 is %y.4",
                      shifts: {
                          x: -60,
                          y: 25
                      }
                  }
              };

              var plotObj = $.plot($("#flot-line-chart"),
                    [{
                      data: voltages,
                      label: "mV/t"
                    }],
                  options);
          }
      });
    </script>
</body>
</html>
