{% extends "base.html" %} {% block content %}
<div class="container-fluid">
  <!-- Page Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0 text-primary">Orchestrator Monitor</h2>
    <button
      class="btn btn-sm btn-outline-primary"
      hx-get="/orchestrator/refresh"
      hx-target="#orchestrator-stats"
      hx-swap="innerHTML"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-arrow-clockwise"
        viewBox="0 0 16 16"
      >
        <path
          fill-rule="evenodd"
          d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
        />
        <path
          d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
        />
      </svg>
      Refresh
    </button>
  </div>

  <!-- Orchestrator Type -->
  <div class="row mb-3">
    <div class="col-12">
      <div class="info-card">
        <h6 class="section-title">Orchestrator Type</h6>
        <p class="mb-0 fw-semibold">{{ orchestrator_info.type }}</p>
      </div>
    </div>
  </div>

  <!-- Configuration, Stats, and Runners Grid -->
  <div class="row g-3">
    <!-- Configuration Card -->
    <div class="col-md-4">
      <div class="metric-card">
        <h6 class="section-title">Configuration</h6>
        <div class="metric-grid">
          <div class="metric-item">
            <span class="metric-label">Blocking Control</span>
            <span
              class="badge {% if orchestrator_info.blocking_control_enabled %}bg-success{% else %}bg-secondary{% endif %}"
            >
              {{ 'Enabled' if orchestrator_info.blocking_control_enabled else
              'Disabled' }}
            </span>
          </div>
          <div class="metric-item">
            <span class="metric-label">Auto Purge (hours)</span>
            <span class="badge bg-info"
              >{{ orchestrator_info.auto_purge_hours }}</span
            >
          </div>
        </div>
      </div>

      <!-- Recovery & Atomic Services -->
      <div class="metric-card mt-3">
        <h6 class="section-title">Recovery &amp; Atomic Services</h6>
        <div class="metric-grid">
          <div class="metric-item">
            <span class="metric-label">Atomic Svc Interval</span>
            <span class="badge bg-info"
              >{{ recovery_info.atomic_service_interval }}m</span
            >
          </div>
          <div class="metric-item">
            <span class="metric-label">Spread Margin</span>
            <span class="badge bg-info"
              >{{ recovery_info.atomic_service_spread_margin }}m</span
            >
          </div>
          <div class="metric-item">
            <span class="metric-label">Check Interval</span>
            <span class="badge bg-info"
              >{{ recovery_info.atomic_service_check_interval }}m</span
            >
          </div>
          <div class="metric-item">
            <span class="metric-label">Recover Pending</span>
            <span
              class="d-inline-flex flex-column align-items-end"
              style="line-height: 1.1"
            >
              <span class="text-muted" style="font-size: 9px"
                >{{ recovery_info.recover_pending_human }}</span
              >
              <span
                class="badge bg-info"
                style="font-family: monospace; font-size: 10px"
                >{{ recovery_info.recover_pending_cron }}</span
              >
            </span>
          </div>
          <div class="metric-item">
            <span class="metric-label">Max Pending</span>
            <span class="badge bg-info"
              >{{ recovery_info.max_pending_seconds }}s</span
            >
          </div>
          <div class="metric-item">
            <span class="metric-label">Recover Running</span>
            <span
              class="d-inline-flex flex-column align-items-end"
              style="line-height: 1.1"
            >
              <span class="text-muted" style="font-size: 9px"
                >{{ recovery_info.recover_running_human }}</span
              >
              <span
                class="badge bg-info"
                style="font-family: monospace; font-size: 10px"
                >{{ recovery_info.recover_running_cron }}</span
              >
            </span>
          </div>
          <div class="metric-item">
            <span class="metric-label">Runner Dead After</span>
            <span class="badge bg-info"
              >{{ recovery_info.runner_dead_after_minutes }}m</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Stats Section -->
    <div class="col-md-4">
      <div id="orchestrator-stats">
        {% include "orchestrator/partials/stats.html" %}
      </div>
    </div>

    <!-- Active Runners Section -->
    <div class="col-md-4">
      <div class="metric-card">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h6 class="section-title mb-0">Active Runners</h6>
          <a href="/runners" class="btn btn-sm btn-outline-primary">View All</a>
        </div>
        <div class="metric-grid">
          <div class="metric-item">
            <span class="metric-label">Total Active</span>
            <span class="badge bg-success">{{ total_runners }}</span>
          </div>
          {% if active_runners %}
          <div class="mt-2">
            <p class="small text-muted mb-1">Recent Runners:</p>
            {% for runner in active_runners[:3] %}
            <div class="small mb-1">
              <code class="text-muted">{{ runner.runner_id[:30] }}...</code>
            </div>
            {% endfor %} {% if total_runners > 3 %}
            <p class="small text-muted mb-0">
              ...and {{ total_runners - 3 }} more
            </p>
            {% endif %}
          </div>
          {% else %}
          <div class="text-center py-2">
            <p class="small text-muted mb-0">No active runners</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="info-card text-center">
        <h6 class="section-title">Quick Actions</h6>
        <div class="d-flex justify-content-center gap-2 flex-wrap">
          <a href="/invocations" class="btn btn-outline-primary btn-sm"
            >View All Invocations</a
          >
          <a href="/tasks" class="btn btn-outline-info btn-sm"
            >View All Tasks</a
          >
          <a href="/runners" class="btn btn-outline-success btn-sm"
            >View Active Runners</a
          >
          <button
            class="btn btn-outline-warning btn-sm"
            hx-post="/orchestrator/auto-purge"
            hx-confirm="This will purge all completed invocations older than the auto-purge threshold. Continue?"
          >
            Run Auto-Purge
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}