{% extends 'base.html' %}
{% block content %}
{% if error %}
<p role="alert">{{ error }}</p>
{% else %}
{% set chart_colors = [
  '#c62828', '#1565c0', '#f2c230', '#d7d3c8', '#303030',
  '#8f1d1d', '#10498c', '#b18d23',
  '#5c1313', '#0b305c', '#735c17'
] %}
{% set chart_outlines = [
  '#ff5252', '#42a5ff', '#ffeb59', '#fffdf5', '#737373',
  '#e04848', '#3285db', '#dfb53d',
  '#ae3434', '#2566a6', '#bd9730'
] %}
<div class="metrics-tables">
<div class="metrics-site-column">
<details class="metric-panel">
  <summary>Report filters</summary>
{% include 'report_filters.html' %}
</details>
<details class="metric-panel">
  <summary>Visits by Site Table</summary>
<div class="table-wrap">
  <table aria-label="Site visits">
    <thead><tr><th scope="col">Site</th><th scope="col" class="visits">Visits</th><th scope="col">Last Visited</th></tr></thead>
    <tbody>
      {% for site in sites %}
      <tr class="site-row">
        <td><button type="button" class="site-toggle" aria-expanded="false" aria-controls="site-pages-{{ loop.index }}"><span class="expand-icon" aria-hidden="true">▸</span> {{ site.site }}</button></td>
        <td class="visits">{{ site.page_views }}</td>
        <td><time datetime="{{ site.last_visited | utc_iso }}" data-local-time="date">{{ site.last_visited.strftime('%Y-%m-%d %H:%M') }} UTC</time></td>
      </tr>
      <tr id="site-pages-{{ loop.index }}" class="site-pages" hidden>
        <td colspan="3">
          <table aria-label="Pages for {{ site.site }}">
            <thead><tr><th scope="col">Page</th><th scope="col" class="visits">Visits</th><th scope="col">Last Visited</th></tr></thead>
            <tbody>
              {% for page in pages_by_site[site.site] %}
              <tr>
                <td>{{ page.url }}</td>
                <td class="visits">{{ page.page_views }}</td>
                <td><time datetime="{{ page.last_visited | utc_iso }}" data-local-time="date">{{ page.last_visited.strftime('%Y-%m-%d %H:%M') }} UTC</time></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="3">No visits match the current filters.</td></tr>
      {% endfor %}
    </tbody>
    <tfoot><tr><th scope="row">Total:</th><td class="visits">{{ sites | sum(attribute='page_views') }}</td><td></td></tr></tfoot>
  </table>
</div>
</details>
<details class="metric-panel">
  <summary><span>Recent Visits</span><nav aria-label="Recent visit pages">
    {% if options.before %}<a href="{{ newest_url }}">Newest visits</a>{% endif %}
    {% if older_url %}<a href="{{ older_url }}">Older visits</a>{% endif %}
  </nav></summary>
