email_agent/web/templates/inbox.html

<div class="scan-note-slot">
  {{if .Note}}<div class="scan-note" role="status">{{.Note}}</div>{{end}}
  {{if .Error}}<div class="scan-note scan-note-error" role="alert">{{.Error}}</div>{{end}}
</div>

<div class="bulk-toolbar" aria-label="Bulk actions">
  <label class="bulk-check">
    <input type="checkbox" id="select-all">
    <span>Select all</span>
  </label>
  <span class="selected-count" id="selected-count">0 selected</span>
  <div class="bulk-actions">
    <button type="button" class="btn btn-utility btn-danger"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"delete","confirm":"yes","spam_confirm":"yes"}'
            hx-confirm="Move the selected messages to the Delete folder? They can be restored from there. This applies to every selected row, including anything classified Spam.">
      Delete
    </button>
    <button type="button" class="btn btn-utility"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"save"}'>
      Save
    </button>
    <button type="button" class="btn btn-utility"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"reply"}'>
      Mark replied
    </button>
    <button type="button" class="btn btn-utility"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"mark_read"}'>
      Mark read
    </button>
    <button type="button" class="btn btn-utility"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"mark_unread"}'>
      Mark unread
    </button>
    <button type="button" class="btn btn-utility"
            hx-post="/actions/bulk" hx-include="#bulk-items" hx-target="#inbox-list" hx-swap="innerHTML"
            hx-vals='{"action":"star"}'>
      Star
    </button>
  </div>
  <span class="view-label">{{.FolderLabel}}</span>
</div>

<div id="bulk-items">
  <input type="hidden" id="bulk-csrf" name="csrf" value="{{.CSRFToken}}">
  <input type="hidden" name="folder" value="{{.Folder}}">
  <input type="hidden" name="category" value="{{.Category}}">

  {{if .Groups}}
    {{range .Groups}}
    <section class="msg-group" aria-label="{{.Name}}">
      <div class="msg-group-head">
        <span class="msg-group-name">{{.Name}}</span>
        <span class="count">{{len .Messages}}</span>
      </div>
      {{range .Messages}}
      <div class="msg-row">
        <input class="msg-select" type="checkbox" name="ids" value="{{.ID}}" aria-label="Select message from {{.From}}">
        <div class="msg-main">
          <div class="msg-from">{{.From}}</div>
          <button type="button" class="msg-subject msg-open"
                  hx-get="/partials/message?id={{.ID}}" hx-target="#message-detail" hx-swap="innerHTML">{{.Subject}}</button>
          {{if .SourceAddr}}<div class="msg-source">arrived at <span class="source-addr">{{.SourceAddr}}</span></div>{{end}}
        </div>
        <div class="msg-meta">
          <span class="pill action-pill">{{.Action}}</span>
          {{if .Classified}}<span class="msg-confidence" title="Classifier confidence">{{.Confidence}}%</span>{{end}}
          {{if .When}}<span class="msg-when">{{.When}}</span>{{end}}
          {{if .Restorable}}
          <button type="button" class="btn btn-utility btn-small"
                  hx-post="/actions/bulk" hx-include="#bulk-csrf" hx-target="#inbox-list" hx-swap="innerHTML"
                  hx-vals='{"action":"restore","confirm":"yes","ids":"{{.ID}}"}'>
            Restore
          </button>
          {{end}}
        </div>
      </div>
      {{end}}
    </section>
    {{end}}
  {{else}}
  <div class="empty-state">
    <div class="empty-title">Nothing in {{.FolderLabel}}</div>
    <p class="empty-copy">Use <strong>Check mail</strong> to fetch from Gmail, then <strong>Classify</strong> to let JEV sort each message.</p>
    <span class="pill">No messages</span>
  </div>
  {{end}}
</div>