@props([
  'action',
  'dateFrom',
  'dateTo',
  'filterMonth' => '',
  'showMonth' => true,
])

<form method="get" action="{{ $action }}" {{ $attributes->class(['d-flex', 'flex-nowrap', 'align-items-center', 'gap-2'])->merge(['data-date-range-filter' => true]) }}>
  {{ $before ?? '' }}
  @if ($showMonth)
    <input type="month" class="form-control form-control-sm" name="month" id="filter_month" value="{{ $filterMonth }}" aria-label="Month">
  @endif
  <input type="date" class="form-control form-control-sm" name="date_from" id="filter_date_from" value="{{ $dateFrom }}" aria-label="From date">
  <span class="text-muted small">to</span>
  <input type="date" class="form-control form-control-sm" name="date_to" id="filter_date_to" value="{{ $dateTo }}" aria-label="To date">
  {{ $afterDates ?? '' }}
  <button type="submit" class="btn btn-sm btn-outline-primary">Search</button>
</form>

@once
  @push('scripts')
    <script src="{{ asset('assets/js/components/date-range-filter.js') }}"></script>
  @endpush
@endonce