{{define "content" -}}
<style>
/* Scoped memory styles, inlined in the same flat todo.sr.ht idiom as the beads
   and milestones views (the scss bundle is not rebuilt in dev): square, hairline
   borders, monospace ids, muted small type, no radius and no shadow. Colours
   come from the CSS variables that mirror core.sr.ht's Bootstrap palette in the
   light default and the prefers-color-scheme: dark variant sourcehut ships. No
   JavaScript: the sort is a link and the search is a GET form. */
.memory {
  --accent: #2f9e44;
  --bd-bg: #ffffff; --bd-panel: #f2f3f5; --bd-fg: #212529;
  --bd-muted: #6c757d; --bd-border: #ced4da;
}
@media (prefers-color-scheme: dark) {
  .memory {
    --bd-bg: #212529; --bd-panel: #343a40; --bd-fg: #dee2e6;
    --bd-muted: #adb5bd; --bd-border: #6c757d;
  }
}

/* freshness line (the shared "beadsHead" partial), in the same muted small type
   the sibling views give it */
.memory .beads-freshness { font-size: .78rem; color: var(--bd-muted); margin: -.35rem 0 .7rem; }
.memory .beads-freshness a { color: var(--bd-muted); }
.memory .beads-freshness code { font-size: .72rem; color: inherit; }

/* filter bar: flat hairline controls, as on the board */
.mem-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.mem-filter input, .mem-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;
}
.mem-filter input[type="search"] { min-width: 12rem; flex: 1 1 12rem; }
.mem-filter button { background: var(--bd-panel); cursor: pointer; }
.mem-filter .mem-clear { font-size: .82rem; color: var(--bd-muted); }

/* sort toggle: the same list in two orders, so it is a pair of words and not a
   tab — the current one is plain text, the other one a link */
.mem-bar { display: flex; gap: .35rem; align-items: baseline; font-size: .82rem; color: var(--bd-muted); margin: 0 0 1rem; }
.mem-bar .count { flex: 1 1 auto; }
.mem-bar .current { color: var(--bd-fg); }

.mem { border: 1px solid var(--bd-border); margin-bottom: 1rem; }
.mem-head { display: flex; align-items: baseline; gap: .5rem; padding: .4rem .7rem; background: var(--bd-panel); border-bottom: 1px solid var(--bd-border); }
.mem-slug { font-family: monospace; font-size: .9rem; font-weight: 700; margin: 0; flex: 0 0 auto; }
.mem-slug a { color: var(--bd-fg); }
.mem-stale { flex: 0 0 auto; font-size: .72rem; line-height: 1.4; padding: 0 .35rem; border: 1px solid var(--bd-border); color: var(--bd-muted); }
.mem-rev { flex: 1 1 auto; text-align: right; font-size: .78rem; color: var(--bd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-rev a { color: var(--bd-muted); }
.mem-rev code { font-size: .72rem; color: inherit; }

/* Paragraphs keep the line breaks their author typed: memories are full of
   bullet lists, and collapsing those into a sentence loses the structure. */
.mem-body { padding: .5rem .7rem; }
.mem-body p { white-space: pre-wrap; margin: 0 0 .6rem; }
.mem-body p:last-child { margin-bottom: 0; }

.mem-empty { color: var(--bd-muted); font-style: italic; }
</style>

<div class="memory">
<h2><a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}">~{{.Repo.OwnerName}}/{{.Repo.Name}}</a> &middot; memory</h2>
{{template "beadsHead" (dict "Repo" .Repo "Ref" .Ref "Head" .Head)}}
{{template "viewtabs" (dict "Repo" .Repo "Views" .Views "Current" "memory" "Ref" .Ref)}}

<form class="mem-filter" method="get" action="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/memory">
  {{if .Ref}}<input type="hidden" name="ref" value="{{.Ref}}">{{end}}
  {{/* The sort is not a filter, but this form is a GET: without carrying it,
       searching from the review queue would answer in slug order. */}}
  {{if eq .Data.Sort "age"}}<input type="hidden" name="sort" value="age">{{end}}
  <input type="search" name="q" value="{{.Data.Search}}" placeholder="Search memories">
  <button type="submit">Filter</button>
  {{/* Clear drops the search and the single-memory selection and keeps the ref
       and the sort: the sort is how the list is read, not what it is filtered
       to. */}}
  {{if or .Data.Search .Data.Key}}<a class="mem-clear" href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/memory{{if .Ref}}?ref={{.Ref}}{{if eq .Data.Sort "age"}}&amp;sort=age{{end}}{{else}}{{if eq .Data.Sort "age"}}?sort=age{{end}}{{end}}">Clear</a>{{end}}
</form>

<div class="mem-bar">
  <span class="count">{{.Data.Total}} {{if eq .Data.Total 1}}entry{{else}}entries{{end}}</span>
  <span class="l">sort:</span>
  {{if eq .Data.Sort "age"}}
  <a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/memory{{withQuery .Data.Query "sort" ""}}">slug</a>
  {{else}}<span class="current" aria-current="page">slug</span>{{end}}
  <span class="sep">&middot;</span>
  {{if eq .Data.Sort "age"}}<span class="current" aria-current="page">age</span>
  {{else}}<a href="/~{{.Repo.OwnerName}}/{{.Repo.Name}}/view/memory{{withQuery .Data.Query "sort" "age"}}">age</a>{{end}}
</div>

{{if .Data.Memories}}
{{range .Data.Memories}}
<article class="mem">
  <header class="mem-head">
    <h3 class="mem-slug"><a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/view/memory?key={{.Slug | urlquery}}">{{.Slug}}</a></h3>
    {{if .Stale}}<span class="mem-stale" title="Older than 60 days &mdash; worth a look. Some memories are meant to be permanent.">stale?</span>{{end}}
    <span class="mem-rev">
      {{with .Revision}}written <span title="{{.Date | abstime}}">{{.Date | agoDays}}</span>
      &middot; <a href="/~{{$.Repo.OwnerName}}/{{$.Repo.Name}}/commit/{{.Commit}}"><code>{{.Commit | shortsha}}</code></a>
      {{- if .Author}} &middot; {{.Author}}{{end}}
      {{- else}}written before the last {{$.Data.WalkMax}} commits{{end}}
    </span>
  </header>
  <div class="mem-body">
    {{range .Paragraphs}}<p>{{.}}</p>{{end}}
  </div>
</article>
{{end}}
{{else if .Data.Key}}
<p class="mem-empty">No memory named <code>{{.Data.Key}}</code>.</p>
{{else if .Data.Search}}
<p class="mem-empty">No memory matches &ldquo;{{.Data.Search}}&rdquo;.</p>
{{else}}
<p class="mem-empty">No memories. <code>bd remember</code> writes them into the <code>config</code> table, and they appear here.</p>
{{end}}
</div>
{{- end}}