{% extends "base.html" %}
{% block title %}Cassandra · Dashboard{% endblock %}

{% block main %}
<section id="indicators-panel" class="panel">
  <div class="panel-header">
    <span class="title">Indicators</span>
    <span class="meta">{% if anchor %}anchor {{ anchor }} · {% endif %}ingest hourly @ :05 UTC</span>
  </div>
  <div class="group-tabs" id="group-tabs">
    {% for g in groups %}
    <button
      class="{% if loop.first %}active{% endif %}"
      hx-get="/api/indicators/{{ g }}?as=html"
      hx-target="#indicators-body"
      hx-trigger="click"
      onclick="document.querySelectorAll('#group-tabs button').forEach(b=>b.classList.remove('active'));this.classList.add('active')"
    >{{ g }}</button>
    {% endfor %}
  </div>
  <div id="indicators-body"
       class="panel-body panel-body--scroll"
       hx-get="/api/indicators/{{ groups[0] }}?as=html"
       hx-trigger="load"
       hx-swap="innerHTML">
    <div class="empty">loading…</div>
  </div>
</section>
<script>
  // Auto-refresh the *currently selected* group every 60s by simulating a
  // click on the active tab. Replaces the hard-coded `every 60s` on
  // #indicators-body which always re-fetched groups[0].
  setInterval(function () {
    var active = document.querySelector('#group-tabs button.active');
    if (active) active.click();
  }, 60000);
</script>

<section id="portfolio-panel" class="panel">
  <div class="panel-header">
    <span class="title">Portfolio</span>
    <span class="meta">ingest hourly @ :15 UTC</span>
  </div>
  <div class="panel-body"
       hx-get="/api/portfolios?as=html"
       hx-trigger="load, every 60s"
       hx-swap="innerHTML">
    <div class="empty">loading…</div>
  </div>
</section>

<section id="log-panel" class="panel">
  <div class="panel-header">
    <span class="title">Strategic Log</span>
    <span class="meta">generated hourly @ :20 UTC</span>
  </div>
  <div class="panel-body"
       hx-get="/api/log/latest?as=html"
       hx-trigger="load, every 300s"
       hx-swap="innerHTML">
    <div class="empty">awaiting first log…</div>
  </div>
</section>

<section id="news-panel" class="panel">
  <div class="panel-header">
    <span class="title">Flash News</span>
    <span class="meta">last 24h · ingest hourly @ :10 UTC</span>
  </div>
  <div class="panel-body panel-body--scroll"
       hx-get="/api/news?as=html&limit=40"
       hx-trigger="load, every 60s"
       hx-swap="innerHTML">
    <div class="empty">loading…</div>
  </div>
</section>
{% endblock %}