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

{% block title %}Rowsandall Histogram {% 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>

{{ interactiveplot |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_10 alpha">
    {% if theuser %}
    <h3>{{ theuser.first_name }}'s Stroke Analysis</h3>
    {% else %}
    <h3>{{ user.first_name }}'s Stroke Analysis</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">
        Change Rower
      </button>
      <div class="dropdown-content">
        {% for member in user|team_members %}
        <a class="button green small" href="/rowers/{{ member.id }}/flexall/{{ xparam }}/{{ yparam1 }}/{{ yparam2 }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d" }}">{{ member.first_name }} {{ member.last_name }}</a>
        {% endfor %}
      </div>
      {% else %}
      &nbsp;
      {% endif %}
    </div>
  </div>
  
  <div class="grid_12 alpha">
    <div id="form" class="grid_6 alpha">
      <p>Warning: Large date ranges may take a long time to load. Huge date ranges may crash your browser.</p>
      <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
        {% csrf_token %}
        <div class="grid_2 alpha">
          <table>
            {{ optionsform.as_table }}
          </table>
        </div>
        <div class="grid_2 suffix_2 omega">
          <input type="hidden" name="options" value="options">
          <input class="grid_1 alpha button green small" value="Submit" type="Submit">
        </div>
      </form>
    </div>
    <div class="grid_6 omega">
      <p>Use this form to select a different date range:</p>
      <p>
        Select start and end date for a date range:
        <div class="grid_4 alpha">
          
          <form enctype="multipart/form-data" action="" method="post">
            
            <table>
              {{ form.as_table }}
            </table>
            {% csrf_token %}
        </div>
        <div class="grid_2 omega">
          <input name='daterange' class="button green" type="submit" value="Submit">	</form>
        </div>
        <div class="grid_4 alpha">
          <form enctype="multipart/form-data" action="" method="post">
	    Or use the last {{ deltaform }} days.
        </div>
        <div class="grid_2 omega">
          {% csrf_token %}
          <input name='datedelta' class="button green" type="submit" value="Submit">
        </form>
        </div>
    </div>
  </div>

  <div id="summary" class="grid_6 suffix_6 alpha">
    
    <p>Summary for {{ theuser.first_name }} {{ theuser.last_name }}
      between {{ startdate|date }} and {{ enddate|date }}</p>
  </div>
</div>

<div id="graph" class="grid_12 alpha">

    {{ the_div|safe }}

</div>

{% endblock %}