{% extends "base.html" %} {% from "partials/status_badge.html" import
status_badge %} {% 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">Call Details</span>
          <div>
            <a
              href="/invocations"
              class="btn btn-sm btn-outline-secondary me-2 pynmon-action-btn"
            >
              Back to Invocations
            </a>
            <a
              href="/tasks/{{ task.task_id }}"
              class="btn btn-sm btn-outline-primary pynmon-action-btn"
            >
              View Task
            </a>
          </div>
        </div>
        <div class="card-body pynmon-card-body">
          <div class="row pynmon-row-compact">
            <!-- Call Metadata - Left side (primary identifier) -->
            <div class="col-md-5">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Call Metadata
                </div>
                <div class="card-body pynmon-card-body">
                  <table class="table pynmon-table mb-0">
                    <tbody>
                      <tr>
                        <th style="width: 100px">Task:</th>
                        <td>
                          <a href="/tasks/{{ task.task_id.key }}"
                            >{{ task.task_id }}</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <th>Module:</th>
                        <td>{{ task.task_id.module }}</td>
                      </tr>
                      <tr>
                        <th>Function:</th>
                        <td>{{ task.task_id.func_name }}</td>
                      </tr>
                      <tr>
                        <th>Invocations:</th>
                        <td>
                          <span class="badge bg-secondary"
                            >{{ invocations|length }}</span
                          >
                        </td>
                      </tr>
                      <tr>
                        <th>Call ID:</th>
                        <td>
                          <code
                            class="text-muted"
                            style="font-size: 11px; word-break: break-all"
                          >
                            {{ call.call_id }}
                          </code>
                          <button
                            class="btn btn-sm btn-link p-0 ms-1"
                            onclick="navigator.clipboard.writeText('{{ call.call_id }}')"
                            title="Copy Call ID"
                          >
                            <span class="material-icons" style="font-size: 14px"
                              >content_copy</span
                            >
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- Arguments Card - Right side -->
            <div class="col-md-7">
              <div class="card pynmon-card">
                <div
                  class="card-header pynmon-card-header compact-header d-flex justify-content-between align-items-center"
                >
                  <span>Arguments</span>
                  {% if formatted_args %}
                  <button
                    class="btn btn-sm btn-outline-secondary"
                    data-bs-toggle="collapse"
                    data-bs-target="#full-args"
                  >
                    Show Raw
                  </button>
                  {% endif %}
                </div>
                <div class="card-body pynmon-card-body">
                  {% if formatted_args %}
                  <div class="mb-2">
                    {% with args=formatted_args, id_prefix='call-args' %} {%
                    include "partials/formatted_arguments.html" %} {% endwith %}
                  </div>
                  <div class="collapse mt-3" id="full-args">
                    <div class="bg-light p-2 rounded" style="font-size: 12px">
                      <pre
                        class="m-0"
                      ><code>{{ serialized_arguments }}</code></pre>
                    </div>
                  </div>
                  {% else %}
                  <p class="text-muted mb-0">No arguments</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>

          <!-- Invocations Table -->
          <div class="row pynmon-row-compact mt-2">
            <div class="col-12">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Invocations
                </div>
                <div class="card-body pynmon-card-body p-0">
                  {% if invocations %}
                  <div class="table-responsive">
                    <table class="table pynmon-table mb-0">
                      <thead>
                        <tr>
                          <th style="width: 50%">Invocation ID</th>
                          <th>Status</th>
                          <th>Retries</th>
                          <th style="width: 80px"></th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for invocation in invocations %}
                        <tr>
                          <td>
                            <a
                              href="/invocations/{{ invocation.invocation_id }}"
                            >
                              <code style="font-size: 12px"
                                >{{ invocation.invocation_id }}</code
                              >
                            </a>
                            <a
                              href="#"
                              class="ms-2 view-in-timeline-link"
                              data-invocation-id="{{ invocation.invocation_id }}"
                              title="View in timeline"
                            >
                              <span
                                class="material-icons"
                                style="
                                  font-size: 14px;
                                  vertical-align: middle;
                                  color: #28a745;
                                "
                                >timeline</span
                              >
                            </a>
                          </td>
                          <td>{{ status_badge(invocation.status.name) }}</td>
                          <td>{{ invocation.num_retries }}</td>
                          <td>
                            <a
                              href="/invocations/{{ invocation.invocation_id }}"
                              class="btn btn-sm btn-outline-primary"
                            >
                              Details
                            </a>
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% else %}
                  <p class="text-muted p-3 mb-0">
                    No invocations found for this call.
                  </p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_js %}
<script>
  // View in timeline functionality for invocation list items
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".view-in-timeline-link").forEach((link) => {
      link.addEventListener("click", function (e) {
        e.preventDefault();
        const invocationId = this.dataset.invocationId;

        // Fetch invocation history to get time range
        fetch(`/invocations/${invocationId}/history`)
          .then((response) => response.json())
          .then((historyData) => {
            if (!historyData || historyData.length === 0) {
              alert("No history data available for this invocation");
              return;
            }

            // Get first and last timestamp
            const startTime = new Date(historyData[0].timestamp);
            const endTime = new Date(
              historyData[historyData.length - 1].timestamp
            );

            // Add 10% padding on each side
            const durationMs = endTime - startTime;
            const paddingMs = Math.max(durationMs * 0.1, 1000); // At least 1 second padding

            const paddedStart = new Date(startTime.getTime() - paddingMs);
            const paddedEnd = new Date(endTime.getTime() + paddingMs);

            // Format for datetime-local input (YYYY-MM-DDTHH:MM:SS)
            const formatForInput = (date) => date.toISOString().slice(0, 19);

            // Build the timeline URL with custom range
            const params = new URLSearchParams();
            params.set("time_range", "custom");
            params.set("start_date", formatForInput(paddedStart));
            params.set("end_date", formatForInput(paddedEnd));

            // Navigate to timeline
            window.location.href = "/invocations/timeline?" + params.toString();
          })
          .catch((error) => {
            console.error("Error fetching history:", error);
            alert("Failed to load invocation history");
          });
      });
    });
  });
</script>
{% endblock %}