{% 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 suffix_10">
    <p>
      <a class="button green small" href="/rowers/virtualevent/create">Add Race</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">
  {% include 'racelist.html' %}
</div>

  
  {% endblock %}