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

{% block title %}View Comparison {% endblock %}

{% block main %}

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

<div id="id_script">

</div>



<h1>Trend Flex Chart</h1>

<ul class="main-content">
  <li class="grid_4">

    <div id="id_chart" class="flexplot">
      {{ the_div|safe }}
    </div>
  </li>
  <li class="grid_2">
    <form enctype="multipart/form-data" action="/rowers/user-multiflex/user/{{ userid }}/" method="post">
      {% csrf_token %}
      <table>
        {{ chartform.as_table }}
      </table>
      <p>
        <input name='workoutselectform' class="button green" type="submit" value="Submit">
      </p>
    </form>
  </li>
  <li class="grid_2">
    <p>
      You can use the form to change the metric or filter the data.
      Set Min SPM and Max SPM to select only strokes in a certain range of
      stroke rates.
      Set Work per Stroke to a minimum value to remove "paddle" strokes or turns.
    </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');
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/user-multiflex-data', function(json) {
  var counter=0;
  var script = json.script;
  var div = json.div;
  $("#id_sitready").remove();
  $("#id_chart").append(div);
  console.log(div);
  $("#id_script").append("<script>"+script+"</s"+"cript>");

  });
  });
</script>

{% endblock %}

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