{% extends 'events/base.html' %}
{% load uni_form %}

{% block extra_head %}
 <link type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" rel="stylesheet" />
 <link type="text/css" href="{{MEDIA_URL}}css/ui.timepickr.css" rel="stylesheet" />
{% endblock %}


{% block body %}
    <form class="uniForm" id="create-event" method="POST" enctype="multipart/form-data" 
            action="{% url events_change id=id %}">
        <fieldset class="inlineLabels">

	    {{form|as_uni_form}}

           <div class="form_block">
                <input type="hidden" name="action" value="upload" />
                <input type="submit" value="Submit" />
            </div>
        </fieldset>
    </form>
{% endblock %}

{% block extra_body %}
{#{{form.media}}#}
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/jquery-ui.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/ui.datepicker.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/jquery.utils.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/jquery.strings.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/ui.dropslide.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/ui.timepickr.js"></script>

  <style>
    div.ui-datepicker {z-index:10000000;}
  </style>
  
  <script type="text/javascript">
  $(document).ready(function(){
    var datepicker = $("input#id_start_0, input#id_end_0").datepicker({});

    var timepicker = $('input#id_start_1, input#id_end_1').timepickr({
        handle: '#trigger-test',
        convention: 24
    });
    /*
    $('form#create-event').submit(function() {
	$('input#id_start_1, input#id_end_1').val($('input#id_start_1, input#id_end_1').val()+':00');
    });
    */
  });
  </script>

{% endblock %}