{% extends "base.html" %}
{% block title %}Activity - Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h2>Activity</h2>
    <span class="page-subtitle">Timeline of health checks, discoveries, and status changes across all resources</span>
  </div>
  <div class="page-header-right">
    <select class="form-select form-select--auto" onchange="window.location='?range='+this.value">
      <option value="24h" {{ 'selected' if range == '24h' }}>Last 24 hours</option>
      <option value="7d" {{ 'selected' if range == '7d' }}>Last 7 days</option>
      <option value="30d" {{ 'selected' if range == '30d' }}>Last 30 days</option>
    </select>
  </div>
</div>

{% if events %}
<div class="timeline">
  {% for event in events %}
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--{{ event.severity or 'info' }}"></div>
    <div class="timeline-content">
      <div class="timeline-time" data-timestamp="{{ event.created_at }}">{{ event.created_at }}</div>
      <div class="timeline-title">
        <span class="badge badge--{{ event.severity or 'unknown' }} text-xs">{{ event.type }}</span>
        <a href="{{ event.link }}">{{ event.resource_name }}</a>
        {% if event.summary %} &mdash; {{ event.summary }}{% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <svg class="empty-state-icon" aria-hidden="true" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="24" cy="24" r="20"/><path d="M24 14v10l7 4"/></svg>
  <h3>No activity yet</h3>
  <p class="text-muted">Events appear here as health checks run and reports are generated.</p>
  <div class="mt-4"><a href="/" class="btn">Go to Control Center</a></div>
</div>
{% endif %}
{% endblock %}