{grid_css}

	<div class="row justify-content-center mx-1">
		<div class="col-12 shadow-sm content-grid border rounded">
			<div class="row p-3">
				<div class="col-12">
					<table class="table table-striped" id="ice_grid">
						<thead>
							{grid_header}
						</thead>
						<tbody>
							{grid_content}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div id="tmp-toolbar-search">
		<div class="form-group col-12 mb-0 pl-0">
			<div class="input-group">
				<div class="input-group-text" style="border-color: #8B8F94; color:#1C3865"><i class="fas fa-search"></i></div>
				<input type="search" id="filter_search" name="filter_search" class="form-control" title="Search" style="height: 38px!important;">
			</div>
		</div>
	</div>

	{grid_js}

	<script>
		var table = null;
		$(document).ready(function() {
			var columnWithFilter = {columns_filter};
			table = new DataTable('#ice_grid', {
				autoWidth: false, fixedColumns: true, scrollX: true, 
				order: [ {columnOrder} ], 
				columnDefs: [ {columns_def} ], 
				pageLength: 20, 
				dom: 'r<"row mb-2"<"col-md-2 col-xs-12 toolbar-search"><"col-md-8 col-xs-12 filters"><"col-md-2 col-xs-12 toolbar-action text-end">>t<"row"<"col-6 text-start"i><"col-6 page-align"p>><"clear">',
				buttons: [
					{ extend: 'print', title: '{title_print}', exportOptions: { columns: '.print-show' } }, 
					{ extend: 'excel', title: '{title_export}', exportOptions: { columns: '.export-show' } }
				],
				initComplete: function() {
					let filterPosition = 0;
					$('.filters').append('<div class="row" id="filtersRow"></div>');
					this.api().columns(columnWithFilter).every(function(d) {
						var column = this;
						var columnName = $("#ice_grid th").eq([d]).text();
						filterPosition = filterPosition + 1;
						$('#filtersRow').append('<div class="col-3" id="filter_' + filterPosition + '"></div>');
						var select = $('<select class="form-select grid-select-filter"><option value="">All ' + columnName + '</option></select>')
						.appendTo($('#filter_' + filterPosition))
						.on('change', function() {
							var val = $.fn.dataTable.util.escapeRegex( $(this).val() );
							column
							.search(val ? '^' + val + '$' : '', true, false)
							.draw();
						});
						column.data().unique().sort().each(function(d, j) {
							let optionData = d.replace(/<\/?[^>]+(>|$)/g, "");
							select.append('<option value="' + optionData + '">' + optionData + '</option>')
						});
					});
				}
			});

			$("div.toolbar-search").html($("#tmp-toolbar-search").html()); $("#tmp-toolbar-search").html('');
			$('#filter_search').keyup( function() { table.search($('#filter_search').val()); table.draw(); });
		});
	</script>

	{grid_dropdown}