{% extends "base.html" %}
{% block title %}Overview | Suvra{% endblock %}
{% block content %}
<section class="page-head">
  <h1>Overview</h1>
  <p class="muted">Execution posture and recent guardrail activity.</p>
</section>

{% if onboarding_banner %}
<p class="flash">{{ onboarding_banner }}</p>
{% endif %}

{% if onboarding and onboarding.show_banner %}
<section class="panel onboarding-banner">
  <div class="panel-head">
    <div>
      <h2>Guided Enterprise Onboarding</h2>
      <p class="muted">Complete the conservative first-run path for <code>{{ onboarding.tenant_id }}</code>.</p>
    </div>
    <a class="btn" href="/dashboard/onboarding">Open checklist</a>
  </div>
  <div class="progress-strip" aria-label="Onboarding progress">
    <div class="progress-strip-fill" style="width: {{ onboarding.percent_complete }}%;"></div>
  </div>
  <p class="muted">{{ onboarding.completed_steps }} of {{ onboarding.total_steps }} steps complete.</p>
  <div class="checklist-inline">
    {% for step in onboarding.steps %}
    <span class="check-pill {{ 'is-complete' if step.complete else 'is-pending' }}">{{ "Done" if step.complete else "Next" }} · {{ step.title }}</span>
    {% endfor %}
  </div>
</section>
{% endif %}

<section class="kpi-grid">
  <article class="kpi-card">
    <h2>Total Events</h2>
    <p class="kpi-value">{{ counts.total_events }}</p>
  </article>
  <article class="kpi-card">
    <h2>Pending Approvals</h2>
    <p class="kpi-value">{{ counts.pending_approvals }}</p>
    <a href="/dashboard/approvals?status=pending">View approvals &rarr;</a>
  </article>
  <article class="kpi-card">
    <h2>Allows</h2>
    <p class="kpi-value">{{ counts.allow }}</p>
  </article>
  <article class="kpi-card">
    <h2>Denies</h2>
    <p class="kpi-value">{{ counts.deny }}</p>
  </article>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>Recent Activity</h2>
    <a class="btn btn-secondary" href="/dashboard/audit">View full audit</a>
  </div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Time</th>
        <th>Agent</th>
        <th>Action</th>
        <th>Target</th>
        <th>Decision</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for event in recent_events %}
      <tr>
        <td data-utc="{{ event.created_at }}">{{ event.created_at }}</td>
        <td>{{ event.agent_display }}</td>
        <td>{{ event.title }}</td>
        <td><code>{{ event.target }}</code></td>
        <td><span class="badge {{ 'allow' if event.decision == 'allow' else ('deny' if event.decision == 'deny' else 'needs') }}">{{ event.decision }}</span></td>
        <td><span class="badge status-{{ event.status|replace('_', '-') }}">{{ event.status }}</span></td>
      </tr>
      {% else %}
      <tr>
        <td colspan="6" class="muted">No audit events yet.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}