{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

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

{% block content %}
<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 type="text/javascript" src="/static/js/bokeh-0.12.3.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>
<style>
  /* Need this to get the page in "desktop mode"; not having an infinite height.*/
  html, body {height: 100%; margin:5px;}
</style>


<div id="title" class="grid_12 alpha">
  <div class="grid_6 suffix_6 alpha">
    <form enctype="multipart/form-data" method="post">
      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <div class="grid_2 prefix_4 alpha">
        <input name='daterange' class="button green" type="submit" value="Submit">
      </div>
    </form>
  </div>
  <div class="grid_10 alpha">
    {% if therower.user %}
    <h3>{{ therower.user.first_name }} Power Estimates</h3>
    {% else %}
    <h3>{{ user.first_name }} Power Estimates</h3>
    {% endif %}
  </div>
  <div class="grid_2 omega">
    {% if user.is_authenticated and user|is_manager %}
    <div class="grid_2 alpha dropdown">
      <button class="grid_2 alpha button green small dropbtn">
        {{ therower.user.first_name }} {{ therower.user.last_name }}
      </button>
      <div class="dropdown-content">
        {% for member in user|team_members %}
        <a class="button green small"
           href="/rowers/fitness-progress/rower/{{ member.id }}/{{ mode }}">{{ member.first_name }} {{ member.last_name }}</a>
        {% endfor %}
      </div>
      {% else %}
      &nbsp;
    </div>
    {% endif %}
  </div>
  
  
</div>

<div id="graph" class="grid_12 alpha">
  
  {{ the_div|safe }}
  
</div>

{% endblock %}
