{% set date_range_action = date_range_action | default('/dashboard') %}

<div class="flex flex-wrap items-center gap-3">
  <div class="inline-flex overflow-hidden rounded-full border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
    <a href="{{ date_range_action }}?days=7"
       class="px-4 py-2 text-sm font-semibold transition-colors {{ 'bg-brand-500 text-white' if date_range.days == 7 else 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800' }}">
      7d
    </a>
    <a href="{{ date_range_action }}?days=30"
       class="border-x border-slate-200 px-4 py-2 text-sm font-semibold transition-colors dark:border-slate-700 {{ 'bg-brand-500 text-white' if date_range.days == 30 else 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800' }}">
      30d
    </a>
    <a href="{{ date_range_action }}?days=90"
       class="px-4 py-2 text-sm font-semibold transition-colors {{ 'bg-brand-500 text-white' if date_range.days == 90 else 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800' }}">
      90d
    </a>
  </div>

  <form method="get" action="{{ date_range_action }}" class="flex flex-wrap items-center gap-3">
    <input type="date" name="start"
           value="{{ date_range.start.strftime('%Y-%m-%d') if date_range.start else '' }}"
           class="ui-control-sm min-w-[10.5rem] rounded-full bg-white px-4 dark:bg-slate-900">
    <span class="text-sm text-slate-400 dark:text-slate-500">to</span>
    <input type="date" name="end"
           value="{{ date_range.end.strftime('%Y-%m-%d') if date_range.end else '' }}"
           class="ui-control-sm min-w-[10.5rem] rounded-full bg-white px-4 dark:bg-slate-900">
    <button type="submit" class="ui-btn-secondary px-4 text-sm">Apply</button>
  </form>
</div>