{% extends "base.html" %} {% block content %}
<div class="container-fluid mt-4">
  <div class="row">
    <div class="col-md-2">
      {% include "invocations/partials/timeline_filters.html" %}
    </div>

    <div class="col-md-10">
      <div class="card">
        <div class="card-header py-2">
          <h5 class="mb-0">Invocations Timeline</h5>
        </div>
        <div class="card-body p-2">
          <!-- SVG Timeline Container -->
          <div id="timeline-container" class="timeline-svg-container" style="overflow-x: auto; overflow-y: auto; width: 100%;">
            {{ svg_content|safe }}
          </div>

          {% if not svg_content or 'No data' in svg_content %}
            <div class="alert alert-warning mt-3">
              No invocations found for the selected time range.
            </div>
          {% endif %}
        </div>
      </div>

      {% include "invocations/partials/timeline_details_panel.html" %}
    </div>
  </div>
</div>

{% include "partials/ft_float_panel.html" %}

{% include "invocations/partials/timeline_scripts.html" %}

{% endblock %}