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

{% block title %}Rowsandall Virtual Challenges{% 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 challenge name or on the Details button to see the challenge
    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 %}
