<!-- Time Filter Component
     Expected context variables (optional):
       - current_url: API endpoint URL (default: '/api/dashboard')
       - target_id: HTMX target element ID (default: 'dashboard-content')
-->
{% set api_url = current_url|default('/api/dashboard') %}
{% set content_target = target_id|default('dashboard-content') %}
<div class="flex gap-1 sm:gap-2 flex-nowrap items-center" role="group">
    <button
        hx-get="{{ api_url }}?period=15min"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = '15min'"
        :class="selectedPeriod === '15min' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        15m
    </button>
    <button
        hx-get="{{ api_url }}?period=1hour"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = '1hour'"
        :class="selectedPeriod === '1hour' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        1h
    </button>
    <button
        hx-get="{{ api_url }}?period=today"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = 'today'"
        :class="selectedPeriod === 'today' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        Today
    </button>
    <button
        hx-get="{{ api_url }}?period=week"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = 'week'"
        :class="selectedPeriod === 'week' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        Week
    </button>
    <button
        hx-get="{{ api_url }}?period=month"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = 'month'"
        :class="selectedPeriod === 'month' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        Month
    </button>
    <button
        hx-get="{{ api_url }}?period=all"
        hx-target="#{{ content_target }}"
        hx-swap="innerHTML"
        hx-indicator="this"
        @click="selectedPeriod = 'all'"
        :class="selectedPeriod === 'all' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
        class="px-2 sm:px-3 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 whitespace-nowrap flex items-center gap-1"
    >
        <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
        All
    </button>
    <!-- Global loading indicator for content area -->
    <span class="htmx-indicator ml-2 text-[#0770E3]" id="filter-loading">
        <svg class="w-5 h-5 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
        </svg>
    </span>
</div>
