{{define "content" -}}
<style>
/* Scoped beads styles — inlined because the scss bundle is not rebuilt in dev.
   Everything is under .beads and driven by CSS variables that mirror the
   core.sr.ht theme (Bootstrap 4) for BOTH the light default and the
   prefers-color-scheme: dark variant sourcehut ships, so the view inherits the
   host theme and stays legible instead of shipping its own palette. Lane hues
   are muted Mardi Gras accents used only as borders/tints — never as body
   text — so contrast holds on either theme. */
.beads {
  --lane-rolling: #c9930a; --lane-linedup: #2f9e44;
  --lane-stalled: #9c36b5; --lane-past: #868e96;
  --bd-bg: #ffffff; --bd-panel: #f8f9fa; --bd-fg: #212529;
  --bd-muted: #6c757d; --bd-border: #dee2e6; --bd-danger: #e03131;
}
@media (prefers-color-scheme: dark) {
  .beads {
    --bd-bg: #1c1f24; --bd-panel: #16181b; --bd-fg: #f1f3f5;
    --bd-muted: #adb5bd; --bd-border: #3a4046; --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); }

/* marquee: a flat row of stat cells, color-coded by a thin accent + faint tint */
.beads-marquee { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.beads-marquee .bead-stat {
  flex: 1 1 7rem; min-width: 7rem; padding: .5rem .75rem; text-align: center;
  background: var(--bd-panel);
  background: color-mix(in srgb, var(--lane) 8%, var(--bd-panel));
  border: 1px solid var(--bd-border); border-left: 4px solid var(--lane);
  border-radius: .3rem;
}
.beads-marquee .bead-stat .n { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--bd-fg); }
.beads-marquee .bead-stat .l { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bd-muted); }

/* lanes */
.beads-lanes { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.beads-lane { flex: 1 0 16rem; min-width: 16rem; }
.beads-lane .lane-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem .6rem; background: var(--bd-panel); color: var(--bd-fg); font-weight: 600;
  border: 1px solid var(--bd-border); border-bottom: 3px solid var(--lane);
  border-radius: .3rem .3rem 0 0;
}
.beads-lane .lane-count {
  background: var(--lane); color: #fff; border-radius: 1rem;
  padding: 0 .5rem; font-size: .78rem; font-weight: 600; min-width: 1.4rem; text-align: center;
}
.beads-lane .lane-body {
  border: 1px solid var(--bd-border); border-top: none;
  border-radius: 0 0 .3rem .3rem; padding: .5rem; min-height: 3rem;
}
.bead-card {
  display: block; background: var(--bd-bg); color: var(--bd-fg);
  border: 1px solid var(--bd-border); border-left: 3px solid var(--lane);
  border-radius: .25rem; padding: .5rem .6rem; margin-bottom: .5rem; text-decoration: none;
}
.bead-card:hover { border-color: var(--lane); box-shadow: 0 1px 4px rgba(0,0,0,.18); text-decoration: none; color: var(--bd-fg); }
.bead-card .card-id { font-family: monospace; font-size: .75rem; color: var(--bd-muted); }
.bead-card .card-title { display: block; font-weight: 600; margin: .1rem 0 .3rem; color: var(--bd-fg); }
.bead-card .card-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* pills — neutral by default; semantic variants use tints that resolve against
   the current theme's background so the text (var(--bd-fg)) always reads */
.bead-pill {
  display: inline-block; font-size: .68rem; line-height: 1.5; padding: .02rem .45rem;
  border-radius: 1rem; white-space: nowrap;
  background: var(--bd-panel); border: 1px solid var(--bd-border); color: var(--bd-fg);
}
.bead-pill.prio { background: var(--lane-rolling); border-color: var(--lane-rolling); color: #1a1400; font-weight: 700; }
.bead-pill.assignee {
  background: var(--bd-panel);
  background: color-mix(in srgb, var(--lane-linedup) 16%, var(--bd-bg));
  border-color: color-mix(in srgb, var(--lane-linedup) 45%, var(--bd-border));
}
.bead-pill.block {
  background: var(--bd-panel);
  background: color-mix(in srgb, var(--bd-danger) 16%, var(--bd-bg));
  border-color: color-mix(in srgb, var(--bd-danger) 45%, var(--bd-border));
}
.bead-pill.label { color: var(--bd-muted); }
.beads-empty { color: var(--bd-muted); font-size: .85rem; font-style: italic; padding: .25rem; }

/* detail pane */
.bead-detail .lane-pill {
  display: inline-block; font-size: .72rem; padding: .05rem .5rem; border-radius: 1rem; vertical-align: middle;
  border: 1px solid var(--lane); color: var(--bd-fg);
  background: color-mix(in srgb, var(--lane) 15%, transparent);
}
.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; }
.bead-detail pre.field-body {
  white-space: pre-wrap; background: var(--bd-panel); border: 1px solid var(--bd-border);
  color: var(--bd-fg); border-radius: .25rem; padding: .6rem; margin: .25rem 0 1rem;
}
.bead-comment {
  background: var(--bd-panel); border: 1px solid var(--bd-border); border-left: 3px solid var(--lane-linedup);
  padding: .4rem .6rem; margin-bottom: .5rem; border-radius: .2rem;
}
.bead-comment .c-head { font-size: .8rem; color: var(--bd-muted); margin-bottom: .2rem; }
.bead-comment .c-body { white-space: pre-wrap; color: var(--bd-fg); }
</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 eq .Data.Mode "detail"}}
{{/* ---------------- detail pane ---------------- */}}
<p><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/beads">&larr; Back to the parade</a></p>
{{with .Data.Issue}}
<div class="bead-detail">
  <h3>
    <code>{{.ID}}</code> {{.Title}}
    <span class="lane-pill" style="--lane: {{.Accent}};">{{.Lane}}</span>
  </h3>
  <div class="card-meta mb-3">
    <span class="bead-pill">status: {{.Status}}</span>
    {{if .Priority}}<span class="bead-pill prio">P{{.Priority}}</span>{{end}}
    {{if .IssueType}}<span class="bead-pill">{{.IssueType}}</span>{{end}}
    {{if .Assignee}}<span class="bead-pill assignee">@{{.Assignee}}</span>{{end}}
    {{range .Labels}}<span class="bead-pill label">{{.}}</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 .CreatedAt}}<tr><td class="field-label">Created</td><td>{{.CreatedAt}}</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>

