{% extends "base.html" %}
{% block title %}History: {{ resource.name }} - Supavision{% endblock %}
{% block content %}

<ul class="breadcrumb" aria-label="Breadcrumb">
  <li><a href="/">Resources</a></li>
  <li><a href="/resources/{{ resource.id }}">{{ resource.name }}</a></li>
  <li>History</li>
</ul>

<div class="page-header">
  <div class="page-header-left">
    <h2>History</h2>
    <span class="page-subtitle">{{ resource.name }} &mdash; all runs and baseline changes</span>
  </div>
  <div class="page-header-right">
    <a href="/resources/{{ resource.id }}" class="btn btn-outline">Back to Resource</a>
  </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>
        {% if event.summary %}{{ event.summary }}{% endif %}
        {% if event.report_id %}
        <a href="/reports/{{ event.report_id }}" class="text-sm ml-2">View report</a>
        {% endif %}
      </div>
      {% if event.error %}
      <div class="timeline-meta text-critical">{{ event.error[:120] }}</div>
      {% endif %}
      {% if event.is_baseline %}
      <div class="timeline-meta">Baseline updated to v{{ event.version }}</div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

{% if has_more %}
<div class="mt-4">
  <a href="/resources/{{ resource.id }}/history?page={{ page + 1 }}" class="btn btn-outline btn-sm">Load more</a>
</div>
{% endif %}

{% 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 history yet</h3>
  <p class="text-muted">Run a health check or discovery to start building a timeline.</p>
  <div class="mt-4"><a href="/resources/{{ resource.id }}" class="btn">Back to Resource</a></div>
</div>
{% endif %}

{% endblock %}