{% extends "base.html" %}
{% from "macros.html" import panel %}

{% block content %}

<div class="container-fluid mc-content h-100">
  <div class="row g-3 h-100">

    <!-- Sidebar -->
    <div class="col-12 col-md-3 d-flex flex-column gap-3 mc-sidebar">

      <!-- Agents (HTMX-polled from registry) -->
      {% call panel("AGENTS", hx_get="/swarm/agents/sidebar", hx_trigger="every 10s") %}
        <div class="mc-loading-placeholder">LOADING...</div>
      {% endcall %}

      <!-- System Health (HTMX polled) -->
      {% call panel("SYSTEM HEALTH", hx_get="/health/status", hx_trigger="every 30s") %}
        <div class="health-row">
          <span class="health-label">LOADING...</span>
        </div>
      {% endcall %}

    </div>

    <!-- Main panel — swappable via HTMX; defaults to Timmy on load -->
    <div id="main-panel"
         class="col-12 col-md-9 d-flex flex-column mc-chat-panel"
         hx-get="/agents/default/panel"
         hx-trigger="load"
         hx-target="#main-panel"
         hx-swap="outerHTML">
    </div>

  </div>
</div>

<script>
  function scrollChat() {
    var log = document.getElementById('chat-log');
    if (log) {
      requestAnimationFrame(function() {
        log.scrollTop = log.scrollHeight;
      });
    }
  }
  function scrollAgentLog(id) {
    const log = document.getElementById('agent-log-' + id);
    if (log) log.scrollTop = log.scrollHeight;
  }
</script>

{% endblock %}