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

{% block title %}Rowsandall {% 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 modality = $("#id_modality");
  var hidden = $("#id_waterboattype");

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

  hidden.hide();
  
  if (modality.val() == 'water') {
  hidden.show();
  }

  
  // Setup an event listener for when the state of the 
  // checkbox changes.
  modality.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.
    var Value = modality.val();
    if (Value=='water') {
  // 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>

<div id="id_css_res">
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-3.1.1.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-3.1.1.min.css" type="text/css" />
</div>
<div id="id_js_res">
  <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>

</div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


<div id="id_script">

</div>

<ul class="main-content">

  <li class="grid_4">
    <p>Summary for {{ theuser.first_name }} {{ theuser.last_name }}
      between {{ startdate|date }} and {{ enddate|date }}</p>
  </li>

  <li class="grid_4">
    <div id="id_chart">

      {{ the_div|safe }}
    </div>
  </li>
  <li>
    <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
      <table>
        {{ optionsform.as_table }}
      </table>
      <input type="hidden" name="options" value="options">
  </li>
  <li>
    <table>
      {{ form.as_table }}
    </table>
  </li>
  <li>
    <table>
      {{ flexaxesform.as_table }}
    </table>
  </li>
  <li>
    {% csrf_token %}
    <input class="button green small" value="Submit" type="Submit">
  </form>
  </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/flexalldata/', function(json) {
  console.log('got script');
  var counter=0;
  var script = json.script;
  var div = json.div;
  console.log('set vars');
  $("#id_sitready").remove();
  console.log('sitready removed');
  $("#id_chart").append(div);
  console.log('div appended');
  $("#id_script").append("<script>"+script+"</s"+"cript>");
  console.log('script changed');


  });
  });
</script>

{% endblock %}

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