{% extends "base.html" %}
{% block title %}Dashboards — TraceBi{% endblock %}

{% block content %}
<div class="page-title">Dashboards</div>
<p class="page-sub">Live interactive dashboards with associative filtering.</p>

{% if dashboards %}
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;">
  {% for d in dashboards %}
  <div class="card" style="display:flex; flex-direction:column; gap:12px;">
    <div>
      <div style="font-size:15px; font-weight:700; color:var(--navy);">{{ d.name }}</div>
      {% if d.description %}
      <div style="font-size:12px; color:var(--muted); margin-top:4px;">{{ d.description }}</div>
      {% endif %}
    </div>
    <a href="/dashboards/{{ d.name }}/" target="_blank"
       class="btn btn-primary" style="align-self:flex-start;">
      &#9654; Open Dashboard
    </a>
  </div>
  {% endfor %}
</div>

{% else %}
<div class="empty">
  <div class="empty-icon">&#9783;</div>
  <p>No dashboards registered yet.</p>
  <p style="margin-top:8px;">Use <code>registry.add_dashboard(name, DashboardServer(...))</code> in your app module.</p>
</div>
{% endif %}
{% endblock %}