compass_teams_nhs/internal/web/templates/dashboard.html

{{define "dashboard.html"}}<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>{{.Title}} — Compass / Teams</title>
  <link rel="stylesheet" href="/static/tokens.css">
  <link rel="stylesheet" href="/static/app.css">
  <script src="/static/htmx.min.js" defer></script>
  <script src="/static/theme.js" defer></script>
</head>
<body class="app">
  <nav class="nav-bar">
    <a class="nav-bar__brand" href="/">
      <span class="nav-bar__mark" aria-hidden="true"></span>
      Compass / Teams
    </a>
    <div class="nav-bar__right">
      <button class="button-utility" type="button" data-theme-toggle>Dark</button>
      <span class="nav-bar__user">{{.Username}}</span>
      <form method="post" action="/logout" class="nav-bar__logout">
        <input type="hidden" name="csrf" value="{{.CSRF}}">
        <button class="button-utility" type="submit">Sign out</button>
      </form>
    </div>
  </nav>

  <main class="container">
    <header class="page-head">
      <h1 class="heading-1">What is due</h1>
      <p class="page-head__sub">Overdue first. Compass for the schedule and notices,
        Teams for homework.</p>
    </header>

    {{if .ErrMsg}}<p class="flash flash--error" role="alert">{{.ErrMsg}}</p>{{end}}

    <div hx-get="/partials/scan-status" hx-trigger="every 60s" hx-swap="outerHTML">
      {{template "scan-status.html" .Scan}}
    </div>

    {{template "calendar-status.html" .Calendar}}

    {{if .Tabs}}
    <nav class="child-tabs" aria-label="Children">
      {{range .Tabs}}
      <a class="child-tab{{if .Active}} child-tab--active{{end}}" href="/?child={{.ID}}"
         {{if .Active}}aria-current="page"{{end}}>
        {{.Name}}
        {{if .Overdue}}<span class="child-tab__badge">{{.Overdue}}</span>{{end}}
      </a>
      {{end}}
    </nav>
    {{end}}

    {{if .HasChild}}
    <section class="child" aria-labelledby="child-title">
      <div class="child__head">
        <div>
          <h2 id="child-title" class="heading-2">{{.Child.Name}}</h2>
          <p class="child__meta">{{if .Child.Year}}Year {{.Child.Year}} · {{end}}{{.Child.Headline}}</p>
        </div>
        <span class="category-pill scan__pill scan__pill--{{.Child.Scan.Level}}">
          {{if eq .Child.Scan.Level "ok"}}scan healthy
          {{else if eq .Child.Scan.Level "error"}}scan failed
          {{else}}no scan yet{{end}}
        </span>
      </div>

      {{if not .Child.Scan.OK}}
      <p class="flash flash--error" role="alert">
        {{.Child.Scan.Message}} The lists below may be incomplete — this is not a clean
        “nothing due”.
      </p>
      {{end}}

      {{range .Child.Sections}}
      <section class="section" id="sec-{{.Key}}" aria-labelledby="sec-{{.Key}}-title">
        <div class="section__head">
          <h3 id="sec-{{.Key}}-title" class="heading-3{{if eq .Tone "danger"}} heading-3--danger{{end}}">{{.Title}}</h3>
          <span class="category-pill"><span class="dot{{if eq .Tone "danger"}} dot--danger{{end}}"></span>{{len .Items}}</span>
        </div>
        {{if .Items}}
        <ul class="item-list">
          {{range .Items}}
          <li class="item{{if eq .StatusLabel "Overdue"}} item--overdue{{end}}" id="item-{{.ID}}">
            <div class="item__body">
              <p class="item__title"><a href="/items/{{.ID}}">{{.Title}}</a></p>
              <p class="item__meta">
                <span class="tag tag--type">{{.TypeLabel}}</span>
                {{if .Subject}}<span class="item__subject">{{.Subject}}</span>{{end}}
                {{if .DueLabel}}<span class="item__due">due {{.DueLabel}}</span>{{end}}
                {{if .StatusLabel}}<span class="tag tag--status">{{.StatusLabel}}</span>{{end}}
              </p>
            </div>
            <form class="item__actions" method="post" action="/items/{{.ID}}/delete"
                  hx-post="/items/{{.ID}}/delete" hx-target="closest .item" hx-swap="delete"
                  hx-confirm="Delete this item? It returns on the next scan if the school still lists it.">
              <input type="hidden" name="csrf" value="{{$.CSRF}}">
              <button class="button-utility button-utility--danger" type="submit">Delete</button>
            </form>
          </li>
          {{end}}
        </ul>
        {{else}}
        <p class="section__empty">{{.Empty}}</p>
        {{end}}
      </section>
      {{end}}

      <div class="child__foot">
        {{if .Child.LaterCount}}<span>{{.Child.LaterCount}} due later</span>{{end}}
        {{if .Child.DoneCount}}<span>{{.Child.DoneCount}} submitted</span>{{end}}
        <form method="post" action="/summaries/build" class="inline-form">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <input type="hidden" name="child" value="{{.Child.ID}}">
          <button class="button-utility" type="submit">Build {{.Child.Name}}'s brief (draft)</button>
        </form>
      </div>
    </section>
    {{else}}
    <div class="empty-state">
      <p class="empty-state__title">No children on file</p>
      <p class="empty-state__body">Harry and Finn are seeded on first start. If this is empty,
        the database was not seeded.</p>
    </div>
    {{end}}

    {{if .Summaries}}
    <section class="section" aria-labelledby="summaries-title">
      <div class="section__head">
        <h2 id="summaries-title" class="heading-2">Briefs</h2>
        <span class="category-pill"><span class="dot dot--faint"></span>{{len .Summaries}}</span>
      </div>
      <ul class="item-list">
        {{range .Summaries}}
        <li class="item" id="summary-{{.ID}}">
          <div class="item__body">
            <p class="item__title">{{.Recipient}} · {{.Sent}}</p>
            <p class="item__meta"><span class="item__subject">built {{.Created}}</span></p>
            <pre class="brief">{{.Text}}</pre>
          </div>
          <form class="item__actions" method="post" action="/summaries/{{.ID}}/delete"
                hx-post="/summaries/{{.ID}}/delete" hx-target="closest .item" hx-swap="delete"
                hx-confirm="Delete this brief?">
            <input type="hidden" name="csrf" value="{{$.CSRF}}">
            <button class="button-utility button-utility--danger" type="submit">Delete</button>
          </form>
        </li>
        {{end}}
      </ul>
    </section>
    {{end}}
  </main>

  <footer class="app-foot">
    <span>Compass / Teams · {{.Version}} · {{.AppEnv}}</span>
    <span class="app-foot__sep">·</span>
    <span>up {{.ServerUp}}</span>
    <span class="app-foot__sep">·</span>
    <span>{{year}} Family Home Lab</span>
  </footer>
</body>
</html>{{end}}