{% extends base_template %}
{% load i18n %}

{% block extrascripts %}
  {{ block.super }}
  {{ form.media }}
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  {% if object.id %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page">{{object}}</a>
    </li>
  {% else %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page">{% trans "New time period exception" %}</a>
    </li>
  {% endif %}
{% endblock %}

{% block appbar %}
  {% if object.id %}
    <h2>{% trans "Edit time period exception" %}</h2>
    <span class="actions">
      <a rel="popup" href="{% url 'chrono-manager-time-period-exception-delete' pk=object.id %}">{% trans 'Delete' %}</a>
    </span>
  {% else %}
    <h2>{% trans "New time period exception" %}</h2>
  {% endif %}
{% endblock %}

{% block content %}

  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.non_field_errors }}
    {% for field in form.visible_fields %}
      {{ field.errors }}
      <p>{{ field.label_tag }} {{ field }}{% if field.name == 'start_datetime' %} <button type="button" id="allday">{% trans "All day" %}</button>{% endif%}</p>
    {% endfor %}
    {% for hidden in form.hidden_fields %}
      {{ hidden }}
    {% endfor %}
    <div class="buttons">
      <button class="submit-button">{% trans "Save" %}</button>
      <a class="cancel" href="{{ view.get_success_url }}">{% trans 'Cancel' %}</a>
    </div>

    <script>
      {% if not object.id %}
        $('[name="start_datetime_0"]').on('change', function() {
          var $end_datetime = $('[name="end_datetime_0"]');
          if (! $end_datetime.val()) {
            var value = $(this).val();
            if (value && new Date(value).getFullYear() > 999) {
              $end_datetime.val($(this).val());
            }
          }
        });
      {% endif %}
      $('button#allday').on('click', function() {
        var $start_datetime = $('[name="start_datetime_0"]');
        if ($start_datetime.val()) {
          var new_date = new Date($start_datetime.val());
          new_date.setDate(new_date.getDate() + 1);
          $('[name="start_datetime_1"]').val('00:00');
          $('[name="end_datetime_0"]').val(new_date.toISOString().substring(0, 10));
          $('[name="end_datetime_1"]').val('00:00');
        }
      });
    </script>
  </form>
{% endblock %}

{% block sidebar %}
{% endblock %}