<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Board • Tasks</title>
    <link rel="stylesheet" href="/bootstrap-icons/font/bootstrap-icons.css" />

    <link rel="stylesheet" href="/css/board.css" />
  </head>

  <body>
    <div class="topbar">
      <div class="title">Your Board</div>
      <div class="user">
        Logged in as <strong><%= session.user.username %></strong>
        <a class="logout" href="/logout">Logout</a>
      </div>
    </div>

    <div class="board">
      <% lists.forEach(list => { %>
      <div class="column" data-list-id="<%= list.id %>">
        <div class="column-header">
          <!-- draggable disabled for now -->
          <h2 class="column-title"><%= list.title %></h2>

          <button class="column-delete" data-list-id="<%= list.id %>">
            <i class="bi bi-trash"></i>
          </button>
        </div>

        <div class="task-list" data-list-id="<%= list.id %>">
          <% tasks .filter(task => task.list_id === list.id) .forEach(task => {
          %>

          <div
            class="task"
            draggable="true"
            data-task-id="<%= task.id %>"
            data-list-id="<%= task.list_id %>"
          >
            <div class="task-title"><%= task.title %></div>

            <% if (task.unread_count > 0) { %>
            <div class="task-notification"></div>
            <% } %>

            <div class="priority-dot priority-<%= task.priority %>"></div>
          </div>

          <% }) %>
        </div>

        <div class="add-task" data-list-id="<%= list.id %>">+ Add Task</div>
      </div>
      <% }) %>

      <div id="add-list" class="add-list-button">+ Add List</div>
    </div>

    <div id="task-modal" class="modal hidden">
      <div class="modal-content">
        <div class="modal-left">
          <div class="modal-title-row">
            <h2>Edit Task</h2>
            <i id="modal-saved" class="bi bi-floppy saved-indicator"></i>
          </div>

          <label>Title</label>
          <input id="modal-title" type="text" />

          <label>Description</label>
          <textarea id="modal-description"></textarea>

          <label>Priority</label>
          <select id="modal-priority">
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
          </select>

          <button id="modal-save">Save</button>

          <div class="modal-footer-row">
            <button id="modal-delete" class="danger-btn">
              <i class="bi bi-trash"></i> Delete
            </button>

            <button id="modal-close">Close</button>
          </div>
        </div>

        <div class="modal-right">
          <h3>Comments</h3>
          <div id="modal-comments" class="comment-thread"></div>

          <textarea
            id="modal-new-comment"
            placeholder="Add a comment..."
          ></textarea>
          <button id="modal-add-comment">Add Comment</button>
        </div>
      </div>
    </div>
    <div id="list-modal" class="modal hidden">
      <div class="modal-content small-modal">
        <h2>New List</h2>

        <label>List Title</label>
        <input id="list-title" type="text" />

        <button id="list-save">Create</button>
        <button id="list-close">Cancel</button>
      </div>
    </div>
    <div id="new-task-modal" class="modal hidden">
      <div class="modal-content small-modal">
        <h2>New Task</h2>

        <label>Title</label>
        <input id="new-task-title" type="text" />

        <button id="new-task-save">Create</button>
        <button id="new-task-close">Cancel</button>
      </div>
    </div>
    <script src="/js/board.js"></script>
  </body>
</html>
