{{define "content" -}}
<style>
/* Scoped Mardi Gras palette — inlined here because the scss bundle is not
   rebuilt in dev. Everything is prefixed .beads so it never leaks. */
.beads-marquee {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch;
  margin-bottom: 1rem;
  border-radius: .4rem; overflow: hidden;
  border: 2px solid #7b2ff7;
  background: linear-gradient(90deg, #2b0a52 0%, #3a1466 50%, #1f5c34 100%);
}
.beads-marquee .bead-stat {
  flex: 1 1 auto; min-width: 7rem; padding: .5rem .75rem; color: #fdf6e3;
  text-align: center;
}
.beads-marquee .bead-stat .n { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.beads-marquee .bead-stat .l { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.beads-marquee .bead-stat.total { background: rgba(245,197,24,.18); }
.beads-marquee .bead-stat .n.rolling { color: #f5c518; }
.beads-marquee .bead-stat .n.lined-up { color: #7be0a0; }
.beads-marquee .bead-stat .n.stalled { color: #c9a3ff; }
.beads-marquee .bead-stat .n.past-stand { color: #c9ccd1; }

.beads-lanes { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.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; border-radius: .35rem .35rem 0 0;
  color: #fff; font-weight: 600;
}
.beads-lane .lane-body {
  border: 1px solid rgba(0,0,0,.12); border-top: none;
  border-radius: 0 0 .35rem .35rem; padding: .5rem;
  background: rgba(123,47,247,.03); min-height: 4rem;
}
.beads-lane .lane-count {
  background: rgba(255,255,255,.25); border-radius: 1rem;
  padding: 0 .5rem; font-size: .8rem;
}
.bead-card {
  display: block; background: #fff; border: 1px solid rgba(0,0,0,.12);
  border-left: 4px solid #7b2ff7; border-radius: .3rem;
  padding: .5rem .6rem; margin-bottom: .5rem; text-decoration: none; color: inherit;
}
.bead-card:hover { border-color: #7b2ff7; box-shadow: 0 1px 4px rgba(123,47,247,.25); text-decoration: none; }
.bead-card .card-id { font-family: monospace; font-size: .75rem; color: #7b2ff7; }
.bead-card .card-title { display: block; font-weight: 600; margin: .1rem 0 .25rem; }
.bead-card .card-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bead-pill {
  font-size: .68rem; padding: .05rem .4rem; border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.15); background: #f3f3f3;
}
.bead-pill.prio { background: #f5c518; border-color: #d9ad0a; color: #3a2d00; font-weight: 700; }
.bead-pill.type { background: #ece3ff; border-color: #cbb6ff; color: #46248a; }
.bead-pill.assignee { background: #e3f4ea; border-color: #a7d9bd; color: #1d5c37; }
.bead-pill.label { background: #f0f0f0; }
.bead-pill.block { background: #ffe9e0; border-color: #f0b49b; color: #8a3311; }
.beads-empty { color: #888; font-size: .85rem; font-style: italic; padding: .25rem; }

.bead-detail .field-label { font-weight: 600; color: #46248a; }
.bead-detail pre.field-body {
  white-space: pre-wrap; background: #faf7ff; border: 1px solid #e6dbff;
  border-radius: .3rem; padding: .5rem; margin: .25rem 0 1rem;
}
.bead-comment {
  border-left: 3px solid #2e9e4f; background: #f5faf7;
  padding: .4rem .6rem; margin-bottom: .5rem; border-radius: .2rem;
}
.bead-comment .c-head { font-size: .8rem; color: #1d5c37; margin-bottom: .2rem; }
.bead-comment .c-body { white-space: pre-wrap; }
@media (prefers-color-scheme: dark) {
  .bead-card { background: #1e1e24; border-color: #333; color: #e6e6e6; }
  .bead-detail pre.field-body { background: #1e1626; border-color: #3a2a50; color: #e6e6e6; }
  .bead-comment { background: #16211a; }
  .bead-pill { background: #2a2a30; border-color: #444; color: #ddd; }
}
</style>

<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="bead-pill" style="border-color: {{.Accent}}; color: {{.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 type">{{.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"><span class="n rolling">{{.Data.Counts.Rolling}}</span><span class="l">Rolling</span></div>
  <div class="bead-stat"><span class="n lined-up">{{.Data.Counts.LinedUp}}</span><span class="l">Lined Up</span></div>
  <div class="bead-stat"><span class="n stalled">{{.Data.Counts.Stalled}}</span><span class="l">Stalled</span></div>
  <div class="bead-stat"><span class="n past-stand">{{.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}}
  {{$accent := .Accent}}
  <div class="beads-lane">
    <div class="lane-head" style="background: {{.Accent}};">
      <span>{{.Name}}</span>
      <span class="lane-count">{{len .Issues}}</span>
    </div>
    <div class="lane-body">
      {{range .Issues}}
      <a class="bead-card" style="border-left-color: {{$accent}};"
         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">{{.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}}
{{- end}}