<!-- Source filter -->
<div class="flex gap-2 mb-4">
  <button class="btn-outline btn-sm {% if not current_source %}font-bold{% endif %}"
          hx-get="{{ url_for('admin.seo_search') }}?days={{ date_range_days }}"
          hx-target="#tab-content">All</button>
  <button class="btn-outline btn-sm {% if current_source == 'gsc' %}font-bold{% endif %}"
          hx-get="{{ url_for('admin.seo_search') }}?days={{ date_range_days }}&source=gsc"
          hx-target="#tab-content">GSC</button>
  <button class="btn-outline btn-sm {% if current_source == 'bing' %}font-bold{% endif %}"
          hx-get="{{ url_for('admin.seo_search') }}?days={{ date_range_days }}&source=bing"
          hx-target="#tab-content">Bing</button>
</div>

<div class="grid-2 mb-6" style="gap:1.5rem">
  <!-- Top Queries -->
  <section>
    <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Top Queries</p>
    {% if queries %}
    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>Query</th>
            <th style="text-align:right">Impressions</th>
            <th style="text-align:right">Clicks</th>
            <th style="text-align:right">CTR</th>
            <th style="text-align:right">Pos</th>
          </tr>
        </thead>
        <tbody>
          {% for q in queries[:20] %}
          <tr>
            <td class="text-sm">{{ q.query }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(q.impressions | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(q.clicks | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format((q.ctr or 0) * 100) }}%</td>
            <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format(q.position_avg or 0) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="card text-center" style="padding:1.5rem">
      <p class="text-slate text-sm">No query data yet. Run a sync to populate.</p>
    </div>
    {% endif %}
  </section>

  <!-- Top Pages -->
  <section>
    <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Top Pages</p>
    {% if pages %}
    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>Page</th>
            <th style="text-align:right">Impressions</th>
            <th style="text-align:right">Clicks</th>
            <th style="text-align:right">CTR</th>
            <th style="text-align:right">Pos</th>
          </tr>
        </thead>
        <tbody>
          {% for p in pages[:20] %}
          <tr>
            <td class="text-sm" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ p.page_url }}">{{ p.page_url }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(p.impressions | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(p.clicks | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format((p.ctr or 0) * 100) }}%</td>
            <td style="text-align:right" class="mono text-sm">{{ "%.1f" | format(p.position_avg or 0) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="card text-center" style="padding:1.5rem">
      <p class="text-slate text-sm">No page data yet.</p>
    </div>
    {% endif %}
  </section>
</div>

<div class="grid-2" style="gap:1.5rem">
  <!-- Country Breakdown -->
  <section>
    <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">By Country</p>
    {% if countries %}
    <div class="card">
      <table class="table">
        <thead><tr><th>Country</th><th style="text-align:right">Impressions</th><th style="text-align:right">Clicks</th></tr></thead>
        <tbody>
          {% for c in countries[:15] %}
          <tr>
            <td class="text-sm">{{ c.country | upper }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(c.impressions | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(c.clicks | int) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="card text-center" style="padding:1rem"><p class="text-slate text-sm">No country data.</p></div>
    {% endif %}
  </section>

  <!-- Device Breakdown -->
  <section>
    <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">By Device (GSC)</p>
    {% if devices %}
    <div class="card">
      <table class="table">
        <thead><tr><th>Device</th><th style="text-align:right">Impressions</th><th style="text-align:right">Clicks</th></tr></thead>
        <tbody>
          {% for d in devices %}
          <tr>
            <td class="text-sm">{{ d.device | capitalize }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(d.impressions | int) }}</td>
            <td style="text-align:right" class="mono text-sm">{{ "{:,}".format(d.clicks | int) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="card text-center" style="padding:1rem"><p class="text-slate text-sm">No device data (GSC only).</p></div>
    {% endif %}
  </section>
</div>
