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

{% block title %}Rowsandall Virtual Racing{% endblock %}

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

  function submit_form() {
  console.log("form changed");
  var frm = $("#raceform");

  var data = new FormData(frm[0]);
  
  $.ajax({
  url: "/rowers/virtualevents",
  type: "POST",
  contentType: false,
  processData: false,
  data: data,

  success: function(data) {
  console.log("got something back");
  console.log(data)
  
  $('#racelist').html(data)
  }
  
  });
  };
  
  $(document).ready(function() {
  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
  console.log("CSRF token",csrftoken);
  
  function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
  beforeSend: function(xhr, settings) {
  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
  }
  });
  $("#raceform").on('change', function(evt) {
  submit_form();
  });
  });
</script>


{% endblock %}

{% block content %}

<div class="grid_12 alpha">
  <div class="grid_2 alpha">
    <p>
      <a class="button green small" href="/rowers/virtualevent/create">Add Race</a>
      </p>
  </div>
  <div class="grid_2">
    <p>
      <a class="button green small" href="/rowers/list-courses">Courses</a>
    </p>
  </div>
</div>

<div class="grid_12 alpha">
  <form id="raceform" enctype="multipart/form-data" method="post">
    <div class="grid_8 alpha">
    {{ form.as_table }}
    {% csrf_token %}
    </div>
    <div class="grid_2">
      <input name='form' class='button green' type='submit' value="Submit">
    </div>
  </form>
</div>

<div class="grid_12 alpha" id="racelist">
  <p>Click on the event name or on the Details button to see the event
    details (and manage your participation and results). Click on the
    course name to see the course details.
  </p>
  {% include 'racelist.html' %}
</div>

  
  {% endblock %}
