@props(['fromModel', 'toModel'])

{{--
    Same header-row-filter slot as th-filter.blade.php, but for a from/to date pair
    sharing one column (e.g. a transaction list's Date column) - two native date
    inputs side by side rather than a text box, since a date range isn't something a
    free-text LIKE search over.
--}}
<th class="px-4 py-2 bg-gray-50 dark:bg-gray-900/40 border-t border-gray-100 dark:border-gray-700">
    <div class="flex items-center gap-1">
        <input
            type="date"
            wire:model.live="{{ $fromModel }}"
            class="w-full min-w-0 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 text-xs py-1 px-1 focus:border-indigo-500 focus:ring-indigo-500"
        />
        <span class="text-gray-400 dark:text-gray-500 text-xs">&ndash;</span>
        <input
            type="date"
            wire:model.live="{{ $toModel }}"
            class="w-full min-w-0 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 text-xs py-1 px-1 focus:border-indigo-500 focus:ring-indigo-500"
        />
    </div>
</th>