<!-- Time Filter Component -->
<div class="flex gap-2" role="group" x-data="{ selectedPeriod: '{{ period|default('all') }}' }">
    <button
        hx-get="{{ current_url }}?period=today"
        hx-target="#{{ target_id }}"
        hx-swap="innerHTML"
        hx-include="[name='period']"
        @click="selectedPeriod = 'today'"
        :class="selectedPeriod === 'today' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2"
    >
        Today
    </button>
    <button
        hx-get="{{ current_url }}?period=week"
        hx-target="#{{ target_id }}"
        hx-swap="innerHTML"
        hx-include="[name='period']"
        @click="selectedPeriod = 'week'"
        :class="selectedPeriod === 'week' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2"
    >
        Week
    </button>
    <button
        hx-get="{{ current_url }}?period=month"
        hx-target="#{{ target_id }}"
        hx-swap="innerHTML"
        hx-include="[name='period']"
        @click="selectedPeriod = 'month'"
        :class="selectedPeriod === 'month' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2"
    >
        Month
    </button>
    <button
        hx-get="{{ current_url }}?period=all"
        hx-target="#{{ target_id }}"
        hx-swap="innerHTML"
        hx-include="[name='period']"
        @click="selectedPeriod = 'all'"
        :class="selectedPeriod === 'all' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-4 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-[#0660c3] focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2"
    >
        All Time
    </button>
</div>