{% extends "base.html" %}
{% block title %}{{ project.name }} · relaybay{% endblock %}
{% block crumbs %}<span class="crumb-sep">/</span><span class="crumb">{{ project.name }}</span>{% endblock %}
{% block content %}
<main class="board-page" id="live" hx-ext="sse" sse-connect="/events"
      data-last-event-id="{{ last_event_id }}" data-project="{{ project.slug }}">
  <form class="board-tools" method="get" action="/p/{{ project.slug }}" role="search">
    <input class="board-search" type="search" name="q" value="{{ q }}" maxlength="200"
           placeholder="Search key or title" aria-label="Search tasks by key or title">
    <label class="board-archived"><input type="checkbox" name="archived" value="1"{% if archived %} checked{% endif %}> Show archived</label>
    <button type="submit" class="btn">Filter</button>
    {% if q or archived %}<a class="action" href="/p/{{ project.slug }}">Clear</a>{% endif %}
    {#- Pages of the board on wide screens; ←/→ switch them too (app.js). #}
    <span class="board-pager">
      {%- for stages_of_page in board_pages %}
      {%- set n = loop.index %}
      <a class="pager-link{% if n == board_page %} is-active{% endif %}" href="/p/{{ project.slug }}?{{ page_qs[n] }}" data-page="{{ n }}"
         {% if n == board_page %}aria-current="page"{% endif %} title="Page {{ n }} of {{ board_pages|length }} (← →)">
        {%- if n > 1 %}<span aria-hidden="true">← </span>{% endif %}{% for s in stages_of_page %}{{ label(s) }}{% if not loop.last %} · {% endif %}{% endfor %}{% if n < board_pages|length %}<span aria-hidden="true"> →</span>{% endif %}</a>
      {%- endfor %}
    </span>
  </form>
  {#- Radios drive the phone layout (one stage at a time) without JavaScript. #}
  {% for stage in stages %}
  <input class="stage-radio" type="radio" name="stage-tab" id="tab-{{ stage }}" value="{{ stage }}"{% if stage == active_stage %} checked{% endif %}>
  {% endfor %}
  <nav class="stage-tabs" aria-label="Stages">
    {% for stage in stages %}
    <label for="tab-{{ stage }}" class="stage-tab tab-{{ stage }}">{{ label(stage) }}</label>
    {% endfor %}
  </nav>
  <div id="board" class="board" data-page="{{ board_page }}">
    {% include "_columns.html" %}
  </div>
  {#- Opened by app.js; with ?task=<key> the content is rendered here and opened on load. #}
  <dialog class="task-dialog" id="task-dialog" aria-labelledby="task-title"{% if detail %} data-open="{{ detail.task.key }}"{% endif %}>
    {% if detail %}{% include "_task_dialog.html" %}{% endif %}
  </dialog>
  {% include "_viewer.html" %}
</main>
{% endblock %}