{% extends "base.html" %} {% 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"
            >Invocation {{ invocation.invocation_id }}</span
          >
          <div>
            <a
              href="/invocations"
              class="btn btn-sm btn-outline-secondary me-2 pynmon-action-btn"
            >
              Back to Invocations
            </a>
            <a
              href="/calls?call_id={{ call.call_id|urlencode }}"
              class="btn btn-sm btn-outline-info me-2 pynmon-action-btn"
            >
              View Call
            </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">
            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Invocation information
                </div>
                <div class="card-body pynmon-card-body">
                  <table class="table pynmon-table">
                    <tbody>
                      <tr>
                        <th>Status:</th>
                        <td>
                          <span
                            class="badge {% if invocation.status.name == 'SUCCESS' %}bg-success {% elif invocation.status.name == 'FAILED' %}bg-danger {% elif invocation.status.name == 'RUNNING' %}bg-primary {% elif invocation.status.name == 'PENDING' %}bg-warning {% elif invocation.status.name == 'PAUSED' %}bg-info {% elif invocation.status.name == 'RETRY' %}bg-secondary {% else %}bg-dark{% endif %}"
                          >
                            {{ invocation.status.name }}
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <th>Retries:</th>
                        <td>{{ invocation.num_retries }}</td>
                      </tr>
                      <tr>
                        <th>Parent Invocation:</th>
                        <td>
                          {% if invocation.parent_invocation %}
                          <a
                            href="/invocations/{{ invocation.parent_invocation.invocation_id }}"
                          >
                            {{ invocation.parent_invocation.invocation_id[:8]
                            }}...
                          </a>
                          {% else %}
                          <span class="text-muted">None</span>
                          {% endif %}
                        </td>
                      </tr>
                      <tr>
                        <th>Created At:</th>
                        <td>{{ created_at }}</td>
                      </tr>
                      {% if completed_at %}
                      <tr>
                        <th>Completed At:</th>
                        <td>{{ completed_at }}</td>
                      </tr>
                      {% endif %} {% if duration %}
                      <tr>
                        <th>Duration:</th>
                        <td>{{ duration }}</td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Call & task information
                </div>
                <div class="card-body pynmon-card-body">
                  <table class="table pynmon-table">
                    <tbody>
                      <tr>
                        <th>Call ID:</th>
                        <td>
                          <a
                            href="/calls/?call_id={{ call.call_id|urlencode }}"
                          >
                            {{ call.call_id.split('#')[-1][:8] if '#' in
                            call.call_id else call.call_id[:8] }}...
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th>Task ID:</th>
                        <td>
                          <a href="/tasks/{{ task.task_id }}">
                            {{ task.task_id }}
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th>Task Module:</th>
                        <td>{{ task_extra.module }}</td>
                      </tr>
                      <tr>
                        <th>Task Function:</th>
                        <td>{{ task_extra.func_qualname }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="row pynmon-row-compact">
            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Arguments
                </div>
                <div class="card-body pynmon-card-body">
                  {% if arguments %} {% with args=arguments,
                  id_prefix='invocation-args' %} {% include
                  "partials/formatted_arguments.html" %} {% endwith%} {% else %}
                  <p class="text-muted data-text">No arguments provided</p>
                  {% endif %}
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Result / exception
                </div>
                <div class="card-body pynmon-card-body">
                  {% if result is not none %}
                  <h6 class="text-success">Result:</h6>
                  <div class="result-container">
                    <pre class="result-content"><code>{{ result }}</code></pre>
                  </div>
                  {% elif exception is not none %}
                  <h6 class="text-danger">Exception:</h6>
                  <div class="result-container">
                    <pre
                      class="result-content"
                    ><code>{{ exception }}</code></pre>
                  </div>
                  {% else %}
                  <p class="text-muted">No result or exception available.</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>

          <!-- New section for history timeline -->
          <div class="row pynmon-row-compact">
            <div class="col-12">
              <div class="card pynmon-card">
                <div class="card-header pynmon-card-header compact-header">
                  Status timeline
                </div>
                <div class="card-body pynmon-card-body">
                  {% if history %}
                  <div class="timeline compact-timeline">
                    {% for entry in history %}
                    <div class="timeline-item compact-timeline-item">
                      <div
                        class="timeline-marker {% if entry.status == 'SUCCESS' %}bg-success{% elif entry.status == 'FAILED' %}bg-danger{% elif entry.status == 'RUNNING' %}bg-primary{% elif entry.status == 'PENDING' %}bg-warning{% elif entry.status == 'PAUSED' %}bg-info{% elif entry.status == 'RETRY' %}bg-secondary{% else %}bg-dark{% endif %}"
                      ></div>
                      <div class="timeline-content compact-timeline-content">
                        <div class="timeline-title compact-timeline-title">
                          <span
                            class="badge {% if entry.status == 'SUCCESS' %}bg-success{% elif entry.status == 'FAILED' %}bg-danger{% elif entry.status == 'RUNNING' %}bg-primary{% elif entry.status == 'PENDING' %}bg-warning{% elif entry.status == 'PAUSED' %}bg-info{% elif entry.status == 'RETRY' %}bg-secondary{% else %}bg-dark{% endif %}"
                          >
                            {{ entry.status }}
                          </span>
                        </div>
                        <div class="timeline-date metadata-text">
                          {{ entry.timestamp }}
                        </div>
                        {% if entry.execution_context %}
                        <div class="timeline-text data-text">
                          {{ entry.execution_context }}
                        </div>
                        {% endif %}
                      </div>
                    </div>
                    {% endfor %}
                  </div>
                  {% else %}
                  <p class="text-muted data-text">No history available.</p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Timeline styling */
    .timeline {
      position: relative;
      padding-left: 40px;
      margin-bottom: 20px;
    }

    .timeline:before {
      content: "";
      position: absolute;
      left: 15px;
      top: 0;
      height: 100%;
      width: 2px;
      background: #e9ecef;
    }

    .timeline-item {
      position: relative;
      margin-bottom: 20px;
    }

    .timeline-marker {
      position: absolute;
      left: -35px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      top: 0;
    }

    .timeline-content {
      padding-bottom: 10px;
    }

    .timeline-title {
      margin-top: 0;
      font-size: 16px;
    }

    .timeline-date {
      color: #6c757d;
      font-size: 14px;
      margin-bottom: 0.5rem;
    }

    .result-container {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      background-color: #f8f9fa;
    }

    .result-content {
      margin: 0;
      padding: 10px;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 0.875rem;
    }
  </style>
  {% endblock %}
</div>
