{% extends "turkle/task_base.html" %}
{% load static %}

{% block js %}
  {{ block.super }}
  <script type="text/javascript" src="{% static 'turkle/jquery-3.3.1.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'turkle/jquery.countdown-2.2.0.js' %}"></script>
  <script>
  $(function () {
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();

    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);
        }
      }
    });

    $('#update_auto_accept').change(function() {
      $.post("{% url 'update_auto_accept' %}", {'auto_accept': this.checked});
    });

    var expirationTime = new Date('{{ task_assignment.expires_at|date:'c' }}');
    $("#expiration-timer").countdown(expirationTime)
                          .on('update.countdown', function(event) {
                            var format = '%I:%M';
                            // if 3 full days left or more, display as days rather than hours:mins
                            if (event.offset.totalDays > 2) {
                              format = "%-D day%!D";
                            }
                            $(this).text(event.strftime('Expires in ' + format));
                          })
                          .on('finish.countdown', function(event) {
                            // "Gray out" background of iFrame
                            $('#iframe_container').css('background', '#000');
                            $('#task_assignment_iframe').css('background', '#fff')
                                                       .css('opacity', '0.8');
                            $('#messages_container').append(
                              $('<div>').addClass('alert alert-error').attr('role', 'alert')
                                        .text('Task Assignment has expired'));
                          });

    $('#task_assignment_iframe').focus();
  });
  </script>
{% endblock %}

{% block body %}
<div class="container-fluid content">
  <iframe src="{% url 'task_assignment_iframe' task.id task_assignment.id %}{{ http_get_params }}"
            id="task_assignment_iframe">
  </iframe>
</div>
{% endblock %}

{% block subheader_right %}
<span>
  <input type="checkbox" id="update_auto_accept"
         {% if auto_accept_status %} checked="checked" {% endif %} >
  <label class="form-check-label" for="update_auto_accept">Auto-accept next Task</label>
</span>

<div class="inline-form-buttons">
  <form method="post" action="{% url 'return_task_assignment' task.id task_assignment.id %}">
    {% csrf_token %}
    <input type="submit" id="returnButton" class="btn btn-sm btn-danger" value="Return Task" />
  </form>

  <form method="post" action="{% url 'skip_and_accept_next_task' task.batch_id task.id task_assignment.id %}">
    {% csrf_token %}
    <input type="submit" id="skipButton" class="btn btn-sm btn-danger" value="Skip Task" />
  </form>
</div>

<span class="pl-3">
  <span id="expiration-timer" class="small"></span>
</span>
{% endblock %}