<div class="row">
  <div class="col-md-6">
    <h4>Depends on</h4>
    {{if $.Data.DependsOn}}
    <ul>
      {{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="bead-pill">{{.Type}}</span>
        {{if .Closed}}<span class="bead-pill">closed</span>{{else}}<span class="bead-pill 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>
      {{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="bead-pill">{{.Type}}</span>
      </li>
      {{end}}
    </ul>
    {{else}}<p class="beads-empty">Nothing depends on this issue.</p>{{end}}
  </div>
</div>

<h4>Comments</h4>
{{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}}
{{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}}

<div class="beads-marquee">
  <div class="bead-stat rolling"><span class="n">{{.Data.Counts.Rolling}}</span><span class="l">Rolling</span></div>
  <div class="bead-stat lined-up"><span class="n">{{.Data.Counts.LinedUp}}</span><span class="l">Lined Up</span></div>
  <div class="bead-stat stalled"><span class="n">{{.Data.Counts.Stalled}}</span><span class="l">Stalled</span></div>
  <div class="bead-stat past-stand"><span class="n">{{.Data.Counts.PastStand}}</span><span class="l">Past Stand</span></div>
  <div class="bead-stat total"><span class="n">{{.Data.Counts.Total}}</span><span class="l">Total</span></div>
</div>

<div class="beads-lanes">
  {{range .Data.Lanes}}
  <div class="beads-lane {{.Slug}}">
    <div class="lane-head">
      <span>{{.Name}}</span>
      <span class="lane-count">{{len .Issues}}</span>
    </div>
    <div class="lane-body">
      {{range .Issues}}
      <a class="bead-card" href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/beads?issue={{.ID | urlquery}}">
        <span class="card-id">{{.ID}}</span>
        <span class="card-title">{{.Title}}</span>
        <span class="card-meta">
          {{if .PriorityLabel}}<span class="bead-pill prio">{{.PriorityLabel}}</span>{{end}}
          {{if .Type}}<span class="bead-pill">{{.Type}}</span>{{end}}
          {{if .Assignee}}<span class="bead-pill assignee">@{{.Assignee}}</span>{{end}}
          {{range .Labels}}<span class="bead-pill label">{{.}}</span>{{end}}
          {{if .BlockedBy}}<span class="bead-pill block">&#128679; {{.BlockedBy}}</span>{{end}}
          {{if .Blocks}}<span class="bead-pill">blocks {{.Blocks}}</span>{{end}}
        </span>
      </a>
      {{else}}
      <p class="beads-empty">Empty lane.</p>
      {{end}}
    </div>
  </div>
  {{end}}
</div>
{{end}}
</div>
{{- end}}