{{define "topbar"}}
<header class="topbar">
  <a class="brand" href="/portal" aria-label="Technology Architects Deployment Access">
    <span class="brand-logo"><img src="/static/ta-logo.svg" alt="Technology Architects"></span>
    <span class="product-context">
      <strong>TAPM</strong>
      <small>Deployment Access</small>
    </span>
    <span class="brand-fallback">TAPM</span>
  </a>
  <nav class="portal-nav" aria-label="Portal">
    <a href="/portal" {{if eq .CurrentView "codes"}}class="active" aria-current="page"{{end}}>Codes</a>
    <a href="/portal/packages" {{if eq .CurrentView "packages"}}class="active" aria-current="page"{{end}}>Packages</a>
    <a href="/portal/audit" {{if eq .CurrentView "audit"}}class="active" aria-current="page"{{end}}>Audit</a>
  </nav>
  <div class="operator">
    <span>{{.Technician.DisplayName}}</span>
    <form action="/auth/logout" method="post">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
      <button class="text-button" type="submit">Sign out</button>
    </form>
  </div>
</header>
{{end}}

{{define "audit-rows"}}
<div class="audit-table">
  <div class="audit-row audit-header" aria-hidden="true">
    <span>Event</span>
    <span>Customer / deployment</span>
    <span>User / host / package</span>
    <span>WAN / LAN / details</span>
  </div>
  {{range .AuditEvents}}
  <div class="audit-row">
    <div>
      <strong>{{.EventType}}</strong>
      <small>{{formatTime .CreatedAt}}</small>
    </div>
    <div>
      {{if .CustomerLabel}}<span>{{.CustomerLabel}}</span>{{else}}<span>—</span>{{end}}
    </div>
    <div>
      {{if .User}}<span>{{.User}}</span>{{end}}
      {{if .Hostname}}<span>{{.Hostname}}</span>{{end}}
      {{if .PackageSlug}}<span>{{.PackageSlug}}</span>{{end}}
    </div>
    <div>
      {{if .SourceIP}}<span>WAN: {{.SourceIP}}</span>{{end}}
      {{if .LANIP}}<span>LAN: {{.LANIP}}</span>{{end}}
      {{if and (not .SourceIP) (not .LANIP)}}<span>—</span>{{end}}
      {{if .Details}}<small>{{.Details}}</small>{{end}}
    </div>
  </div>
  {{else}}
  <p class="empty audit-empty">No security events match this view.</p>
  {{end}}
</div>
{{end}}