{{--
    A "from / to" date filter inside a filter bar.

        <x-filter.date-range :from="$filters['date_from'] ?? null" :to="$filters['date_to'] ?? null" label="Purchase Date" />

    Always two fixed query-string keys — `date_from` / `date_to` — regardless
    of which column a given report filters by; only the report's own query
    closure knows which date that actually is. Like search, this does not
    auto-submit: a half-typed date should never fire a request.
--}}
@props([
    'from' => null,
    'to' => null,
    'label' => 'Date range',
    // `name`/`date_from`/`date_to` stay fixed query-string keys (see above);
    // only the id/for pairing is namespaced, so two instances on one page
    // (e.g. inside a modal alongside the page's own filter bar) never clash.
    'id' => 'date',
])

<div {{ $attributes->merge(['class' => 'ams-date-range']) }}>
    <label for="{{ $id }}_from" class="visually-hidden">{{ $label }} from</label>
    <input type="date"
           class="form-control"
           id="{{ $id }}_from"
           name="date_from"
           value="{{ old('date_from', $from) }}"
           aria-label="{{ $label }} from">

    <span class="ams-date-range__sep" aria-hidden="true">–</span>

    <label for="{{ $id }}_to" class="visually-hidden">{{ $label }} to</label>
    <input type="date"
           class="form-control"
           id="{{ $id }}_to"
           name="date_to"
           value="{{ old('date_to', $to) }}"
           aria-label="{{ $label }} to">
</div>
