{@args title: String, count: String, table: TelemetryTable, time: String, live: String, back: String, css: String}
{@import telemetry_web/telemetry_views}
{if (str_len css) > 0}<link rel="stylesheet" href={css}>{end}
<section class="telemetry">
  <header class="telemetry-head">
    <h1>{title}: live</h1>
    <nav class="telemetry-periods" aria-label="Reports"><a href={back}>Reports</a><a href={live} aria-current="page">Live</a></nav>
  </header>
  <p class="telemetry-live"><span class="telemetry-live-count">{count}</span> visitors in the last five minutes <span class="telemetry-live-time">at {time} UTC · <a href={live}>Refresh</a></span></p>
  <section class="telemetry-block">
    <h2>{ttab_title table}</h2>
    {if sx_list_is_empty (ttab_rows table)}
    <p class="telemetry-empty">{ttab_empty table}</p>
    {else}
    <table class="telemetry-table">
      <thead><tr><th scope="col">{ttab_key table}</th><th scope="col">Visitors</th><th scope="col">Share</th></tr></thead>
      <tbody>
        {for r: TelemetryRow in ttab_rows table}
        <tr><td><svg class="telemetry-share" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true"><rect height="1" width={trow_width r} /></svg><span class="telemetry-key">{trow_key r}</span></td><td>{trow_visitors r}</td><td>{trow_share r}</td></tr>
        {end}
      </tbody>
    </table>
    {end}
  </section>
</section>