{% extends "base.html" %} {% block content %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div
        class="card-header d-flex justify-content-between align-items-center"
      >
        <span>Broker Information</span>
        <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>
      <div class="card-body">
        <h5>App ID: {{ app_id }}</h5>

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

        <div class="mt-4">
          <div class="alert alert-info">
            <h5 class="alert-heading">About the Broker</h5>
            <p>
              The broker is responsible for message queuing and routing
              invocations to workers. It maintains a queue of pending
              invocations waiting to be processed.
            </p>
            <hr />
            <p class="mb-0">
              For more details on specific invocations, visit the
              <a href="/invocations" class="alert-link">Invocations</a> page.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