<div class="table-wrap table-scroll" tabindex="0" role="region" aria-label="Recent Visits scroll area">
  <table class="recent-visits" aria-label="Recent Visits">
    <thead><tr><th scope="col">Date</th><th scope="col">Time</th><th scope="col">City</th><th scope="col">URL</th></tr></thead>
    <tbody>
      {% for visit in recent %}
      <tr>
        <td><time datetime="{{ visit.received_at | utc_iso }}" data-local-time="date-only">{{ visit.received_at.strftime('%Y-%m-%d') }} UTC</time></td>
        <td><time datetime="{{ visit.received_at | utc_iso }}" data-local-time="time-12">{{ visit.received_at.strftime('%I:%M %p') }} UTC</time></td>
        <td data-sort-value="{{ visit.city_name or '---' }}">{% set flag = visit.country_code | country_flag %}{% if flag %}<span role="img" aria-label="Country: {{ visit.country_code }}">{{ flag }}</span> {% endif %}{{ visit.city_name or '---' }}</td>
        <td>{{ visit.url }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4">No visits match the current filters.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</details>
</div>
<div class="metrics-location-column">
<div class="metrics-preference-charts">
<section class="country-chart" aria-labelledby="country-chart-title">
<details class="metric-panel">
  <summary><h2 id="country-chart-title">Visits by Location Chart</h2></summary>
  {% if country_slices %}
  <div class="country-chart-content">
    <div id="country-pie" class="country-pie" role="img" aria-label="Visits by country. Counts and percentages are listed in the legend."></div>
    <ul class="country-legend location-legend" tabindex="0" aria-label="Visits by country">
      {% for country in country_slices %}
      <li><span class="country-swatch" aria-hidden="true" style="background: {{ chart_colors[loop.index0 % chart_colors | length] }};"></span><span>{{ country.name }}</span><span class="country-value">{{ country.visits }} ({{ '%.1f' | format(country.percent) }}%)</span></li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <p>No visits match the current filters.</p>
  {% endif %}
</details>
</section>
<section class="country-chart" aria-labelledby="language-chart-title">
<details class="metric-panel">
  <summary><h2 id="language-chart-title">Visits by Language</h2></summary>
  {% if language_slices %}
  <div class="country-chart-content">
    <div id="language-pie" class="country-pie" role="img" aria-label="Visits by first browser language preference. Counts and percentages are listed in the legend."></div>
    <ul class="country-legend" aria-label="Visits by language">
      {% set total = language_slices | sum(attribute='visits') %}
      {% for language in language_slices %}
      <li><span class="country-swatch" aria-hidden="true" style="background: {{ chart_colors[loop.index0 % chart_colors | length] }};"></span><span>{{ language.name }}</span><span class="country-value">{{ language.visits }} ({{ '%.1f' | format(language.visits / total * 100) }}%)</span></li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <p>No visits match the current filters.</p>
  {% endif %}
</details>
</section>
</div>
<details class="metric-panel">
  <summary>Visits by Location Table</summary>
<div class="table-wrap table-scroll" tabindex="0" role="region" aria-label="Visits by Location scroll area">
  <table aria-label="Visits by Location">
    <thead><tr><th scope="col">Country</th><th scope="col">State/Province</th><th scope="col">City</th><th scope="col" class="visits">Visits</th></tr></thead>
    <tbody>
      {% for location in locations %}
      <tr>
        <td data-sort-value="{{ location.country_name or '---' }}">{% set flag = location.country_code | country_flag %}{% if flag %}<span role="img" aria-label="Country: {{ location.country_code }}">{{ flag }}</span> {% endif %}{{ location.country_name or '---' }}</td>
        <td>{{ location.region_name or '---' }}</td>
        <td>{{ location.city_name or '---' }}</td>
        <td class="visits">{{ location.page_views }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4">No visits match the current filters.</td></tr>
      {% endfor %}
    </tbody>
    <tfoot><tr><th scope="row" colspan="3">Total:</th><td class="visits">{{ locations | sum(attribute='page_views') }}</td></tr></tfoot>
  </table>
</div>
</details>
<details class="metric-panel">
  <summary>Referrers</summary>
<div class="table-wrap table-scroll" tabindex="0" role="region" aria-label="Referrers scroll area">
  <table aria-label="Referrers">
    <thead><tr><th scope="col">Referrer</th><th scope="col" class="visits">Visits</th></tr></thead>
    <tbody>
      {% for referrer in referrers %}
      <tr><td>{{ referrer.referrer_host or 'Direct / Unknown' }}</td><td class="visits">{{ referrer.page_views }}</td></tr>
      {% else %}
      <tr><td colspan="2">No visits match the current filters.</td></tr>
      {% endfor %}
    </tbody>
    <tfoot><tr><th scope="row">Total:</th><td class="visits">{{ referrers | sum(attribute='page_views') }}</td></tr></tfoot>
  </table>
</div>
</details>
</div>
</div>
<div class="metrics-charts">
<section class="site-chart" aria-labelledby="site-chart-title">
<details class="metric-panel">
  <summary><h2 id="site-chart-title">Visits by Site Chart</h2></summary>
  {% if sites %}
  <div class="site-chart-content">
    <div id="site-pie" role="img" aria-label="Visits by site. Counts and percentages are listed in the legend."></div>
    <ul class="country-legend site-legend" aria-label="Visits by site">
      {% set total = sites | sum(attribute='page_views') %}
      {% for site in sites %}
      <li><span class="country-swatch" aria-hidden="true" style="background: {{ chart_colors[loop.index0 % chart_colors | length] }};"></span><span>{{ site.site }} - {{ site.page_views }} ({{ '%.0f' | format(site.page_views / total * 100) }}%)</span></li>
      {% endfor %}
    </ul>
  </div>
  {% else %}
  <p>No visits match the current filters.</p>
  {% endif %}
</details>
</section>
<section class="traffic-chart" aria-labelledby="traffic-chart-title">
<details class="metric-panel">
  <summary><h2 id="traffic-chart-title">All Traffic</h2></summary>
  {% if daily %}
  <div id="all-traffic" role="img" aria-label="Daily hits across all sites. Hover over a bar for its date and total."></div>
  {% else %}
  <p>No visits match the current filters.</p>
  {% endif %}
</details>
</section>
</div>
{% if country_slices or language_slices or sites or daily %}
{% include 'chart_theme.html' %}
{% include 'pie_charts.html' %}
{% if daily %}{% include 'all_traffic.html' %}{% endif %}
{% endif %}
<script>
  for (const panel of document.querySelectorAll('.metric-panel')) {
    panel.addEventListener('toggle', () => {
      if (panel.open) {
        for (const chart of panel.querySelectorAll('.js-plotly-plot')) {
          Plotly.Plots.resize(chart);
        }
      }
    });
  }
  for (const legend of document.querySelectorAll('.location-legend')) {
    const sizeViewport = () => {
      if (!legend.getClientRects().length) return;
      if (legend.children.length <= 10) {
        legend.style.maxHeight = '';
        return;
      }
      const height = legend.children[9].getBoundingClientRect().bottom - legend.children[0].getBoundingClientRect().top;
      legend.style.maxHeight = `${Math.ceil(height)}px`;
    };
    new ResizeObserver(sizeViewport).observe(legend);
    sizeViewport();
  }
  for (const wrapper of document.querySelectorAll('.table-scroll')) {
    const table = wrapper.querySelector('table');
    const body = table.tBodies[0];
    const sizeViewport = () => {
      if (!table.getClientRects().length) return;
      if (body.rows.length <= 10) {
        wrapper.style.maxHeight = '';
        return;
      }
      const height = body.rows[9].getBoundingClientRect().bottom - table.getBoundingClientRect().top;
      const bordersAndScrollbar = wrapper.offsetHeight - wrapper.clientHeight;
      wrapper.style.maxHeight = `${Math.ceil(height + bordersAndScrollbar)}px`;
    };
    new ResizeObserver(sizeViewport).observe(table);
    new MutationObserver(() => {
      wrapper.scrollTop = 0;
      sizeViewport();
    }).observe(body, {childList: true});
    sizeViewport();
  }
  for (const row of document.querySelectorAll('.site-row')) {
    const button = row.querySelector('.site-toggle');
    row.addEventListener('click', () => {
      const expanded = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', String(!expanded));
      button.querySelector('.expand-icon').textContent = expanded ? '▸' : '▾';
      document.getElementById(button.getAttribute('aria-controls')).hidden = expanded;
    });
  }
</script>
{% endif %}
{% endblock %}