<div class="form-inline">
    <input x-on:keydown.enter="filterItems()" id="filter-search" type="text" placeholder="{{ __('Search') }}" class="form-control form-control-sm">

    <button x-on:click="filterItems()" id="filer-submit" type="button" class="btn btn-action-apply me-2">
        <span class="btn-inner--text">{{ __('Apply') }}</span>
    </button>

    <button x-on:click="filterReset()" type="reset" class="btn btn-action-apply btn-action-danger">
        <span class="btn-inner--text">{{ __('Reset') }}</span>
    </button>
</div>

@push('scripts')
    <script>
        function filterItems() {
            (@this()).set('filterSearch', $('#filter-search').val());
            Livewire.emit('filterItems');

            return false;
        }

        function filterReset() {
            (@this()).set('filterSearch', '');
            Livewire.emit('filterItems')
        }
    </script>
@endpush
