{% extends "base.html" %}
{% block title %}Stats{% endblock %}
{% block content %}
<h1>Stats</h1>
{% if not sinks %}
<p class="muted">No connections yet. Patch a source into a sink on the Patch page first.</p>
{% else %}
<div class="filter-row">
  <label>Connection
    <select id="sink-select">
      {% for s in sinks %}
      <option value="{{ s.id }}">#{{ s.id }} {% if s.label %}{{ s.label }} - {% endif %}{% if s.type == 'public_sink' %}public {{ s.host or '0.0.0.0' }}{% elif s.type == 'tunnel_sink' %}{{ s.client or 'target' }} {{ s.iface or '?' }}{% else %}{{ s.client or '?' }} {{ s.host or '127.0.0.1' }}{% endif %}:{{ s.port }}/{{ s.proto }}</option>
      {% endfor %}
    </select>
  </label>
  <div class="segmented" role="group" aria-label="Time range" id="range-group">
    {% for r in ['1h', '24h', '7d', '30d', '1y', 'all'] %}
    <button type="button" data-range="{{ r }}" class="{{ 'selected' if r == '24h' }}">{{ r }}</button>
    {% endfor %}
  </div>
</div>

<div class="tiles">
  <div class="tile"><div class="tile-value" id="t-in">-</div><div class="tile-label">In now (towards source)</div></div>
  <div class="tile"><div class="tile-value" id="t-out">-</div><div class="tile-label">Out now (back to peer)</div></div>
  <div class="tile"><div class="tile-value" id="t-active">-</div><div class="tile-label">Open connections</div></div>
  <div class="tile"><div class="tile-value" id="t-total">-</div><div class="tile-label">Transferred in selected range</div></div>
</div>

<section class="card chart-card" id="chart-rate">
  <div class="chart-head">
    <h2>Throughput</h2>
    <div class="legend">
      <span class="key"><span class="swatch-line s1"></span>In</span>
      <span class="key"><span class="swatch-line s2"></span>Out</span>
    </div>
  </div>
  <div class="chart" data-kind="rate"></div>
</section>

<section class="card chart-card" id="chart-conns">
  <div class="chart-head"><h2>New connections</h2></div>
  <div class="chart" data-kind="conns"></div>
</section>

<details class="card">
  <summary>Table view</summary>
  <div class="table-wrap">
    <table class="grid" id="stats-table">
      <thead><tr><th>Time</th><th class="num">In</th><th class="num">Out</th><th class="num">Connections</th></tr></thead>
      <tbody></tbody>
    </table>
  </div>
</details>
<div id="chart-tooltip" class="tooltip" hidden></div>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='common.js') }}"></script>
<script src="{{ url_for('static', filename='stats.js') }}"></script>
{% endblock %}