{% extends "base.html" %}

{% block content %}
<h2>My Task Lists</h2>

<!-- Button to add a new list -->
<p class="btn-dash"><a href="{{ url_for('main.create_list') }}" class="btn-dash-primary">+ New Task List</a></p>

<!-- Button to add a new task -->
<p class="btn-dash"><a href="{{ url_for('main.add_task') }}" class="btn-dash-primary">+ New Task</a></p>

{% if task_lists %}
  <div class="task-lists" style="display: flex; gap: 20px; flex-wrap: wrap;">
    {% for task_list in task_lists %}
      <div class="task-list" 
           ondrop="drop(event, {{ task_list.id }})" 
           ondragover="allowDrop(event)" 
           style="border: 1px solid #ccc; padding: 10px; width: 300px; min-height: 150px;">
        <h3>{{ task_list.name }}</h3>
        
        {% if task_list.tasks %}
          <ul id="list-{{ task_list.id }}" style="list-style-type: none; padding: 0;">
            {% for task in task_list.tasks %}
              <li class="task-list-item" id="task-{{ task.id }}" 
                  draggable="true" 
                  ondragstart="drag(event)" >
                {{ task.content }} - {{ '✅' if task.completed else '❌' }}
                [<a class="task-list-a" href="{{ url_for('main.complete', task_id=task.id) }}">Toggle</a>]
                [<a class="task-list-a" href="{{ url_for('main.delete', task_id=task.id) }}">Delete</a>]
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p><em>No tasks in this list yet.</em></p>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% else %}
  <p>You don't have any task lists yet.</p>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  function drop(ev, targetListId) {
    ev.preventDefault();
    const taskId = ev.dataTransfer.getData("text").split('-')[1];

    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    fetch("/move_task", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": csrfToken
      },
      body: JSON.stringify({ task_id: taskId, target_list_id: targetListId })
    }).then(res => {
      if (res.ok) {
        location.reload();
      } else {
        alert("Failed to move task.");
      }
    });
  }
</script>
{% endblock %}