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

{% block title %}Rowsandall {% endblock %}

{% block content %}


<div id="id_css_res">
    <link rel="stylesheet" href="/static/css/bokeh-0.12.3.min.css" type="text/css" />
    <link rel="stylesheet" href="/static/css/bokeh-widgets-0.12.3.min.css" type="text/css" />
</div>
<div id="id_js_res">
  <script
    type="text/javascript" src="/static/js/bokeh-0.12.3.min.js">
  </script>
  <script
    type="text/javascript" src="/static/js/bokeh-widgets-0.12.3.min.js">
  </script>
  <script async="true" type="text/javascript">
    Bokeh.set_log_level("info");
  </script>

</div>

<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>


<div id="id_script">

</div>

<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">
    &nbsp;
  </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">
    <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 id="plotbuttons" class="grid_6 alpha">
    <div class="grid_2 alpha dropdown">
      <button class="grid_2 alpha button blue small dropbtn">X-axis</button>
      <div class="dropdown-content">
        {% for key, value in axchoicesbasic.items %}
        {% if key != 'None' %}
        <a class="button blue small alpha" href="/rowers/flexall/{{ key }}/{{ yparam1 }}/{{ yparam2 }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endif %}
        {% endfor %}
	{% if promember %}
        {% for key, value in axchoicespro.items %}
	<a class="button blue small alpha" href="/rowers/flexall/{{ key }}/{{ yparam1 }}/{{ yparam2 }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endfor %}
	{% else %}
        {% for key, value in axchoicespro.items %}
	<a class="button rosy small" href="/rowers/promembership">{{ value }}</a>
        {% endfor %}
	{% endif %}
      </div>
    </div>
		
    <div class="grid_2 dropdown">
      <button class="grid_2 alpha button blue small dropbtn">Left</button>
      <div class="dropdown-content">
        {% for key, value in axchoicesbasic.items %}
        {% if key not in noylist and key != 'None' %}
	<a class="button blue small" href="/rowers/flexall/{{ xparam }}/{{ key }}/{{ yparam2 }}/{{ startdate|date:"Y-m-d"}}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endif %}
        {% endfor %}
	{% if promember %}
        {% for key, value in axchoicespro.items %}
        {% if key not in noylist %}
	<a class="button blue small" href="/rowers/flexall/{{ xparam }}/{{ key }}/{{ yparam2 }}/{{ startdate|date:"Y-m-d"}}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endif %}
        {% endfor %}
	{% else %}
        {% for key, value in axchoicespro.items %}
        {% if key not in noylist %}
	<a class="button rosy small" href="/rowers/promembership">{{ value }} (Pro)</a>
        {% endif %}
        {% endfor %}
	{% endif %}

      </div>
    </div>

    <div class="grid_2 dropdown omega">
      <button class="grid_2 alpha button blue small dropbtn">Right</button>
      <div class="dropdown-content">
        {% for key, value in axchoicesbasic.items %}
        {% if key not in noylist %}
	<a class="button blue small" href="/rowers/flexall/{{ xparam }}/{{ yparam1 }}/{{ key }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endif %}
        {% endfor %}
	{% if promember %}
        {% for key, value in axchoicespro.items %}
        {% if key not in noylist %}
	<a class="button blue small" href="/rowers/flexall/{{ xparam }}/{{ yparam1 }}/{{ key }}/{{ startdate|date:"Y-m-d" }}/{{ enddate|date:"Y-m-d"}}">{{ value }}</a>
        {% endif %}
        {% endfor %}
	{% else %}
        {% for key, value in axchoicespro.items %}
        {% if key not in noylist %}
	<a class="button rosy small" href="/rowers/promembership">{{ value }} (Pro)</a>
        {% endif %}
        {% endfor %}
	{% endif %}


      </div>
    </div>

  </div>








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

    {{ the_div|safe }}
    
</div>

{% 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) {
  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 %}