{% extends "base.html" %}
{% block title %}Resources - Supavision{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h2>Resources</h2>
    <span class="page-subtitle">Servers, databases, and cloud accounts that Supavision monitors</span>
  </div>
  <div class="page-header-right">
    <a href="/resources/new" class="btn">+ Add Resource</a>
  </div>
</div>

{% if resources %}
<div class="resource-cards">
  {% for r in resources %}
  <a href="/resources/{{ r.id }}" class="resource-card resource-card--{{ r.severity or 'unknown' }}{% if not r.enabled %} resource-card--disabled{% endif %}"
     data-resource-id="{{ r.id }}">
    <div class="resource-card__header">
      <span class="resource-card__name">{{ r.name }}</span>
      <div class="resource-card__badges">
        <span class="badge badge--type">{{ r.resource_type | replace('_', ' ') }}</span>
        {% if r.severity %}
        <span class="badge badge--{{ r.severity }}">{{ r.severity }}</span>
        {% else %}
        <span class="badge badge--unknown">no data</span>
        {% endif %}
      </div>
    </div>
    <div class="resource-card__body">
      <div class="resource-card__explanation">{{ r.explanation }}</div>
      <div class="resource-card__impact text-sm text-muted">{{ r.impact }}</div>
    </div>
    <div class="resource-card__footer">
      <span class="text-sm text-muted">
        <span class="freshness-dot freshness-dot--{{ r.freshness }}" aria-hidden="true"></span>
        <span {% if r.last_run_at %}data-timestamp="{{ r.last_run_at }}"{% endif %}>{% if r.last_run_at %}{{ r.last_run_at }}{% else %}Never checked{% endif %}</span>
      </span>
      <span class="btn btn-sm">{{ r.action_label }}</span>
    </div>
  </a>
  {% 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 14v20M14 24h20"/></svg>
  <h3>Add your first resource</h3>
  <p class="text-muted">Resources are the servers, databases, and cloud accounts Supavision monitors.</p>
  <div class="mt-4 empty-state-actions">
    <a href="/resources/new?type=server" class="btn" title="Connect via SSH to track health">Monitor a Server</a>
    <a href="/resources/new" class="btn btn-outline" title="AWS, Database, GitHub Org">More Options</a>
  </div>
</div>
{% endif %}
{% endblock %}