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

{% block title %}File loading{% endblock %}

{% block meta %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script type='text/javascript'
        src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js'>
</script>
<script>
  $(document).ready(function() {
  $('#id_file').on('change', function(evt) {
  var f = this.files[0];
  console.log(f);
  if (f.size > 4194304) {
  alert("File Size must be smaller than 4 MB");
  this.value = null;
  }
  if (f.size > 1048576) {
  $('#id_offline').val('True');
  console.log("Set offline to True");
  $('#extra_message').text('Because of the large size, the file will be processed offline. You will receive email when it is done. The extra actions will not be performed.');
  $('#extra_message').addClass('message');      
  }
  });
  });
</script>
{% endblock %}

{% block main %}
<ul class="main-content">
  <li class="grid_2">
    <h1>Upload Workout File</h1>
    <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
      {% if form.errors %}
      <p style="color: red;">
        Please correct the error{{ form.errors|pluralize }} below.
      </p>
      {% endif %}

      <table>
        {{ rowerform.as_table }}
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <div id="formbutton" class="grid_1 prefix_4 suffix_1">
        <input class="button green" type="submit" value="Submit">
  </li>
  <li class="grid_2">
    <h1>Optional extra actions</h1>
    <p>
      <table>
	{{ optionsform.as_table }}
      </table>
    </p>
    <p>
      You can select one static plot to be generated immediately for this workout. You can select to upload to Concept2 automatically. If you check "make private", this workout will not be visible to your followers and will not show up in your teams' workouts list.
    </p>
    
  </li>
</ul>



</form>
{% endblock %}

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

{% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $( document ).ready(function() {
      var boattypes = {
	  '1x': '1x (single)',
	  '2x': '2x (double)',
	  '2x+': '2x+ (coxed double)',
	  '2-': '2- (pair)',
	  '2+': '2+ (coxed pair)',
	  '3x+': '3x+ (coxed triple)',
	  '3x-': '3x- (triple)',
	  '4x': '4x (quad)',
	  '4x+': '4x+ (coxed quad)',
	  '4-': '4- (four)',
	  '4+': '4+ (coxed four)',
	  '8+': '8+ (eight)',
	  '8x+': '8x+ (octuple scull)',
      }
      
      var ergtypes = {
	  'static': 'Concept2 static',
	  'dynamic': 'Concept2 dynamic',
	  'slides': 'Concept2 slides',
	  'rp3': 'RP3',
	  'waterrower': 'Water Rower',
	  'other': 'Other Indoor Rower',	  
      }

      $('#id_workouttype').on('change', function(){
          if (
              $(this).val() == 'water'
		  || $(this).val() == 'coastal'
		  || $(this).val() == 'c-boat'
		  || $(this).val() == 'churchboat'
          ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(boattypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);
	      
          }
	  else if (
	      $(this).val() == 'rower'
	  ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(ergtypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);	    
	  }
	  else {
              $('#id_boattype').toggle(false);
              $('#id_boattype').val('1x');
	  }
	  if (
              $(this).val() == 'rower'
		  || $(this).val() == 'dynamic'
		  || $(this).val() == 'slides'
	  ) {
              $('#id_dragfactor').toggle(true);
	  } else {
              $('#id_dragfactor').toggle(false);
              $('#id_dragfactor').val('0');
	  }
	  
      });
      $('#id_workouttype').change();
  });
  </script>
{% endblock %}