{#
  Reusable time-range selector.
  Requires `current_range` to be in template context.
  Places a hidden input #time-range (name="range") that HTMX hx-include picks up,
  plus a visible button group that calls setTimeRange() defined in base.html.
#}
<div style="display:flex;align-items:center;gap:0.2rem;">
  <input type="hidden" id="time-range" name="range" value="{{ current_range }}">
  {% for key in ["1h", "6h", "24h", "7d", "30d"] %}
  <button type="button"
          class="range-btn{% if current_range == key %} active{% endif %}"
          data-range="{{ key }}"
          onclick="setTimeRange('{{ key }}')">{{ key }}</button>
  {% endfor %}
</div>