{% 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();
        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 action="" method="post">
 {% csrf_token %}
     <table>
       <tbody>
          <tr>
             <th><label for="id_start_0">start:</label></th>
             <td><input id="id_start_0" name="start_0" type="text" class="datepicker" value="{% if data.start_ymd %} {{data.start_ymd}}{% endif %}">
                 <input id="id_start_1" name="start_1" type="text" class="datepicker" value="{% if data.start_hour %} {{data.start_hour}}{% endif %}"></td>
          </tr>
          <tr>
             <th><label for="id_end_0">end:</label></th>
             <td><input id="id_end_0" name="end_0" type="text" value="{% if data.end_ymd %} {{data.end_ymd}}{% endif %}">
                 <input id="id_end_1" name="end_1" type="text" value="{% if data.end_hour %} {{data.end_hour}}{% endif %}"><br>
                 <span class="helptext">The end time must be later than start time.</span></td>
          </tr>
          <tr>
             <th><label for="id_title">On call</label></th>
          <td>
               <select name="oncall">
                {% for user in users %}
                 <option value="{{user.username}}" {% if data.oncall == user.username %} {{"selected"}}{% endif %}>{{user.username}}</option>
                 {% endfor %}
                 </select>
          </td>
          </tr>
             <tr>
             <th><label for="fallback">Fallback</label></th>
          <td>
               <select name="fallback">
                {% for user in users %}
                 <option value="{{user.username}}" {% if data.fallback == user.username %} {{"selected"}}{% endif %}>{{user.username}}</option>
                 {% endfor %}
                 </select>
          </td>

          </tr>
          <tr>
             <th><label for="id_description">Description:</label></th>
             <td><textarea cols="40" id="id_description" name="description" rows="10">{% if data.description %} {{data.description}}{% endif %}</textarea></td>
          </tr>
       </tbody>
    </table>
  <br/>
  <input type="submit" value="{% trans "Save" %}">
  <input type="button" value="{% trans "Cancel" %}" onclick="window.location='/schedules/view/{{ calendar.id }}'"/>
  <input type="hidden" name="next" value="{{next|default:""}}"/>
</form>
{% endblock %}