{% extends "newbase.html" %}
{% load static %}
{% load rowerfilters %}

{% block title %}Rowsandall Training Zones{% endblock %}


{% block main %}
<script src="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-3.1.1.min.js"></script>
<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>
<div id="id_js_res">
  <script src="https://d3js.org/d3.v7.min.js"></script>
</div>

<h1>Training Zones</h1>

<div id="id_script">
</div>

<ul class="main-content">
  <li class="grid_4">
    <div id="id_chart">
      {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_4">
    <p>
    <form method="post">
      {% csrf_token %}
      <table>
        {{ form.as_table }}
      </table>
      <input class="button" type="submit" value="Submit">
    </form>
    </p>
  </li>
</ul>



{% endblock %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>

<script>
$(function($) {
  console.log('loading script for chart');
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/trainingzones/user/{{ rower.user.id }}/data/?startdate={{ startdate|date:"Y-m-d" }}&enddate={{ enddate|date:"Y-m-d" }}&zones={{ zones }}&dates={{ dates }}&yaxis={{ yaxis }}', function(json) {
    var script = json.script;
    var div = json.div;
    $("#id_sitready").remove();
    $("#id_chart").append(div);
    $("#id_script").append(script);
  })
});
  </script>
{% endblock %}

{% block sidebar %}
{% include 'menu_analytics.html' %}
{% endblock %}