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

{% block title %}Workouts{% endblock %}

{% block main %}
<script>
  function toggle(source) {
  checkboxes = document.querySelectorAll("input[name='workouts']");
  for(var i=0, n=checkboxes.length;i<n;i++) {
       checkboxes[i].checked = source.checked;
  }
 }
</script>
<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();
  var otwtypes = ['water','coastal','c-boat','churchboat']
    if (otwtypes.includes(Value)) {
  // 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>



<ul class="main-content">
  <li class="grid_4">
    <p>Select the workout you want to add a video to</p>
  </li>
  <li class="grid_2 maxheight">
    <form id="searchform" action=""
          method="get" accept-charset="utf-8">
      {{ searchform }}
      <input type="submit" value="GO"></input>
    </form>
    <form enctype="multipart/form-data" action="" method="post">

      {% if workouts %}

      <table width="100%" class="listtable">
	{{ form.as_table }}
      </table>
      {% else %}
      <p> No workouts found </p>
      {% endif %}
  </li>
  <li class="grid_2">
    <form enctype="multipart/form-data" method="post">
      <table>
        {{ dateform.as_table }}
      </table>
      {% csrf_token %}
      <input name='optionsform' type="submit" value="Submit">
			<input name='workoutform' type='submit' value="Create Video">
    </form>
  </li>
</ul>


{% endblock %}

{% block scripts %}
{% if request.method == 'POST' %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>

{% endif %}

{% endblock %}

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