<!-- Invocation details slide-in panel, populated via JS after clicking an SVG element -->
<div id="invocation-details-panel" class="mt-4 d-none">
  <div class="card">
    <div
      class="card-header d-flex justify-content-between align-items-center py-2"
    >
      <h6 class="mb-0">Invocation Details</h6>
      <button
        type="button"
        class="btn-close btn-sm"
        aria-label="Close"
        id="close-details"
      ></button>
    </div>
    <div class="card-body">
      <div id="invocation-details-content">
        <div class="d-flex justify-content-center">
          <div
            class="spinner-border spinner-border-sm text-primary"
            role="status"
          >
            <span class="visually-hidden">Loading...</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer py-2 d-flex gap-2">
      <a href="#" id="view-full-details" class="btn btn-primary btn-sm"
        >View Full Details</a
      >
      <button
        type="button"
        id="zoom-to-invocation"
        class="btn btn-outline-secondary btn-sm"
      >
        Zoom to Invocation
      </button>
    </div>
  </div>
</div>
