{% 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">Broker Monitor</h2>
    <div>
      <a href="/broker/queue" class="btn btn-sm btn-outline-secondary me-2">
        View Queue
      </a>
      <button
        class="btn btn-sm btn-outline-primary"
        hx-get="/broker/refresh"
        hx-target="#broker-info-content"
        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>
  </div>

  <!-- Content Grid -->
  <div id="broker-info-content">{% include "broker/partials/info.html" %}</div>

  <!-- About Section -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="info-card">
        <h6 class="section-title">About the Broker</h6>
        <p class="text-muted mb-2">
          The broker is responsible for message queuing and routing invocations
          to workers. It maintains a queue of pending invocations waiting to be
          processed.
        </p>
        <p class="text-muted mb-0">
          For more details on specific invocations, visit the
          <a href="/invocations" class="text-decoration-none">Invocations</a>
          page.
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}