@props(['from' => 'from', 'to' => 'to'])

<div class="flex flex-wrap items-end gap-2">
    <div>
        <label class="field-label">From</label>
        <input type="date" wire:model.live="{{ $from }}" class="field-input">
    </div>

    <div>
        <label class="field-label">To</label>
        <input type="date" wire:model.live="{{ $to }}" class="field-input">
    </div>

    {{-- The presets people actually use, rather than a calendar puzzle. --}}
    <div class="flex flex-wrap gap-1">
        @foreach (['today' => 'Today', 'yesterday' => 'Yesterday', 'this_week' => 'This week', 'this_month' => 'This month', 'last_month' => 'Last month', 'this_year' => 'This year'] as $key => $label)
            <button type="button" wire:click="applyPreset('{{ $key }}')" class="btn btn-secondary btn-sm">{{ $label }}</button>
        @endforeach
    </div>
</div>