<script server>
let __d = null
try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
const server = __d?.server ?? { name: 'stacks-production-app' }
const security = __d?.security ?? {
  ports: [
    { proto: 'tcp', listen: '0.0.0.0:22', processName: 'sshd', exposure: 'public', tone: 'ok' },
    { proto: 'tcp', listen: '0.0.0.0:443', processName: 'rpx-gateway', exposure: 'public', tone: 'ok' },
  ],
  firewall: { status: 'configured', summary: 'host firewall configured declaratively', rules: ['ALLOW 22/tcp', 'ALLOW 80/tcp', 'ALLOW 443/tcp'] },
  tlsCertificates: [],
  authEvents: [],
}
const checks = __d?.diagnostics ?? []
function tone(status) {
  if (status === 'active' || status === 'configured' || status === 'ok' || status === 'pass') return 'ok'
  if (status === 'bad' || status === 'fail' || status === 'inactive' || status === 'disabled') return 'bad'
  return 'warn'
}
function certLabel(cert) {
  if (cert.daysRemaining == null) return cert.expires
  return `${cert.daysRemaining}d left`
}
</script>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>@include('../partials/head', { title: 'ts-cloud - Security' })</head>
<body>
  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
  <div class="wrap">
    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Security</div>
    <header class="page">
      <div><h1>Security</h1><p>Firewall state, listening ports, TLS expiry, and recent SSH auth events.</p></div>
      <div class="cmds header-actions"><a class="btn ghost sm" href="/server/firewall">Manage firewall →</a><span class="accent cmd">cloud server:secure {{ server.name }}</span></div>
    </header>

    <div class="grid cards-3">
      <div class="panel">
        <h3>Firewall</h3>
        <div class="stat"><span class="pill {{ tone(security.firewall.status) }}">{{ security.firewall.status }}</span></div>
        <p class="note">{{ security.firewall.summary }}</p>
      </div>
      <div class="panel">
        <h3>Open listeners</h3>
        <div class="stat">{{ security.ports.length }}</div>
        <p class="note">Loopback listeners are shown but not treated as public exposure.</p>
      </div>
      <div class="panel">
        <h3>TLS certificates</h3>
        <div class="stat">{{ security.tlsCertificates.length }}</div>
        <p class="note">Renew with <span class="mono">cloud server:ssl:renew &lt;domain&gt;</span>.</p>
      </div>
    </div>

    <div class="section">
      <h2>Listening ports</h2>
      @if (security.ports.length)
        <div class="port-grid">
          @foreach (security.ports as port)
            <div class="port-card">
              <div class="top"><span class="tag">{{ port.proto }}</span><span class="pill {{ port.tone }}">{{ port.exposure }}</span></div>
              <div class="listen mono">{{ port.listen }}</div>
              <div class="proc">{{ port.processName }}</div>
            </div>
          @endforeach
        </div>
      @else
        <div class="empty"><strong>No port data</strong><span>Live listener data appears after the dashboard can reach the box.</span></div>
      @endif
    </div>

    <div class="cols section">
      <div>
        <h2>Firewall rules</h2>
        <div class="panel">
          @if (security.firewall.rules.length)
            @foreach (security.firewall.rules as rule)
              <div class="kv"><span class="mono">{{ rule }}</span><b></b></div>
            @endforeach
          @else
            <div class="compact empty"><strong>No rules reported</strong><span>{{ security.firewall.summary }}</span></div>
          @endif
        </div>
      </div>
      <div>
        <h2>TLS certificates</h2>
        <div class="panel">
          @if (security.tlsCertificates.length)
            @foreach (security.tlsCertificates as cert)
              <div class="kv"><span class="mono">{{ cert.domain }}</span><b><span class="pill {{ cert.status }}">{{ certLabel(cert) }}</span></b></div>
            @endforeach
          @else
            <div class="compact empty"><strong>No domains with TLS</strong><span>Add a domain-backed site to see certificate status here.</span></div>
          @endif
        </div>
      </div>
    </div>

    <div class="section">
      <h2>Recent SSH auth</h2>
      <div class="panel">
        @if (security.authEvents.length)
          <div class="log-list">
            @foreach (security.authEvents as event)
              <div class="log-row {{ event.level }}">
                <div class="log-meta"><span>{{ event.when }}</span><span>{{ event.host }}</span><span class="pill {{ tone(event.level) }}">{{ event.level }}</span></div>
                <pre>{{ event.message }}</pre>
              </div>
            @endforeach
          </div>
        @else
          <div class="compact empty"><strong>No auth events</strong><span>Recent sshd journal entries will appear here when the live probe can read them.</span></div>
        @endif
      </div>
    </div>

    <div class="section">
      <h2>Security checks</h2>
      <div class="check-list panel">
        @foreach (checks as check)
          <div class="check {{ check.status === 'pass' ? '' : check.status }}"><span class="mark"></span><div><div class="name">{{ check.name }}</div><div class="detail">{{ check.detail }}</div></div></div>
        @endforeach
      </div>
    </div>
  </div>
</body>
</html>
