{% 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?project={{ project.slug }}"
      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 %}
  </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">
    {% 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>
</main>
{% endblock %}