{% load i18n dg_board %}
<div class="tk-lanes{% if not group %} tk-lanes-overview{% endif %}">
  {% for lane in lanes %}
    <section class="tk-lane" data-lane="{% if lane.column %}{{ lane.column.pk }}{% else %}{{ lane.category }}{% endif %}">
      <header class="tk-lane-head">
        <i class="bi {{ lane.category|category_icon }} tk-cat-{{ lane.category }}"></i>
        <span class="tk-lane-title">{{ lane.title }}</span>
        <span class="tk-lane-count ticket-lane-count">{{ lane.tickets|length }}</span>
        <button type="button" class="tk-lane-toggle" data-tk-lane-toggle aria-expanded="true"
                data-show="{% blocktranslate with title=lane.title %}Show {{ title }}{% endblocktranslate %}"
                data-collapse="{% blocktranslate with title=lane.title %}Collapse {{ title }}{% endblocktranslate %}"
                title="{% blocktranslate with title=lane.title %}Collapse {{ title }}{% endblocktranslate %}"><i class="bi bi-arrows-collapse-vertical"></i></button>
        {% if lane.column %}<a class="tk-lane-add" href="{% url 'dg_board:ticket_create' %}?column={{ lane.column.pk }}" title="{% blocktranslate with title=lane.title %}New ticket in {{ title }}{% endblocktranslate %}{% if forloop.first %} (c){% endif %}" data-tk-new-ticket><i class="bi bi-plus-lg"></i></a>{% endif %}
      </header>
      <div class="tk-lane-cards"{% if lane.column %} data-column="{{ lane.column.pk }}"{% endif %}>
        {% for ticket in lane.tickets %}{% include 'dg_board/_card.html' %}{% empty %}<div class="tk-lane-empty">{% translate "No tickets" %}</div>{% endfor %}
      </div>
      {# Below the last card, outside the sortable list so a drag never lands behind it. #}
      {% if lane.column %}<div class="tk-lane-append"><a class="tk-insert-end" href="{% url 'dg_board:ticket_create' %}?column={{ lane.column.pk }}" data-quick-create title="{% blocktranslate with title=lane.title %}New ticket at the bottom of {{ title }}{% endblocktranslate %}">+</a></div>{% endif %}
    </section>
  {% endfor %}
</div>
{# Right after the lanes, so a folded lane never shows open first. #}
<script>
  (() => {
    // A lane folds into a narrow strip from the button at its head, and a click on the strip opens it.
    // Folded lanes are remembered in this browser: column ids on a group's board, categories on all groups.
    let collapsed = [];
    try {
      collapsed = JSON.parse(localStorage.getItem('tk-collapsed-lanes')) || [];
    } catch {
      // Storage can be unavailable (private window); every lane then starts open.
    }
    const apply = (lane, isCollapsed) => {
      lane.classList.toggle('tk-collapsed', isCollapsed);
      const toggle = lane.querySelector('[data-tk-lane-toggle]');
      toggle.setAttribute('aria-expanded', !isCollapsed);
      toggle.title = isCollapsed ? toggle.dataset.show : toggle.dataset.collapse;
      toggle.querySelector('i').className = `bi bi-arrows-${isCollapsed ? 'expand' : 'collapse'}-vertical`;
    };
    document.querySelectorAll('.tk-lane').forEach((lane) => {
      apply(lane, collapsed.includes(lane.dataset.lane));
      // A collapsed lane opens wherever it is clicked; an open one only from its button.
      lane.addEventListener('click', (event) => {
        const isCollapsed = lane.classList.contains('tk-collapsed');
        if (!isCollapsed && !event.target.closest('[data-tk-lane-toggle]')) {
          return;
        }
        apply(lane, !isCollapsed);
        collapsed = collapsed.filter((key) => key !== lane.dataset.lane).concat(isCollapsed ? [] : [lane.dataset.lane]);
        try {
          localStorage.setItem('tk-collapsed-lanes', JSON.stringify(collapsed));
        } catch {
          // Not remembered, but the lane still folds.
        }
      });
    });
  })();
</script>