{% extends "base.html" %}
{% block content %}
<div class="card-grid three">
  <article class="card accent-amber"><p class="card-label">Traces</p><h2>{{ stats.traces }}</h2></article>
  <article class="card accent-blue"><p class="card-label">Spans</p><h2>{{ stats.spans }}</h2></article>
  <article class="card accent-green"><p class="card-label">Services</p><h2>{{ stats.services }}</h2></article>
</div>

<div class="card-grid two">
  <section class="card">
    <h3>Recent traces</h3>
    <div class="chart" data-plot='{{ plot | tojson }}'></div>
  </section>
  <section class="card">
    <h3>Service topology</h3>
    <div class="chart" data-plot='{{ topology | tojson }}'></div>
  </section>
</div>

<div class="card-grid two">
  <section class="card">
    <h3>Traces</h3>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Trace</th><th>Service</th><th>Duration</th></tr></thead>
        <tbody>
          {% for trace in traces %}
          <tr><td><a href="/otel/traces/{{ trace.trace_id }}">{{ trace.trace_id }}</a></td><td>{{ trace.root_service_name }}</td><td>{{ trace.duration_ms }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  <section class="card">
    <h3>Logs</h3>
    <div class="stack">
      {% for log in logs %}
      <article class="mini-card">
        <strong>{{ log.service_name }} · {{ log.severity_text }}</strong>
        <p>{{ log.body }}</p>
      </article>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}