{@args title: String, periods: [TelemetryPeriod], metrics: [TelemetryPeriod], chips: [TelemetryChip], cards: [TelemetryCard], bars: [TelemetryBar], before_line: String, chart_label: String, ticks: [String], grid: String, tables: [TelemetryTable], goals: [TelemetryRow], funnels: [TelemetryTable], live: String, geo_note: String, css: String, from: String, to: String, metric: String, filters: [String], export: String, note: String, action: String, areas: [TelemetryMapArea], dots: [TelemetryMapDot], world: String, mapjs: 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}</h1>
    <nav class="telemetry-periods" aria-label="Period">
      {for p: TelemetryPeriod in periods}
      <a href={tper_href p} aria-current={tper_current p}>{tper_label p}</a>
      {end}
      <a class="telemetry-live-link" href={live}>Live</a>
    </nav>
  </header>
  <form class="telemetry-range" method="get" action={action}>
    <label for="telemetry-from">From</label> <input id="telemetry-from" type="date" name="from" value={from} required>
    <label for="telemetry-to">Until</label> <input id="telemetry-to" type="date" name="to" value={to} required>
    {if metric != "visitors"}<input type="hidden" name="metric" value={metric}>{end}
    {for f: String in filters}<input type="hidden" name="f" value={f}>{end}
    <button type="submit">Show</button>
    <a class="telemetry-export" href={export}>Export CSV</a>
  </form>
  {if not (sx_list_is_empty chips)}
  <ul class="telemetry-chips" aria-label="Filters">
    {for c: TelemetryChip in chips}
    <li><a href={tchip_href c} title="Remove this filter">{tchip_label c} <span aria-hidden="true">×</span></a></li>
    {end}
  </ul>
  {end}
  {if (str_len note) > 0}<p class="telemetry-note">{note}</p>{end}
  <ul class="telemetry-cards">
    {for c: TelemetryCard in cards}
    <li><span class="telemetry-card-label">{tcard_label c}</span><span class="telemetry-card-value">{tcard_value c}</span><span class={"telemetry-delta telemetry-delta-" + (tcard_trend c)}>{tcard_delta c}</span></li>
    {end}
  </ul>
  <figure class="telemetry-chart">
    <nav class="telemetry-metrics" aria-label="Chart">
      {for m: TelemetryPeriod in metrics}
      <a href={tper_href m} aria-current={tper_current m}>{tper_label m}</a>
      {end}
    </nav>
    <figcaption>{chart_label}{if (str_len before_line) > 0} <span class="telemetry-legend">· line: the period before</span>{end}</figcaption>
    <div class="telemetry-plot">
      <ol class="telemetry-yaxis" aria-hidden="true">
        {for t: String in ticks}<li>{t}</li>{end}
      </ol>
      <svg viewBox="0 0 720 160" role="img" aria-label={chart_label} preserveAspectRatio="none">
        <path class="telemetry-gridline" d={grid} />
        <line class="telemetry-axis" x1="0" y1="160" x2="720" y2="160" />
        {for b: TelemetryBar in bars}
        <rect class="telemetry-bar" x={tbar_x b} y={tbar_y b} width={tbar_w b} height={tbar_h b}><title>{tbar_label b}: {tbar_value b}{tbar_before b}</title></rect>
        {end}
        {if (str_len before_line) > 0}<polyline class="telemetry-before" points={before_line} />{end}
      </svg>
      <ol class="telemetry-xaxis" aria-hidden="true">
        {for b: TelemetryBar in bars}<li><span>{tbar_tick b}</span></li>{end}
      </ol>
    </div>
    <table class="telemetry-chart-table">
      <caption>{chart_label}</caption>
      <tbody>
        {for b: TelemetryBar in bars}
        <tr><th scope="row">{tbar_label b}</th><td>{tbar_value b}{tbar_before b}</td></tr>
        {end}
      </tbody>
    </table>
  </figure>
  {if (str_len world) > 0}
  <section class="telemetry-block telemetry-map">
    <h2>Where visitors are</h2>
    <div class="telemetry-map-controls" role="group" aria-label="Zoom" hidden>
      <button type="button" value="in" aria-label="Zoom in">+</button>
      <button type="button" value="out" aria-label="Zoom out">−</button>
      <button type="button" value="reset" aria-label="Whole world">⟲</button>
    </div>
    <svg viewBox="0 0 1000 400" role="img" aria-label="Visitors by country and city" stroke-width="0.6">
      <use class="telemetry-land" href={world + "#land"} />
      {for a: TelemetryMapArea in areas}
      <a href={tma_href a}><use class={tma_class a} href={tma_use a}><title>{tma_title a}</title></use></a>
      {end}
      {for d: TelemetryMapDot in dots}
      <a href={tmd_href d}><circle class="telemetry-dot" cx={tmd_x d} cy={tmd_y d} r={tmd_r d} data-r={tmd_r d}><title>{tmd_title d}</title></circle></a>
      {end}
    </svg>
    {if (str_len mapjs) > 0}<script defer src={mapjs}></script>{end}
  </section>
  {end}
  {if not (sx_list_is_empty goals)}
  <section class="telemetry-block">
    <h2>Goals</h2>
    <table class="telemetry-table">
      <thead><tr><th scope="col">Goal</th><th scope="col">Visitors</th><th scope="col">Conversion</th></tr></thead>
      <tbody>
        {for g: TelemetryRow in goals}
        <tr><td>{trow_key g}</td><td>{trow_visitors g}</td><td>{trow_share g}</td></tr>
        {end}
      </tbody>
    </table>
  </section>
  {end}
  {for f: TelemetryTable in funnels}
  <section class="telemetry-block">
    <h2>Funnel: {ttab_title f}</h2>
    <ol class="telemetry-funnel">
      {for s: TelemetryRow in ttab_rows f}
      <li><span class="telemetry-funnel-step">{trow_key s}</span><svg class="telemetry-funnel-bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true"><rect height="1" width={trow_width s} /></svg><span>{trow_visitors s} · {trow_share s}</span></li>
      {end}
    </ol>
  </section>
  {end}
  <div class="telemetry-grid">
    {for t: TelemetryTable in tables}
    <section class={"telemetry-block" + (telemetry_wide_class t)}>
      <h2>{ttab_title t}</h2>
      {if sx_list_is_empty (ttab_rows t)}
      <p class="telemetry-empty">{ttab_empty t}</p>
      {else}
      <table class="telemetry-table">
        <thead><tr><th scope="col">{ttab_key t}</th><th scope="col">Visitors</th><th scope="col">{ttab_count t}</th>{if ttab_wide t}<th scope="col">Avg. time</th><th scope="col">Exit rate</th>{end}</tr></thead>
        <tbody>
          {for r: TelemetryRow in ttab_rows t}
          <tr><td><svg class="telemetry-share" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true"><rect height="1" width={trow_width r} /></svg>{if (str_len (trow_href r)) > 0}<a class="telemetry-key" href={trow_href r} title="Filter the report by this">{trow_key r}</a>{else}<span class="telemetry-key">{trow_key r}</span>{end}</td><td>{trow_visitors r}</td><td>{trow_count r}</td>{if ttab_wide t}<td>{trow_time r}</td><td>{trow_exit r}</td>{end}</tr>
          {end}
        </tbody>
      </table>
      {end}
    </section>
    {end}
  </div>
  <p class="telemetry-note">No cookies, no stored addresses: visitors are counted by a hash whose salt is deleted every day. {geo_note}</p>
</section>