{% extends "base.html" %}
{% load staticfiles %}
{% load static %}
{% load i18n %}

{% block content %}
    <link rel="stylesheet" href="{% static "schedule/css/schedule.css" %}" type="text/css" media="screen" />
    <link rel="stylesheet" href="{% static "schedule/css/jquery-ui.css" %}" type="text/css" media="screen" />
    <script type="text/javascript" src="{% static "schedule/js/jquery.js" %}"></script>
    <script type="text/javascript" src="{% static "schedule/js/jquery-ui.js" %}"></script>
    <script type="text/javascript" src="{% static "schedule/js/jquery.timePicker.js" %}"></script>
    <script type="text/javascript">
    $(function() {
        $("#id_start_0").datepicker({dateFormat: $.datepicker.ATOM});
        $("#id_end_0").datepicker({dateFormat: $.datepicker.ATOM});
        $("#id_start_1").timePicker();
        $("#id_end_1").timePicker();
        $("#id_end_recurring_period").datepicker({dateFormat: $.datepicker.ATOM});
        var oldTime = $.timePicker("#id_start_1").getTime();
        $("#id_start_1").change(function() {
          if ($("#id_end_1").val()) { // Only update when second input has a value.
          // Calculate duration.
          var duration = ($.timePicker("#id_end_1").getTime() - oldTime);
          var time = $.timePicker("#id_start_1").getTime();
          // Calculate and update the time in the second input.
          $.timePicker("#id_end_1").setTime(new Date(new Date(time.getTime() + duration)));
          oldTime = time;
          }
        });
        // Validate.
        // TODO this should validate date AND time
        $("#id_end_1").change(function() {
          if($.timePicker("#id_start_1").getTime() > $.timePicker(this).getTime()) {
          $(this).addClass("error");
          }
          else {
          $(this).removeClass("error");
          }
        });
    });
    </script>
<b>{% trans "Create or change event. All fields are required." %}</b>
<br/><br/>
 <form class="form-horizontal" action="" method="post">
     {% csrf_token %}
     <div class="form-group form-inline">
         <label for="id_start_0" class="col-sm-2 control-label">Start:</label>
         <div class="col-sm-10">
            <input id="id_start_0" name="start_0" type="text" class="datepicker form-control" value="{% if data.start_ymd %} {{data.start_ymd}}{% endif %}">
            <input id="id_start_1" name="start_1" type="text" class="datepicker form-control" value="{% if data.start_hour %} {{data.start_hour}}{% endif %}">
        </div>
     </div>
     <div class="form-group form-inline">
          <label for="id_end_0" class="col-sm-2 control-label">End:</label>
          <div class="col-sm-10"> 
            <input id="id_end_0" class="form-control" name="end_0" type="text" value="{% if data.end_ymd %} {{data.end_ymd}}{% endif %}">
            <input id="id_end_1" class="form-control" name="end_1" type="text" value="{% if data.end_hour %} {{data.end_hour}}{% endif %}">
            <span class="helptext">The end time must be later than start time.</span></td>
          </div>
    </div>
    <div class="form-group form-inline">
        <label for="id_title" class="col-sm-2 control-label">On call</label>
        <div class="col-sm-10"> 
            <select name="oncall" class="form-control">
            {% for user in users %}
                <option value="{{user.username}}" {% if data.oncall == user.username %} {{"selected"}}{% endif %}>{{user.username}}</option>
            {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group form-inline">
        <label for="fallback" class="col-sm-2 control-label">Fallback</label>
        <div class="col-sm-10"> 
            <select name="fallback" class="form-control">
            {% for user in users %}
                <option value="{{user.username}}" {% if data.fallback == user.username %} {{"selected"}}{% endif %}>{{user.username}}</option>
            {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group form-inline">
        <label for="rule" class="col-sm-2 control-label">Recurring</label>
        <div class="col-sm-10">
            <select name="rule" class="form-control">
            {% for id, name in form.rule.field.choices %}
                <option value="{{ id }}" {% if data.rule == id %} {{"selected"}}{% endif %}>{{ name }}</option>
            {% endfor %}
            </select>
        </div>
    </div>
     <div class="form-group form-inline">
         <label for="id_start_0" class="col-sm-2 control-label">End recurring</label>
         <div class="col-sm-10">
            <input id="id_end_recurring_period" name="end_recurring_period" type="text"
            class="datepicker form-control" value="{% if data.recurr_ymd %} {{data.recurr_ymd}}{% endif %}">
        </div>
     </div>
    <div class="form-group form-inline">
        <label for="id_description" class="col-sm-2 control-label">Description</label>
        <div class="col-sm-10">
            <textarea class="form-control" cols="40" id="id_description" name="description" rows="5">
                {% if data.description %} {{data.description}}{% endif %}
            </textarea>
        </div>
    </div>
  <br/>
  <input type="submit" class="btn btn-success" value="{% trans "Save" %}">
  <input type="button" class="btn btn-danger" value="{% trans "Cancel" %}" onclick="window.location='/schedules/view/{{ calendar.slug }}'"/>
  <input type="hidden" name="next" value="{{next|default:""}}"/>
</form>
{% endblock %}