{# Shared filter bar. `detailed` adds the site/bot/URL fields and Export. #}
{% macro filter_bar(detailed=False, all_sites=None, platforms_by_group=None,
                    site='', platform='', url_query='') %}
<form class="filters" method="get" id="filterform">
  <label class="field">
    <span>Date range</span>
    <select name="preset" id="preset" onchange="onPreset(this.value)">
      {% for key, label in presets %}
        <option value="{{ key }}" {{ 'selected' if key == preset }}>{{ label }}</option>
      {% endfor %}
    </select>
  </label>

  <div id="customdates" style="display:{{ 'contents' if preset == 'custom' else 'none' }}">
    <label class="field">
      <span>From</span>
      <input type="date" name="start" value="{{ start }}"
             min="{{ dates[-1] }}" max="{{ dates[0] }}">
    </label>
    <label class="field">
      <span>To</span>
      <input type="date" name="end" value="{{ end }}"
             min="{{ dates[-1] }}" max="{{ dates[0] }}">
    </label>
  </div>

  {% if detailed %}
    <label class="field">
      <span>Site</span>
      <select name="site">
        <option value="">All sites</option>
        {% for s in all_sites %}
          <option value="{{ s }}" {{ 'selected' if s == site }}>{{ s }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="field">
      <span>AI platform</span>
      <select name="platform">
        <option value="">All bots</option>
        {% for g in all_groups %}
          {% if platforms_by_group[g] %}
          <optgroup label="{{ group_labels[g] }}">
            {% for p in platforms_by_group[g] %}
              <option value="{{ p }}" {{ 'selected' if p == platform }}>{{ p }}</option>
            {% endfor %}
          </optgroup>
          {% endif %}
        {% endfor %}
      </select>
    </label>
    <label class="field">
      <span>URL contains</span>
      <input type="search" name="q" value="{{ url_query }}" placeholder="/dog-bite/">
    </label>
  {% endif %}

  <label class="checkbox" title="Bingbot, Amazonbot and Applebot: ordinary search
engines, not AI. Hidden unless you tick this.">
    <input type="checkbox" name="include_search" value="1" {{ 'checked' if include_search }}>
    <span>Include search engines <span class="sub">(Bing, Amazon, Apple)</span></span>
  </label>

  {# Default ON. A checkbox sends nothing when unticked, so the hidden field
     carries content=0 and the checkbox overrides it with 1 when ticked. #}
  <input type="hidden" name="content" value="0">
  <label class="checkbox">
    <input type="checkbox" name="content" value="1" {{ 'checked' if content_only }}>
    <span>Content pages only
      <span class="sub">(hide assets, APIs, probes)</span>
    </span>
    <i class="info" data-tip="Counts only requests for real pages. Hides images, CSS/JS, fonts, wp-json API calls, robots.txt, and scanner probes like /.env or /.ssh/id_ed25519. Untick to see every request. Nothing is deleted &mdash; this only changes what is counted here.">i</i>
  </label>

  <button type="submit" class="btn">Apply</button>
  <a class="btn ghost" href="{{ url_for(request.endpoint) }}">Reset</a>
  {% if detailed %}
    <a class="btn ghost" href="{{ url_for('export_csv', **keep()) }}"
       title="Download every row matching these filters, not just this page">
      Export CSV
    </a>
  {% endif %}
</form>

<script>
  // Show the from/to pickers only for "Custom Date Range"; picking a preset
  // applies straight away so the dropdown behaves like a filter, not a form.
  function onPreset(v) {
    document.getElementById('customdates').style.display = (v === 'custom') ? 'contents' : 'none';
    if (v !== 'custom') { document.getElementById('filterform').submit(); return; }
    // Switching in from a preset: seed a 7-day window ending on the newest day
    // with data, so the pickers open on something sensible rather than the
    // outgoing preset's range. min/max already carry the data's first/last day.
    var form = document.getElementById('filterform');
    var end = form.querySelector('input[name=end]');
    var start = form.querySelector('input[name=start]');
    var d = new Date(end.max + 'T00:00:00');
    d.setDate(d.getDate() - 6);
    var from = d.toISOString().slice(0, 10);
    if (from < end.min) from = end.min;
    end.value = end.max;
    start.value = from;
  }
</script>
{% endmacro %}