{% extends dashboard_base %}
{% block tab_content %}

<style>
  /* This template extends `dashboard_base`, a VARIABLE rather than a fixed
     template name: the view swaps in base_iframe.html inside the admin iframe
     (which has no tab bar) and base.html when opened standalone. Hardcoding
     base.html renders a second tab bar nested inside the first.

     Do not write Django template tags inside these CSS comments — the template
     engine parses tags everywhere, including inside a style block. */
  /* Vercel/Geist-flavored: near-black surfaces, hairline borders, one accent,
     generous whitespace, tabular numerals. No chart library — the sparkline is
     flex divs and the rank bars are sized backgrounds.

     Styles are inline because the iframe document has no Tailwind build, so
     utility classes silently do nothing (which is how the cards first came out
     white-on-black). The other dashboard tabs do the same. */

  /* No padding here: the gutter is owned by .dashboard-tab-content in
     django_dashboard/base_iframe.html, so every tab gets it and none has to
     remember. */
  .an {
    color: #ededed;
    font-variant-numeric: tabular-nums;
  }

  .an-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
  }
  .an-head__left { display: flex; align-items: center; gap: 12px; }
  .an-site { font-size: 14px; font-weight: 500; color: #ededed; }

  .an-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #a1a1a1;
  }
  .an-live__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #0070f3; box-shadow: 0 0 0 3px rgba(0,112,243,0.18);
    animation: an-pulse 2.4s ease-in-out infinite;
  }
  @keyframes an-pulse { 50% { opacity: 0.35; } }

  /* Segmented control */
  .an-seg {
    display: inline-flex; padding: 2px; gap: 2px;
    background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: 8px;
  }
  .an-seg a {
    font-size: 12px; font-weight: 500; line-height: 1;
    padding: 7px 11px; border-radius: 6px;
    color: #8f8f8f; text-decoration: none;
    transition: color .12s ease, background .12s ease;
  }
  .an-seg a:hover { color: #ededed; }
  .an-seg a.is-active { background: #2e2e2e; color: #fff; }

  /* Stat row */
  .an-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: #2e2e2e;
    border: 1px solid #2e2e2e; border-radius: 12px;
    overflow: hidden; margin-bottom: 24px;
  }
  .an-stat { background: #0a0a0a; padding: 18px 20px; }
  .an-stat__label {
    font-size: 12px; color: #8f8f8f; margin-bottom: 8px;
  }
  .an-stat__value {
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1; color: #fff;
  }

  /* Card */
  .an-card {
    background: #0a0a0a; border: 1px solid #2e2e2e;
    border-radius: 12px; overflow: hidden;
  }
  .an-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #2e2e2e;
    font-size: 13px; font-weight: 500; color: #ededed;
  }
  .an-card__body { padding: 16px; }

  /* Sparkline. One column per day in the range — NOT one per day-with-data.
     Days with no traffic must still occupy a slot, or a single busy day
     stretches to fill the whole chart and it reads as one solid block. */
  .an-bars {
    display: flex; align-items: flex-end; gap: 3px; height: 96px;
  }
  .an-bars__col {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: flex-end; justify-content: center;
    height: 100%;
  }
  .an-bars__bar {
    width: 100%; max-width: 44px;
    min-height: 2px; border-radius: 3px 3px 0 0;
    background: #0070f3; opacity: .5;
    transition: opacity .12s ease;
  }
  .an-bars__col:hover .an-bars__bar { opacity: 1; }
  /* A day with zero traffic still renders a faint baseline, so gaps are legible
     as gaps rather than as missing columns. */
  .an-bars__bar.is-zero { background: #2e2e2e; opacity: 1; }

  .an-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px; margin-top: 24px;
  }

</style>

<div class="an">
  <div class="an-head">
    <div class="an-head__left">
      <span class="an-site">{% if site %}{{ site.domain }}{% else %}All traffic{% endif %}</span>
      {% if online_now %}
        <span class="an-live"><span class="an-live__dot"></span>{{ online_now }} online</span>
      {% endif %}
    </div>
    <div class="an-seg">
      <a href="?{% if site %}site={{ site.domain }}&{% endif %}days=1{% if is_iframe %}&iframe=1{% endif %}"  class="{% if days == 1 %}is-active{% endif %}">24h</a>
      <a href="?{% if site %}site={{ site.domain }}&{% endif %}days=7{% if is_iframe %}&iframe=1{% endif %}"  class="{% if days == 7 %}is-active{% endif %}">7d</a>
      <a href="?{% if site %}site={{ site.domain }}&{% endif %}days=30{% if is_iframe %}&iframe=1{% endif %}" class="{% if days == 30 %}is-active{% endif %}">30d</a>
      <a href="?{% if site %}site={{ site.domain }}&{% endif %}days=90{% if is_iframe %}&iframe=1{% endif %}" class="{% if days == 90 %}is-active{% endif %}">90d</a>
    </div>
  </div>

  <div class="an-stats">
    <div class="an-stat">
      <div class="an-stat__label">Visitors</div>
      <div class="an-stat__value">{{ summary.visitors }}</div>
    </div>
    <div class="an-stat">
      <div class="an-stat__label">Pageviews</div>
      <div class="an-stat__value">{{ summary.pageviews }}</div>
    </div>
    <div class="an-stat">
      <div class="an-stat__label">Sessions</div>
      <div class="an-stat__value">{{ summary.sessions }}</div>
    </div>
    <div class="an-stat" title="Unique authenticated users — the number hosted analytics cannot give you.">
      <div class="an-stat__label">Signed in</div>
      <div class="an-stat__value">{{ summary.known_users }}</div>
    </div>
    <div class="an-stat">
      <div class="an-stat__label">Bounce rate</div>
      <div class="an-stat__value">{{ bounce_pct }}%</div>
    </div>
  </div>

  {% if timeseries %}
  <div class="an-card">
    <div class="an-card__head">
      <span>Pageviews</span>
      <span style="font-size:12px;color:#8f8f8f;">last {{ days }}d</span>
    </div>
    <div class="an-card__body">
      <div class="an-bars">
        {% for point in timeseries %}
          <div class="an-bars__col"
               title="{{ point.date }} — {{ point.pageviews }} views, {{ point.visitors }} visitors">
            <div class="an-bars__bar{% if not point.pageviews %} is-zero{% endif %}"
                 style="height: {{ point.share }}%"></div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  <div class="an-grid">
    {% include "analytics/_table.html" with title="Top pages" rows=top_pages %}
    {% include "analytics/_table.html" with title="Referrers" rows=top_referrers %}
    {% include "analytics/_table.html" with title="Channels"  rows=channels %}
    {% include "analytics/_table.html" with title="Countries" rows=countries %}
    {% include "analytics/_table.html" with title="Browsers"  rows=browsers %}
    {% include "analytics/_table.html" with title="Devices"   rows=devices %}
  </div>
</div>

{% endblock %}