{% extends 'baseadmin.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}{{ parent() }} - Observations{% endblock %}

{% block breadcrumb %}
  {{ parent() }}
  <li class="breadcrumb-item active" aria-current="page">Observations</li>
{% endblock %}

{% block content %}
<div class="container-fluid px-0">
  <h1 class="h3 mb-4 text-light">Observations</h1>
  <div class="card shadow mb-4">
    <div class="card-body">
      <table class="table table-dark table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Alert</th>
            <th>Name</th>
            <th>Events</th>
            <th class="text-center">Duration (ms)</th>
            <th class="text-end">Peak Memory</th>
          </tr>
        </thead>
        <tbody>
          {% for obs in observations %}
            <tr id="eye={{ obs.id }}">
              <td>{{ obs.id }}</td>
              <td>
                {% if obs.duration > obs.expectedMaxTime %}
                  <i class="fas fa-exclamation-triangle text-warning"
                    {{ bs.tooltip('Took ' ~ (obs.duration * 1000)|number_format(1) ~ 'ms, expected ' ~ (obs.expectedMaxTime * 1000)|number_format(1) ~ 'ms', 'top') }}
                  ></i>
                {% endif %}
              </td>
              <td>
                <span class="badge bg-dark border">{{ obs.name }}</span>
              </td>
              <td>
                <ul class="mb-0 ps-0 list-unstyled">
                  <li>
                    <i class="fas fa-fw fa-play"></i>
                    <code class="text-light">Start</code> @ 0ms
                  </li>
                  {% for lap in obs.laps %} 
                    <li>
                      <i class="fas fa-fw fa-stopwatch"></i>
                      <code class="text-light">{{ lap.name }}</code> @ {{ (lap.duration * 1000)|number_format(1) }}ms
                    </li>
                  {% endfor %}
                  <li>
                    <i class="fas fa-fw fa-stop"></i>
                    <code class="text-light">End</code> @ {{ (obs.duration * 1000)|number_format(1) }}ms
                  </li>
                </ul>
              </td>
              <td class="text-center"><span class="badge bg-dark border">{{ (obs.duration * 1000)|number_format(1) }} ms</span></td>
              <td class="text-end"><span class="badge bg-dark border">{{ (obs.peakMemory / 1024 / 1024)|number_format(2) }} MB</span></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}