{% extends 'dg_core/base.html' %}
{% load i18n static dg_board %}

{% block title %}{% tracker_name %}{% if group %} · {{ group }}{% endif %}{% endblock %}
{% block container_class %}container-fluid{% endblock %}

{% block extra_head %}{% include 'dg_board/_assets.html' %}{% endblock %}

{% block content %}
<div class="py-2" id="ticket-board" data-quick-create-url="{% url 'dg_board:ticket_quick_create' %}">
  {% csrf_token %}
  {# The board's name beside the wordmark, so it is clear which board this is; across all groups, also what differs there. #}
  <h1 class="tk-board-heading">{% include 'dg_board/_logo.html' %}{% if groups %}<span class="tk-board-name">{% if group %}{{ group }}{% else %}{% translate 'All groups' %}{% endif %}</span>{% endif %}</h1>
  {% if groups and not group %}
    <p class="tk-board-note">{% translate 'An overview of every group: its lanes are categories, so cards do not drag and there is no "+". Open a group to do either.' %}</p>
  {% endif %}

  {% if not groups %}
    <p class="tk-muted">{% url 'dg_board:group_create' as create_url %}{% blocktranslate trimmed %}There are no groups yet. <a href="{{ create_url }}">Create the first one</a> to start a board.{% endblocktranslate %}</p>
  {% else %}
    <nav class="tk-tabs">
      {% for g in groups %}<a class="tk-tab{% if g == group %} active{% endif %}" href="?group={{ g.slug }}{% if filter_query %}&{{ filter_query }}{% endif %}">{{ g }}</a>{% endfor %}
      <a class="tk-tab{% if not group %} active{% endif %}" href="?group=all{% if filter_query %}&{{ filter_query }}{% endif %}"><i class="bi bi-grid-3x3-gap"></i> {% translate "All groups" %}</a>
      <a class="tk-tab" href="{% url 'dg_board:group_create' %}"><i class="bi bi-plus-lg"></i> {% translate "New group" %}</a>
      <div class="tk-tabs-actions">
        {# A group's settings belong to its board; across all groups there is no one group to set. #}
        {% if group %}
          <a class="btn btn-outline-secondary btn-sm" href="{% url 'dg_board:group_edit' group.slug %}"><i class="bi bi-gear"></i> {% translate "Group settings" %}</a>
        {% endif %}
        {# Only with django-dg-connect installed: the board does not depend on it. #}
        {% url 'dg_connect:connect' as connect_url %}
        {% if connect_url %}<a class="btn btn-outline-secondary btn-sm" href="{{ connect_url }}" title="{% translate 'Let Claude or another AI agent work on the board as you' %}"><i class="bi bi-plug"></i> {% translate "Connect an agent" %}</a>{% endif %}
      </div>
    </nav>

    <form method="get" class="tk-filters">
      <input type="hidden" name="group" value="{{ group.slug|default:'all' }}">
      <div style="min-width: 14rem">
        <select name="assignee" multiple placeholder="{% translate 'Assignee' %}" data-tk-select data-submit-on-close>
          <option value="me"{% if 'me' in filters.assignees %} selected{% endif %}>Me</option>
          <option value="none"{% if 'none' in filters.assignees %} selected{% endif %}>{% translate "Unassigned" %}</option>
          {% for user in users %}{% with value=user.pk|stringformat:'s' %}<option value="{{ value }}"{% if value in filters.assignees %} selected{% endif %}>{{ user|person }}</option>{% endwith %}{% endfor %}
        </select>
      </div>
      <div style="min-width: 14rem">
        <select name="creator" multiple placeholder="{% translate 'Creator' %}" data-tk-select data-submit-on-close>
          <option value="me"{% if 'me' in filters.creators %} selected{% endif %}>Me</option>
          {% for user in creator_users %}{% with value=user.pk|stringformat:'s' %}<option value="{{ value }}"{% if value in filters.creators %} selected{% endif %}>{{ user|person }}</option>{% endwith %}{% endfor %}
        </select>
      </div>
      <div style="min-width: 12rem">
        <select name="label" multiple placeholder="{% translate 'Label' %}" data-tk-select data-submit-on-close>
          <option value="none"{% if 'none' in filters.labels %} selected{% endif %}>{% translate "No label" %}</option>
          {% for label in labels %}<option value="{{ label.name }}"{% if label.name in filters.labels %} selected{% endif %}>{{ label }}</option>{% endfor %}
        </select>
      </div>
      <div style="min-width: 9rem">
        <select name="show" data-tk-select data-submit-on-close aria-label="{% translate 'Show parents and subtasks' %}" title="{% translate 'Parents and subtasks' %}">
          {% for value, name in show_options %}<option value="{{ value }}"{% if value == filters.show %} selected{% endif %}>{{ name }}</option>{% endfor %}
        </select>
      </div>
      {% if parent %}
        {# One ticket and everything under it, from Open on board on its page or the subtask count on its card. The cross keeps the other filters. #}
        <input type="hidden" name="parent" value="{{ parent.key }}">
        <span class="tk-filter-parent">
          <i class="bi bi-diagram-3"></i>
          <span class="text-truncate">{% translate "Under" %} <a href="{{ parent.get_absolute_url }}">{{ parent.key }}</a> <span class="tk-filter-parent-title">{{ parent.title }}</span></span>
          <a class="tk-icon-button" href="?group={{ group.slug|default:'all' }}{% if unparented_query %}&{{ unparented_query }}{% endif %}" title="{% blocktranslate with key=parent.key %}All tickets, not only {{ key }} and those under it{% endblocktranslate %}"><i class="bi bi-x-lg"></i></a>
        </span>
      {% endif %}
      <div class="input-group input-group-sm" style="width: 16rem">
        <span class="input-group-text"><i class="bi bi-search"></i></span>
        <input type="search" name="q" value="{{ filters.q }}" class="form-control" placeholder="{% translate 'Title or key' %}  ( / )" title="{% translate 'Filters as you type; Enter on a key or a unique word opens that ticket' %}" autocomplete="off">
        {# Enter in the search submits only with a submit button: Tom Select's own text inputs block it otherwise. Its `open` asks for the ticket a key or unique word names. #}
        <button type="submit" name="open" value="1" class="visually-hidden" tabindex="-1">{% translate "Search" %}</button>
      </div>
      {% if is_filtered %}<a class="btn btn-link btn-sm tk-muted" href="?group={{ group.slug|default:'all' }}"><i class="bi bi-x"></i> {% translate "Clear filters" %}</a>{% endif %}    </form>
    {# One assignee picker for every card, placed beside the card's assignee when that is clicked (card_assignee.js). #}
    <div class="tk-assignee-picker" hidden>
      <select data-tk-select aria-label="{% translate 'Assignee' %}">{% include 'dg_board/_assignee_options.html' with users=assignable_users assignee=None %}</select>
    </div>

    {% include 'dg_board/_lanes.html' %}
    <script>
      // Back from a ticket can restore this page as it was left (the back/forward cache), before the
      // edits made on the ticket; load it again instead.
      window.addEventListener('pageshow', (event) => {
        if (event.persisted) {
          window.location.reload();
        }
      });

      // Typing in the search filters the board as it goes: a moment after the last key the board comes back
      // with the search, and its cards and counts go into the lanes shown, so drag and drop and folded lanes
      // stay as they are. The address keeps the search, for a reload or Back from a ticket.
      (() => {
        const form = document.querySelector('.tk-filters');
        let timer;
        let request;
        form.elements.q.addEventListener('input', () => {
          clearTimeout(timer);
          timer = setTimeout(() => {
            request?.abort();
            request = new AbortController();
            const url = `?${new URLSearchParams(new FormData(form))}`;
            // As an XHR it is no page view to the visitor tracking (TRACK_AJAX_REQUESTS), else every pause
            // in typing would be one; the board as loaded and a search sent with Enter still are.
            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, signal: request.signal })
              .then(async (response) => {
                // Anything but the board, such as an error or the sign-in page, opens as the page it is.
                if (!response.ok || response.redirected) {
                  window.location.assign(response.url);
                  return;
                }
                const page = new DOMParser().parseFromString(await response.text(), 'text/html');
                page.querySelectorAll('.tk-lane').forEach((lane) => {
                  const shown = document.querySelector(`.tk-lane[data-lane="${lane.dataset.lane}"]`);
                  shown.querySelector('.tk-lane-cards').replaceChildren(...lane.querySelector('.tk-lane-cards').childNodes);
                  shown.querySelector('.tk-lane-count').textContent = lane.querySelector('.tk-lane-count').textContent;
                });
                // The group tabs carry the search to another group.
                document.querySelector('.tk-tabs').replaceWith(page.querySelector('.tk-tabs'));
                history.replaceState(null, '', url);
              })
              .catch((error) => {
                // A newer search took over.
                if (error.name !== 'AbortError') {
                  throw error;
                }
              });
          }, 120);
        });
      })();
    </script>
  {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
{% if groups %}<script src="{% static 'dg_board/card_assignee.js' %}"></script>{% endif %}
{% if group %}
<script src="{% static 'dg_board/vendor/sortablejs/Sortable.min.js' %}"></script>
<script src="{% static 'dg_board/board.js' %}"></script>
{% endif %}
{% endblock %}