internet_use_control/internal/web/templates/lists-editor.html

{{define "lists-editor.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}} — Internet Use Control</title>
  <link rel="stylesheet" href="/static/tokens.css">
  <link rel="stylesheet" href="/static/app.css">
</head>
<body class="app">
  <nav class="nav-bar">
    <a class="nav-bar__brand" href="/">
      <span class="nav-bar__mark" aria-hidden="true"></span>
      Internet Use Control
    </a>
    <div class="nav-bar__right">
      <span class="nav-bar__user">{{.Username}}</span>
    </div>
  </nav>

  <main class="container">
    <header class="page-head">
      <p class="page-head__eyebrow"><a href="/">← Dashboard</a></p>
      <h1 class="heading-1">{{.Heading}}</h1>
      <p class="page-head__sub">{{.Sub}}</p>
    </header>

    {{if .Flash}}<p class="flash flash--ok" role="status">{{.Flash}}</p>{{end}}
    {{if .Error}}<p class="flash flash--error" role="alert">{{.Error}}</p>{{end}}

    <section class="schedule-note">
      <p class="schedule-note__hint">{{.PlatformHint}}</p>
      <p class="schedule-note__hint">While a window is active or the device is locked, everything on the
        blocklist is blocked <strong>except</strong> the allowlist. The allowlist is the exception list.</p>
    </section>

    <div class="list-grid">
      <section class="card-panel list-panel" aria-labelledby="blocked-title">
        <h2 id="blocked-title" class="heading-2">Blocked</h2>
        <p class="list-panel__sub">Blocked during a window or lock.</p>
        <form method="post" action="/devices/{{.DeviceID}}/lists" class="list-add">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <input type="hidden" name="table" value="block">
          <select class="select-input" name="kind" aria-label="Blocked entry kind">
            <option value="app">app</option>
            <option value="site">site</option>
          </select>
          <input class="text-input" type="text" name="value" placeholder="com.youtube.android or youtube.com"
                 maxlength="200" required spellcheck="false" autocapitalize="none">
          <button class="button-primary" type="submit">Add</button>
        </form>
        <ul class="list-entries">
          {{range .Block}}
          <li class="list-entry">
            <span class="list-entry__kind">{{.KindLabel}}</span>
            <code class="list-entry__value">{{.Value}}</code>
            <form method="post" action="/devices/{{$.DeviceID}}/lists/{{.ID}}/delete" class="list-entry__remove">
              <input type="hidden" name="csrf" value="{{$.CSRF}}">
              <input type="hidden" name="table" value="block">
              <button class="button-utility" type="submit" aria-label="Remove {{.Value}} from the blocklist">Remove</button>
            </form>
          </li>
          {{else}}
          <li class="list-entry list-entry--empty">Nothing blocked yet.</li>
          {{end}}
        </ul>
      </section>

      <section class="card-panel list-panel" aria-labelledby="allowed-title">
        <h2 id="allowed-title" class="heading-2">Allowed</h2>
        <p class="list-panel__sub">Stays available while a block is active.</p>
        <form method="post" action="/devices/{{.DeviceID}}/lists" class="list-add">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <input type="hidden" name="table" value="allow">
          <select class="select-input" name="kind" aria-label="Allowed entry kind">
            <option value="app">app</option>
            <option value="site">site</option>
          </select>
          <input class="text-input" type="text" name="value" placeholder="com.spotify.music"
                 maxlength="200" required spellcheck="false" autocapitalize="none">
          <button class="button-primary" type="submit">Add</button>
        </form>
        <ul class="list-entries">
          {{range .Allow}}
          <li class="list-entry">
            <span class="list-entry__kind">{{.KindLabel}}</span>
            <code class="list-entry__value">{{.Value}}</code>
            <form method="post" action="/devices/{{$.DeviceID}}/lists/{{.ID}}/delete" class="list-entry__remove">
              <input type="hidden" name="csrf" value="{{$.CSRF}}">
              <input type="hidden" name="table" value="allow">
              <button class="button-utility" type="submit" aria-label="Remove {{.Value}} from the allowlist">Remove</button>
            </form>
          </li>
          {{else}}
          <li class="list-entry list-entry--empty">Nothing allowed yet.</li>
          {{end}}
        </ul>
      </section>
    </div>

    <div class="form-actions">
      <a class="button-utility" href="/devices/{{.DeviceID}}/schedule">Weekly schedule</a>
      <a class="button-utility" href="/">Done</a>
    </div>
  </main>

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