{% extends "todo/base.html" %}
{% load static %}

{% block title %}Todo List: {{ task_list.name }}{% endblock %}

{% block content %}

  {% if list_slug != "mine" %}
    <button class="btn btn-primary" id="AddTaskButton" type="button"
      data-bs-toggle="collapse" data-bs-target="#AddEditTask">Add Task</button>

    {# Task edit / new task form #}
    <div id="AddEditTask" class="collapse">
      {% include 'todo/include/task_edit.html' %}
    </div>
    <hr />
  {% endif %}

  {% if tasks %}
    {% if list_slug == "mine" %}
      <h1>Tasks assigned to me (in all groups)</h1>
    {% else %}
      <h1>{{ view_completed|yesno:"Completed tasks, Tasks" }} in "{{ task_list.name }} ({{ tasks.count }})"</h1>
      <p><small><i>In workgroup "{{ task_list.group }}" - drag rows to set priorities.</i></small></p>
    {% endif %}

      <table class="table" id="tasktable">
        <tr class="nodrop">
          <th>Task</th>
          <th>Created</th>
          <th>Due on</th>
          <th>Owner</th>
          <th>Assigned</th>
          <th>Mark</th>
        </tr>

        {% for task in tasks %}
          <tr id="{{ task.id }}"{% if task.overdue_status %} class="table-danger"{% endif %}>
            <td>
              {% if task.note %}
                {# Native browser tooltip - no JS or Popper dependency, and auto-escaped. #}
                {% with note_preview=task.note|striptags|truncatewords:30 %}
                  <a href="{% url 'todo:task_detail' task.id %}"
                     title="Due {{ task.due_date|date:'m/d/Y'|default:'not set' }} - {{ note_preview }}"
                  >{{ task.title|truncatewords:10 }}⁺</a>
                {% endwith %}
              {% else %}
                <a href="{% url 'todo:task_detail' task.id %}">{{ task.title|truncatewords:10 }}</a>
              {% endif %}
            </td>
            <td>
              {{ task.created_date|date:"m/d/Y" }}
            </td>
            <td>
              {{ task.due_date|date:"m/d/Y" }}
            </td>
            <td>
              {{ task.created_by }}
            </td>
            <td>
              {% if task.assigned_to.all %}{{ task.assigned_to.all|join:", " }}{% else %}Anyone{% endif %}
            </td>
            <td>
              <form method="post" action="{% url "todo:task_toggle_done" task.id %}" role="form">
                {% csrf_token %}
                <button class="btn btn-info btn-sm" type="submit" name="toggle_done">
                  {% if view_completed %}
                    Not Done
                  {% else %}
                    Done
                  {% endif %}
                </button>
              </form>
            </td>
          </tr>
        {% endfor %}
      </table>

      {% include 'todo/include/toggle_delete.html' %}

  {% else %}
    <h4>No tasks on this list yet (add one!)</h4>
    {% include 'todo/include/toggle_delete.html' %}

  {% endif %}

{% endblock %}

{% block extra_js %}
  <script src="{% static 'todo/js/jquery.tablednd_0_5.js' %}" type="text/javascript"></script>

  <script type="text/javascript">
    function order_tasks(data) {
      // The JQuery plugin tableDnD provides a serialize() function which provides the re-ordered
      // data in a list. We pass that list as an object ("data") to a Django view
      // to save new priorities on each task in the list.
      $.post("{% url 'todo:reorder_tasks' %}", data, "json");
      return false;
    };

    $(document).ready(function() {
      // Initialise the task table for drag/drop re-ordering
      $("#tasktable").tableDnD();

      $('#tasktable').tableDnD({
        onDrop: function(table, row) {
          order_tasks($.tableDnD.serialize());
        }
      });

      // When adding a task, change the text of the Add Task button
      document.getElementById('AddTaskButton').addEventListener("click", (e) => {
        console.log(e.target.innerHTML);
        e.target.innerHTML = (e.target.innerHTML == 'Add Task' ? 'Cancel' : 'Add Task');
       });
     });
    
  </script>
{% endblock extra_js %}