{% extends "base.html" %} {% block title %}Call: {{ call_id }} — Rustvello
Monitor{% endblock %} {% block content %}
<div class="pynmon-container">
  <div class="row">
    <div class="col-12">
      <div class="card pynmon-card">
        <div
          class="card-header pynmon-card-header d-flex justify-content-between align-items-center"
        >
          <span class="compact-header">
            <span
              class="material-icons align-middle me-1"
              style="font-size: 20px"
              >phone_callback</span
            >
            Call Detail
          </span>
          <a href="/invocations" class="btn btn-sm btn-outline-secondary">
            <span class="material-icons align-middle" style="font-size: 16px"
              >arrow_back</span
            >
            Back to Invocations
          </a>
        </div>
        <div class="card-body pynmon-card-body">
          <!-- Call Info -->
          <div class="row pynmon-row-compact">
            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header compact-header">Call Information</div>
                <div class="card-body">
                  <table class="table pynmon-table">
                    <tbody>
                      <tr>
                        <th>Call ID:</th>
                        <td>
                          <code style="font-size: 11px; word-break: break-all"
                            >{{ call_id }}</code
                          >
                        </td>
                      </tr>
                      {% if !task_id.is_empty() %}
                      <tr>
                        <th>Task:</th>
                        <td>
                          <a
                            href="/tasks/{{ task_id }}"
                            class="text-decoration-none"
                            >{{ task_id }}</a
                          >
                        </td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header compact-header">Summary</div>
                <div class="card-body">
                  <div class="metric-grid">
                    <div class="metric-item">
                      <span class="metric-label">Invocations</span>
                      <span class="badge bg-primary"
                        >{{ invocation_count }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Invocations -->
          <div class="row pynmon-row-compact">
            <div class="col-12">
              <div class="card pynmon-card">
                <div class="card-header compact-header">
                  <span>Invocations ({{ invocation_count }})</span>
                  <a href="{{ timeline_url }}" class="btn btn-sm btn-outline-success"><span class="material-icons align-middle" style="font-size:14px">timeline</span> Timeline</a>
                </div>
                <div class="card-body">
                  {% if !invocations.is_empty() %}
                  {% include "components/invocation_table.html" %}
                  {% include "components/pagination.html" %}
                  {% else %}
                  <p class="text-muted mb-0">
                    No invocations found for this call.
                  </p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}