{% extends "base.html" %}

{% 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) -->
      <div class="card mc-panel"
           hx-get="/swarm/agents/sidebar"
           hx-trigger="load, every 10s"
           hx-target="this"
           hx-swap="innerHTML">
        <div class="card-header mc-panel-header">// AGENTS</div>
        <div class="card-body p-3">
          <div style="font-size:11px; color:var(--text-dim); letter-spacing:.08em;">LOADING...</div>
        </div>
      </div>

      <!-- System Health (HTMX polled) -->
      <div class="card mc-panel"
           hx-get="/health/status"
           hx-trigger="load, every 30s"
           hx-target="this"
           hx-swap="innerHTML">
        <div class="card-header mc-panel-header">// SYSTEM HEALTH</div>
        <div class="card-body p-3">
          <div class="health-row">
            <span class="health-label">LOADING...</span>
          </div>
        </div>
      </div>

    </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/timmy/panel"
         hx-trigger="load"
         hx-target="#main-panel"
         hx-swap="outerHTML">
    </div>

  </div>
</div>

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

{% endblock %}