<div class="input-group">

	<div class="input-group-prepend">
		@include('components.datatables.buttons.pageLength')
		<span class="input-group-text"><i class="fa fa-search"></i></span>
	</div>

	<input type="text" class="form-control search-btn" placeholder="{{ __('search') }}" value="">

	@if (($with_filters ?? false) || ($with_colvis ?? false))
		<div class="input-group-append">
			@if ($with_filters ?? false)
				@include('components.datatables.buttons.filters')
			@endif
			@if ($with_colvis ?? false)
				@include('components.datatables.buttons.colvis')
			@endif
		</div>
	@endif

</div>

@include('load.functions')

@push('js')
	<script>
		$( document ).ready(function() {
			var table = getDatatable("{{ $model }}");

			var $search = $('#{{ $model }}-table-header .search-btn');
			var state = getDatatableState("{{ $model }}");

			if (state && (typeof(state.search.search) != 'undefined')) {
				$search.val(state.search.search);
			}

			$search.on('keyup', delay(function () {
				table.search($search.val()).draw();
			}, 500));
		});
	</script>
@endpush