{{define "content" -}}
<style>
/* Scoped beads styles — inlined because the scss bundle is not rebuilt in dev.
The look deliberately mimics todo.sr.ht (sourcehut's own issue tracker): flat
and square (no radius, no shadows, no gradients), hairline gray borders,
monospace ids, and squared bordered labels. Colours come from CSS variables
that mirror core.sr.ht's Bootstrap palette for the light default and the
prefers-color-scheme: dark variant sourcehut ships, so the view inherits the
host theme. The Mardi Gras lanes survive only as muted accent swatches and a
2px lane cap — never saturated fills — so it reads as sourcehut, not a
separate app. */
.beads {
--lane-rolling: #c9930a; --lane-linedup: #2f9e44;
--lane-stalled: #9c36b5; --lane-past: #868e96;
--bd-bg: #ffffff; --bd-panel: #f2f3f5; --bd-fg: #212529;
--bd-muted: #6c757d; --bd-border: #ced4da; --bd-stripe: rgba(0,0,0,.05);
--bd-danger: #b52a2a;
}
@media (prefers-color-scheme: dark) {
.beads {
--bd-bg: #212529; --bd-panel: #343a40; --bd-fg: #dee2e6;
--bd-muted: #adb5bd; --bd-border: #6c757d; --bd-stripe: rgba(255,255,255,.05);
--bd-danger: #ff6b6b;
}
}
.beads .rolling { --lane: var(--lane-rolling); }
.beads .lined-up { --lane: var(--lane-linedup); }
.beads .stalled { --lane: var(--lane-stalled); }
.beads .past-stand { --lane: var(--lane-past); }
.beads .total { --lane: var(--bd-muted); }
/* freshness line (the shared "beadsHead" partial): one quiet row under the
title, muted and small — it qualifies the page, it does not announce
anything. */
.beads .beads-freshness { font-size: .78rem; color: var(--bd-muted); margin: -.35rem 0 .7rem; }
.beads .beads-freshness a { color: var(--bd-muted); }
.beads .beads-freshness code { font-size: .72rem; color: inherit; }
/* a small square colour chip standing in for the lane's Mardi Gras hue */
.beads .swatch {
display: inline-block; width: .7rem; height: .7rem; flex: 0 0 auto;
background: var(--lane); border: 1px solid rgba(0,0,0,.25); vertical-align: -1px;
}
/* summary: one flat hairline-bordered strip, cells divided by hairlines */
/* filter bar: flat, hairline-bordered controls in the todo.sr.ht idiom */
.beads-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.beads-filter input, .beads-filter select, .beads-filter button {
font: inherit; font-size: .82rem; padding: .25rem .45rem; color: var(--bd-fg);
background: var(--bd-bg); border: 1px solid var(--bd-border); border-radius: 0;
}
.beads-filter input[type="search"] { min-width: 12rem; flex: 1 1 12rem; }
.beads-filter button { background: var(--bd-panel); cursor: pointer; }
.beads-filter .beads-filter-clear { font-size: .82rem; color: var(--bd-muted); align-self: center; }
.beads-ready-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--bd-fg); }
.ready-dot { margin-right: .25rem; }
/* layout toggle: the same page in two shapes, so it is a pair of words and not
a tab — the current one is plain text, the other one a link */
.beads-layout { display: flex; gap: .35rem; align-items: baseline; font-size: .82rem; margin: -.5rem 0 1rem; }
.beads-layout .l { color: var(--bd-muted); }
.beads-layout .sep { color: var(--bd-muted); }
.beads-layout .current { color: var(--bd-fg); font-weight: 700; }
/* transitive dependency tree: indent by --depth via a hairline guide */
.dep-graph { margin: 0 0 1.25rem; }
.dep-tree { list-style: none; padding-left: 0; margin: 0 0 .5rem; }
.dep-tree .dep-node {
padding: .18rem 0 .18rem calc(var(--depth, 0) * 1.1rem + .1rem);
border-top: 1px solid var(--bd-border);
}
.dep-tree .dep-node:first-child { border-top: none; }
.dep-tree code { font-size: .8rem; }
.beads-summary { display: flex; flex-wrap: wrap; border: 1px solid var(--bd-border); margin-bottom: 1rem; }
.beads-summary .stat {
flex: 1 1 7rem; min-width: 6.5rem; padding: .35rem .6rem;
border-left: 1px solid var(--bd-border);
}
.beads-summary .stat:first-child { border-left: none; }
.beads-summary .stat .n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.beads-summary .stat .l { display: flex; align-items: center; gap: .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bd-muted); }
/* lanes: flat squared columns with a 2px accent cap */
.beads-lanes { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.beads-lane { flex: 1 0 15rem; min-width: 15rem; }
.beads-lane .lane-head {
display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; font-weight: 700;
background: var(--bd-panel); color: var(--bd-fg);
border: 1px solid var(--bd-border); border-top: 2px solid var(--lane);
}
.beads-lane .lane-head .count { margin-left: auto; color: var(--bd-muted); font-weight: 400; font-size: .85rem; }
.beads-lane .lane-body { border: 1px solid var(--bd-border); border-top: none; }
/* stream: the same lanes stacked as one readable column. The heads are the lane
heads (2px accent cap, swatch, count) made sticky, so the section a row
belongs to stays named while its issues scroll past. */
.beads-stream { max-width: 52rem; }
.beads-stream .beads-section { margin-bottom: .75rem; }
.beads-stream .stream-head {
display: flex; align-items: baseline; gap: .4rem; padding: .3rem .5rem; font-weight: 700;
background: var(--bd-panel); color: var(--bd-fg);
border: 1px solid var(--bd-border); border-top: 2px solid var(--lane);
position: sticky; top: 0;
}
/* A flex summary drops the browser's disclosure marker, and a collapsed section
with no affordance reads as an empty one — so draw the triangle back. */
.beads-stream summary.stream-head { cursor: pointer; list-style: none; }
.beads-stream summary.stream-head::-webkit-details-marker { display: none; }
.beads-stream summary.stream-head::before { content: "\25B8"; color: var(--bd-muted); }
.beads-stream details[open] > summary.stream-head::before { content: "\25BE"; }
.beads-stream .stream-head .swatch { align-self: center; }
.beads-stream .stream-head .note { color: var(--bd-muted); font-weight: 400; font-size: .72rem; }
.beads-stream .stream-head .count { margin-left: auto; color: var(--bd-muted); font-weight: 400; font-size: .85rem; }
.beads-stream .stream-body { border: 1px solid var(--bd-border); border-top: none; }
/* issue rows: todo.sr.ht ticket-list feel — hairline separated, no radius */
.bead-row { display: block; padding: .3rem .5rem; text-decoration: none; color: var(--bd-fg); border-top: 1px solid var(--bd-border); }
.bead-row:first-child { border-top: none; }
.bead-row:hover { background: var(--bd-stripe); text-decoration: none; color: var(--bd-fg); }
.bead-row .r-id { font-family: monospace; font-size: .72rem; color: var(--bd-muted); }
.bead-row .r-title { display: block; margin: .05rem 0 .2rem; color: var(--bd-fg); }
.bead-row .r-meta { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.beads-empty { color: var(--bd-muted); font-size: .8rem; font-style: italic; padding: .35rem .5rem; }
/* labels: sourcehut .label — squared, hairline-bordered, transparent */
.blabel {
display: inline-block; font-size: .7rem; line-height: 1.5; padding: 0 .3rem; white-space: nowrap;
border: 1px solid var(--bd-border); background: transparent; color: var(--bd-fg);
}
.blabel.prio { border-color: var(--lane-rolling); color: var(--bd-fg); font-weight: 700; }
.blabel.assignee { border-color: var(--lane-linedup); }
.blabel.block { border-color: var(--bd-danger); color: var(--bd-danger); }
.blabel.muted { color: var(--bd-muted); }
/* detail pane */
.bead-detail .ticket-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; }
.bead-detail .ticket-title code { font-size: 1.1rem; }
.bead-detail .lane-label { border: 1px solid var(--lane); color: var(--bd-fg); padding: 0 .4rem; font-size: .75rem; }
.bead-detail .lane-label .swatch { margin-right: .3rem; }
.bead-detail .field-label { color: var(--bd-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.bead-detail table td.field-label { white-space: nowrap; width: 9rem; vertical-align: middle; }
pre.field-body {
white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bd-panel);
border: 1px solid var(--bd-border); color: var(--bd-fg); padding: .5rem; margin: .25rem 0 1rem;
}
/* copy-ready bd commands: the page shows work and cannot change it — a write
path would mean the SQL engine, a working set, a commit and a push, the
dependency this build is deliberately free of — so it hands over the command
instead. One quiet block in the same flat, square, hairline idiom as the rest,
not a call-to-action panel. `user-select: all` per line makes one click select
one whole command, which is why no JavaScript and no clipboard API is
involved. */
.bead-detail .bead-commands {
background: var(--bd-panel); border: 1px solid var(--bd-border);
padding: .3rem .5rem; margin: 0 0 1rem; max-width: 34rem;
}
.bead-detail .bead-commands .cmd {
display: block; font-family: monospace; font-size: .78rem; line-height: 1.6;
color: var(--bd-fg); -webkit-user-select: all; user-select: all;
}
.bead-deplist { list-style: none; padding-left: 0; margin-bottom: 0; }
.bead-deplist li { padding: .2rem 0; border-top: 1px solid var(--bd-border); }
.bead-deplist li:first-child { border-top: none; }
.bead-deplist code { font-size: .8rem; }
.bead-comment { border: 1px solid var(--bd-border); border-left: 2px solid var(--lane-linedup); padding: .4rem .6rem; margin-bottom: .5rem; }
.bead-comment .c-head { font-size: .8rem; color: var(--bd-muted); margin-bottom: .2rem; }
.bead-comment .c-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bd-fg); }
/* epic: badge, subtask rollup, progress meter */
.epic-badge { border-color: var(--lane-stalled); color: var(--bd-fg); text-transform: uppercase; letter-spacing: .04em; }
.epic-subtasks { margin-bottom: 1.25rem; }
.epic-progress { height: 6px; background: var(--bd-panel); border: 1px solid var(--bd-border); margin: .1rem 0 .6rem; }
.epic-progress-bar { height: 100%; background: var(--lane-linedup); }
.subtask-list li { padding: .3rem 0; }
/* a thin status accent on the left cap of each subtask row */
.subtask-list li.subtask { border-left: 2px solid var(--bd-border); padding-left: .5rem; }
.subtask-list li.subtask.in_progress { border-left-color: var(--lane-rolling); }
.subtask-list li.subtask.closed { border-left-color: var(--lane-past); }
.subtask-list li.subtask.closed a code { text-decoration: line-through; }
/* activity: Comments | History tabs (pure-CSS radio switch, no JS) */
.bead-activity .acttab-radio { position: absolute; opacity: 0; pointer-events: none; }
.acttabs { display: flex; gap: 0; border-bottom: 1px solid var(--bd-border); margin-bottom: .75rem; }
.acttabs label {
padding: .35rem .85rem; cursor: pointer; color: var(--bd-muted);
border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
#acttab-comments:checked ~ .acttabs label[for="acttab-comments"],
#acttab-history:checked ~ .acttabs label[for="acttab-history"] {
color: var(--bd-fg); background: var(--bd-panel);
border-color: var(--bd-border); border-bottom: 1px solid var(--bd-panel);
}
.bead-activity .actpanel { display: none; }
#acttab-comments:checked ~ .panel-comments { display: block; }
#acttab-history:checked ~ .panel-history { display: block; }
.bead-timeline { list-style: none; padding-left: 0; margin: 0; border-left: 2px solid var(--bd-border); }
.bead-timeline .tl-item { position: relative; padding: .2rem 0 .5rem .8rem; }
.bead-timeline .tl-item::before {
content: ""; position: absolute; left: -5px; top: .5rem;
width: 8px; height: 8px; background: var(--bd-muted); border: 1px solid var(--bd-bg);
}
.bead-timeline .tl-comment::before { background: var(--lane-linedup); }
.bead-timeline .tl-dep::before { background: var(--lane-stalled); }
.bead-timeline .tl-head { font-size: .85rem; color: var(--bd-fg); }
.bead-timeline .tl-when { color: var(--bd-muted); }
.bead-timeline .tl-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bd-fg); margin-top: .15rem; padding-left: .1rem; }
</style>
<div class="beads">
<h2><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}">~{{.Repo.OwnerName}}/{{.Repo.Name}}</a> · parade</h2>
{{template "beadsHead" (dict "Repo" .Repo "Ref" .Ref "Head" .Head)}}
{{template "viewtabs" (dict "Repo" .Repo "Views" .Views "Current" "beads" "Ref" .Ref)}}
{{if or (eq .Data.Mode "detail") (eq .Data.Mode "epic")}}
{{/* ------------- detail / epic pane ------------- */}}
<p><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads">← Back to the parade</a></p>
{{with .Data.Issue}}
<div class="bead-detail">
<h2 class="ticket-title">
<code>{{.ID}}</code> <span>{{.Title}}</span>
{{if eq $.Data.Mode "epic"}}<span class="blabel epic-badge">epic</span>{{end}}
<span class="lane-label" style="--lane: {{.Accent}};"><span class="swatch"></span>{{.Lane}}</span>
</h2>
<div class="r-meta mb-3">
<span class="blabel muted">status: {{.Status}}</span>
{{if .Priority}}<span class="blabel prio">P{{.Priority}}</span>{{end}}
{{if .IssueType}}<span class="blabel">{{.IssueType}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
</div>
{{/* The command this page cannot run for you. Which ones are offered follows
the issue's status through the lane the detail pane already derived from
it (Rolling = in progress, Past Stand = closed, Lined Up = open), so there
is no second status vocabulary here — and nothing is offered that bd would
refuse. The command names the issue and nothing about paths: this service
does not know where the tracker is checked out, and the database name is
in the breadcrumb if the reader needs to pick a directory. */}}
<div class="bead-commands" role="group" aria-label="bd commands for this issue">
{{if eq .Lane "Rolling"}}
<code class="cmd">bd close {{.ID}}</code>
<code class="cmd">bd update {{.ID}} --status=open</code>
{{else if eq .Lane "Past Stand"}}
<code class="cmd">bd reopen {{.ID}}</code>
{{else}}
<code class="cmd">bd update {{.ID}} --claim</code>
<code class="cmd">bd close {{.ID}}</code>
{{end}}
</div>
<table class="table table-sm">
<tbody>
{{if .CreatedBy}}<tr><td class="field-label">Created by</td><td>{{.CreatedBy}}</td></tr>{{end}}
{{if .Owner}}<tr><td class="field-label">Owner</td><td>{{.Owner}}</td></tr>{{end}}
{{if .EstimatedMinutes}}<tr><td class="field-label">Estimate</td><td>{{.EstimatedMinutes}} min</td></tr>{{end}}
{{if .ExternalRef}}<tr><td class="field-label">External ref</td><td>{{.ExternalRef}}</td></tr>{{end}}
{{if .SpecID}}<tr><td class="field-label">Spec</td><td>{{.SpecID}}</td></tr>{{end}}
{{if .CreatedAt}}<tr><td class="field-label">Created</td><td>{{.CreatedAt}}</td></tr>{{end}}
{{if .StartedAt}}<tr><td class="field-label">Started</td><td>{{.StartedAt}}</td></tr>{{end}}
{{if .UpdatedAt}}<tr><td class="field-label">Updated</td><td>{{.UpdatedAt}}</td></tr>{{end}}
{{if .ClosedAt}}<tr><td class="field-label">Closed</td><td>{{.ClosedAt}}</td></tr>{{end}}
</tbody>
</table>
{{/* The long-text bodies go through $.Links, which escapes the stored text and
then wraps the issue ids it recognises in links to the database that owns
them. An id whose prefix belongs to no database this viewer may browse is
left as the text it is. */}}
{{if .Description}}<div class="field-label">Description</div><pre class="field-body">{{$.Links.Text .Description}}</pre>{{end}}
{{if .Design}}<div class="field-label">Design</div><pre class="field-body">{{$.Links.Text .Design}}</pre>{{end}}
{{if .AcceptanceCriteria}}<div class="field-label">Acceptance criteria</div><pre class="field-body">{{$.Links.Text .AcceptanceCriteria}}</pre>{{end}}
{{if .Notes}}<div class="field-label">Notes</div><pre class="field-body">{{$.Links.Text .Notes}}</pre>{{end}}
</div>
{{if eq $.Data.Mode "epic"}}
<div class="epic-subtasks">
<h4>Subtasks{{if $.Data.SubtaskTotal}} <small class="text-muted">{{$.Data.SubtaskDone}} of {{$.Data.SubtaskTotal}} done</small>{{end}}</h4>
{{if $.Data.SubtaskTotal}}
<div class="epic-progress" title="{{$.Data.SubtaskPct}}% complete">
<div class="epic-progress-bar" style="width: {{$.Data.SubtaskPct}}%"></div>
</div>
<ul class="bead-deplist subtask-list">
{{range $.Data.Subtasks}}
<li class="subtask {{.Category}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
<span class="blabel muted">{{.Status}}</span>
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{if .Blocked}}<span class="blabel block">🚧</span>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No subtasks linked to this epic.</p>{{end}}
</div>
{{end}}
<div class="row">
<div class="col-md-6">
<h4>Depends on</h4>
{{if $.Data.DependsOn}}
<ul class="bead-deplist">
{{range $.Data.DependsOn}}
<li>
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.IssueID | urlquery}}"><code>{{.IssueID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No outgoing dependencies.</p>{{end}}
</div>
<div class="col-md-6">
<h4>Depended on by</h4>
{{if $.Data.DependedOnBy}}
<ul class="bead-deplist">
{{range $.Data.DependedOnBy}}
<li>
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.IssueID | urlquery}}"><code>{{.IssueID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">Nothing depends on this issue.</p>{{end}}
</div>
</div>
{{if or $.Data.DependsTree $.Data.DependentTree}}
<div class="dep-graph">
{{if $.Data.DependsTree}}
<h4>Prerequisite chain <small class="text-muted">— everything this waits on, transitively</small></h4>
<ul class="dep-tree">
{{range $.Data.DependsTree}}
<li class="dep-node" style="--depth: {{.Depth}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{end}}
{{if $.Data.DependentTree}}
<h4>Unblocks <small class="text-muted">— everything waiting on this, transitively</small></h4>
<ul class="dep-tree">
{{range $.Data.DependentTree}}
<li class="dep-node" style="--depth: {{.Depth}}">
<a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}"><code>{{.ID}}</code></a>
{{if .Title}}— {{.Title}}{{end}}
<span class="blabel muted">{{.Type}}</span>
{{if .Closed}}<span class="blabel muted">closed</span>{{else}}<span class="blabel block">{{.Status}}</span>{{end}}
</li>
{{end}}
</ul>
{{end}}
</div>
{{end}}
<div class="bead-activity">
<input type="radio" name="acttab" id="acttab-comments" class="acttab-radio" checked>
<input type="radio" name="acttab" id="acttab-history" class="acttab-radio">
<div class="acttabs">
<label for="acttab-comments">Comments</label>
<label for="acttab-history">History</label>
</div>
<div class="actpanel panel-comments">
{{if $.Data.Comments}}
{{range $.Data.Comments}}
<div class="bead-comment">
<div class="c-head"><strong>{{.Author}}</strong> {{if .CreatedAt}}· {{.CreatedAt}}{{end}}</div>
<div class="c-body">{{$.Links.Text .Text}}</div>
</div>
{{end}}
{{else}}<p class="beads-empty">No comments.</p>{{end}}
{{/* The Comments tab has no closed event, so the close reason is shown here
at the end; the History tab already carries it as the closed event. */}}
{{if .CloseReason}}
<h4>Close reason</h4>
<pre class="field-body">{{.CloseReason}}</pre>
{{end}}
</div>
<div class="actpanel panel-history">
{{if $.Data.History}}
<ul class="bead-timeline">
{{range $.Data.History}}
<li class="tl-item tl-{{.Kind}}">
<div class="tl-head">
<strong>{{.Actor}}</strong> {{$.Links.Text .Summary}}
{{if .CreatedAt}}<span class="tl-when">· {{.CreatedAt}}</span>{{end}}
</div>
{{if .Text}}<div class="tl-body">{{$.Links.Text .Text}}</div>{{end}}
</li>
{{end}}
</ul>
{{else}}<p class="beads-empty">No activity yet.</p>{{end}}
</div>
</div>
{{else}}
<div class="alert alert-warning">Issue not found.</div>
{{end}}
{{else}}
{{/* ---------------- board ---------------- */}}
{{if .Data.Truncated}}
<div class="alert alert-warning">Showing the first {{.Data.Total}} of {{.Data.ShownOf}} issues.</div>
{{end}}
<form class="beads-filter" method="get" action="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads">
{{if .Ref}}<input type="hidden" name="ref" value="{{.Ref}}">{{end}}
{{/* The layout is not a filter, but this form is a GET: without carrying it,
submitting a filter from the stream would answer with the board. */}}
{{if eq .Data.Layout "stream"}}<input type="hidden" name="layout" value="stream">{{end}}
<input type="search" name="q" value="{{.Data.Filter.Query}}" placeholder="Search id / title">
<select name="type" aria-label="Type">
<option value="">All types</option>
{{range .Data.FilterOpts.Types}}<option value="{{.}}"{{if eq . $.Data.Filter.Type}} selected{{end}}>{{.}}</option>{{end}}
</select>
<select name="priority" aria-label="Priority">
<option value="">All priorities</option>
{{range .Data.FilterOpts.Priorities}}<option value="{{.}}"{{if eq . $.Data.Filter.Priority}} selected{{end}}>P{{.}}</option>{{end}}
</select>
<select name="assignee" aria-label="Assignee">
<option value="">Anyone</option>
{{range .Data.FilterOpts.Assignees}}<option value="{{.}}"{{if eq . $.Data.Filter.Assignee}} selected{{end}}>@{{.}}</option>{{end}}
</select>
<select name="label" aria-label="Label">
<option value="">Any label</option>
{{range .Data.FilterOpts.Labels}}<option value="{{.}}"{{if eq . $.Data.Filter.Label}} selected{{end}}>{{.}}</option>{{end}}
</select>
<label class="beads-ready-toggle"><input type="checkbox" name="ready" value="1"{{if .Data.Filter.Ready}} checked{{end}}> ⚡ Ready only</label>
<button type="submit">Filter</button>
{{/* Clear drops the filters and keeps the layout: the layout is how the page
is read, not what it is filtered to. */}}
{{if .Data.Filter.Active}}<a class="beads-filter-clear" href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{if .Ref}}?ref={{.Ref}}{{if eq .Data.Layout "stream"}}&layout=stream{{end}}{{else}}{{if eq .Data.Layout "stream"}}?layout=stream{{end}}{{end}}">Clear</a>{{end}}
</form>
<div class="beads-layout">
<span class="l">view:</span>
{{if eq .Data.Layout "stream"}}
<a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{withQuery .Data.Query "layout" ""}}">Board</a>
{{else}}<span class="current" aria-current="page">Board</span>{{end}}
<span class="sep">·</span>
{{if eq .Data.Layout "stream"}}<span class="current" aria-current="page">Stream</span>
{{else}}<a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{withQuery .Data.Query "layout" "stream"}}">Stream</a>{{end}}
</div>
<div class="beads-summary">
<div class="stat rolling"><div class="n">{{.Data.Counts.Rolling}}</div><div class="l"><span class="swatch"></span>Rolling</div></div>
<div class="stat lined-up"><div class="n">{{.Data.Counts.LinedUp}}</div><div class="l"><span class="swatch"></span>Lined Up</div></div>
<div class="stat stalled"><div class="n">{{.Data.Counts.Stalled}}</div><div class="l"><span class="swatch"></span>Stalled</div></div>
<div class="stat past-stand"><div class="n">{{.Data.Counts.PastStand}}</div><div class="l"><span class="swatch"></span>Past Stand</div></div>
<div class="stat total"><div class="n">{{.Data.Counts.Total}}</div><div class="l">Total</div></div>
</div>
{{if eq .Data.Layout "stream"}}
{{/* ---------------- stream: the same buckets as one column ---------------- */}}
<div class="beads-stream">
{{range .Data.Sections}}
{{if .Collapsed}}
<details class="beads-section {{.Slug}}">
<summary class="stream-head">
<span class="swatch"></span>{{.Name}}{{if .Note}}<span class="note">{{.Note}}</span>{{end}}<span class="count">{{len .Issues}}</span>
</summary>
{{template "beadStreamRows" (dict "Repo" $.Repo "Section" .)}}
</details>
{{else}}
<section class="beads-section {{.Slug}}">
<div class="stream-head">
<span class="swatch"></span>{{.Name}}{{if .Note}}<span class="note">{{.Note}}</span>{{end}}<span class="count">{{len .Issues}}</span>
</div>
{{template "beadStreamRows" (dict "Repo" $.Repo "Section" .)}}
</section>
{{end}}
{{end}}
</div>
{{else}}
{{/* ---------------- board: four lanes side by side ---------------- */}}
<div class="beads-lanes">
{{range .Data.Lanes}}
<div class="beads-lane {{.Slug}}">
<div class="lane-head">
<span class="swatch"></span>{{.Name}}<span class="count">{{len .Issues}}</span>
</div>
<div class="lane-body">
{{range .Issues}}
<a class="bead-row" href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}">
<span class="r-id">{{if .Ready}}<span class="ready-dot" title="Ready to work">⚡</span>{{end}}{{.ID}}</span>
<span class="r-title">{{.Title}}</span>
<span class="r-meta">
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
{{if .Type}}<span class="blabel">{{.Type}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
{{if .BlockedBy}}<span class="blabel block">🚧 {{.BlockedBy}}</span>{{end}}
{{if .Blocks}}<span class="blabel muted">blocks {{.Blocks}}</span>{{end}}
</span>
</a>
{{else}}
<p class="beads-empty">Empty lane.</p>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}{{/* layout */}}
{{end}}{{/* detail vs board */}}
</div>
{{- end}}
{{/* One stream section's cards. The row markup is the board's row markup: the
same card, only differently arranged — so the two copies move together.
It is copied rather than shared because folding the board's lane body into
this partial would reflow the board's output, and the board is meant to
render exactly what it rendered before this layout existed. */}}
{{define "beadStreamRows"}}
<div class="stream-body">
{{range .Section.Issues}}
<a class="bead-row" href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}">
<span class="r-id">{{if .Ready}}<span class="ready-dot" title="Ready to work">⚡</span>{{end}}{{.ID}}</span>
<span class="r-title">{{.Title}}</span>
<span class="r-meta">
{{if .PriorityLabel}}<span class="blabel prio">{{.PriorityLabel}}</span>{{end}}
{{if .Type}}<span class="blabel">{{.Type}}</span>{{end}}
{{if .Assignee}}<span class="blabel assignee">@{{.Assignee}}</span>{{end}}
{{range .Labels}}<span class="blabel muted">{{.}}</span>{{end}}
{{if .BlockedBy}}<span class="blabel block">🚧 {{.BlockedBy}}</span>{{end}}
{{if .Blocks}}<span class="blabel muted">blocks {{.Blocks}}</span>{{end}}
</span>
</a>
{{else}}
<p class="beads-empty">Nothing in this section.</p>
{{end}}
</div>
{{end}}