{% extends "newbase.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) {
  
  $('#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 main %}

<ul class="main-content">
  <li class="grid_4">
    <p>
      <form id="raceform" enctype="multipart/form-data" method="post">
        {{ form.as_table }}
        {% csrf_token %}
    </p>
    <p>
      <input name='form' class='green button' type='submit' value="Submit">
    </form>
</p>
<li class="grid_4">
  <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>
</li>

  <li class="grid_4" id="racelist">

    {% include 'racelist.html' %}
  </li>

</ul>

{% endblock %}

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