<div class="row g-3">
  <!-- Configuration Card -->
  <div class="col-md-6">
    <div class="metric-card">
      <h6 class="section-title">Configuration</h6>
      <div class="metric-grid">
        <div class="metric-item">
          <span class="metric-label">Type</span>
          <span class="metric-value">{{ broker_info.type }}</span>
        </div>
        <div class="metric-item">
          <span class="metric-label">Pending Invocations</span>
          <span
            class="badge {% if broker_info.pending_count > 0 %}bg-warning{% else %}bg-success{% endif %}"
          >
            {{ broker_info.pending_count }}
          </span>
        </div>
      </div>

      <div class="mt-3">
        <button
          class="btn btn-outline-danger btn-sm w-100"
          hx-post="/broker/purge"
          hx-confirm="Are you sure you want to purge all pending invocations?"
        >
          Purge Queue
        </button>
      </div>
    </div>
  </div>

  <!-- Queue Status Card -->
  <div class="col-md-6">
    <div class="metric-card text-center">
      <h6 class="section-title">Queue Status</h6>
      <div class="py-3">
        <div
          class="display-6 fw-bold {% if broker_info.pending_count > 0 %}text-warning{% else %}text-success{% endif %}"
        >
          {{ broker_info.pending_count }}
        </div>
        <div class="text-muted small">Pending Invocations</div>

        {% if broker_info.pending_count > 0 %}
        <div class="mt-2">
          <small class="text-warning">
            <span
              class="material-icons"
              style="font-size: 16px; vertical-align: text-bottom"
              >warning</span
            >
            Queue is not empty
          </small>
        </div>
        <div class="mt-2">
          <a href="/broker/queue" class="btn btn-outline-primary btn-sm">
            View Queue Details
          </a>
        </div>
        {% else %}
        <div class="mt-2">
          <small class="text-success">
            <span
              class="material-icons"
              style="font-size: 16px; vertical-align: text-bottom"
              >check_circle</span
            >
            Queue is empty
          </small>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
