{{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); }

/* 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; }

/* 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; }

/* 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;
}
.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> &middot; parade</h2>
{{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">&larr; 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>
  <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>
  {{if .Description}}<div class="field-label">Description</div><pre class="field-body">{{.Description}}</pre>{{end}}
  {{if .Design}}<div class="field-label">Design</div><pre class="field-body">{{.Design}}</pre>{{end}}
  {{if .AcceptanceCriteria}}<div class="field-label">Acceptance criteria</div><pre class="field-body">{{.AcceptanceCriteria}}</pre>{{end}}
  {{if .Notes}}<div class="field-label">Notes</div><pre class="field-body">{{.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">&#128679;</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}}&middot; {{.CreatedAt}}{{end}}</div>
      <div class="c-body">{{.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> {{.Summary}}
          {{if .CreatedAt}}<span class="tl-when">&middot; {{.CreatedAt}}</span>{{end}}
        </div>
        {{if .Text}}<div class="tl-body">{{.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}}
  <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}}> &#9889; Ready only</label>
  <button type="submit">Filter</button>
  {{if .Data.Filter.Active}}<a class="beads-filter-clear" href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads{{if .Ref}}?ref={{.Ref}}{{end}}">Clear</a>{{end}}
</form>

<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>

<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">&#9889;</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">&#128679; {{.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}}
</div>
{{- end}}