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

{% block title %}Rowsandall Fitness Progress {% endblock %}

{% block main %}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
  $(function() {

  // Get the form fields and hidden div
  var checkbox = $("#id_water");
  var hidden = $("#id_waterboattype");


  // Hide the fields.
  // Use JS to do this in case the user doesn't have JS
  // enabled.

  hidden.hide();


  // Setup an event listener for when the state of the
  // checkbox changes.
  checkbox.change(function() {
    // Check to see if the checkbox is checked.
    // If it is, show the fields and populate the input.
    // If not, hide the fields.
    if (checkbox.is(':checked')) {
  // Show the hidden fields.
  hidden.show();
  } else {
  // Make sure that the hidden fields are indeed
  // hidden.
  hidden.hide();

      // You may also want to clear the value of the
      // hidden fields here. Just in case somebody
      // shows the fields, enters data to them and then
      // unticks the checkbox.
      //
      // This would do the job:
      //
      // $("#hidden_field").val("");
    }
  });
});
</script>

<script src="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.js"></script>
<script async="true" type="text/javascript">
  Bokeh.set_log_level("info");
</script>

{{ chartscript |safe }}

<script>
  // Set things up to resize the plot on a window resize. You can play with
  // the arguments of resize_width_height() to change the plot's behavior.
  var plot_resize_setup = function () {
  var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
  var plot = Bokeh.index[plotid];
  var plotresizer = function() {
  // arguments: use width, use height, maintain aspect ratio
  plot.resize_width_height(true, false, false);
  };
  window.addEventListener('resize', plotresizer);
  plotresizer();
  };
  window.addEventListener('load', plot_resize_setup);
</script>

{% if rower.user %}
<h1>Fitness Progress for {{ rower.user.first_name }} </h1>
{% else %}
<h1>Fitness Progress for {{ user.first_name }} </h1>
{% endif %}

<p>
  This is an experimental page. Using the form below you can set
  a date range to compare a prediction of your form (from TRIMP or rScore values
  representing your workload). The Fitness Time Constant is the
  time constant describing your fitness decline when you stop training. The
  Fatigue Time Constant (shorter than fitness time constant) is the time
  constant describing fatigue decline after a session. You have to select
  a test duration that represents your fitness goal and is a duration for which
  you regularly do maximal or submaximal efforts during your regular rowing workouts.
</p>


<ul class="main-content">
  <li class="grid_2">
    <form enctype="multipart/form-data" action="/rowers/fitness-fit/user/{{ rower.user.id }}/" method="post">
      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <input name='daterange' class="button green" type="submit" value="Submit">
    </form>

  </li>
  <li class="grid_4">
    {{ the_div|safe }}
  </li>
</ul>



{% endblock %}

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