<?php
$collections = $this->getCollectionDetails();
?>
<input type="text" placeholder="Search" id="collection-search"/>
<table>
	<thead>
		<tr>
			<th><?php echo __('Type') ?></th>
			<th><?php echo __('Class') ?></th>
			<th><?php echo __('SQL') ?></th>
		</tr>
	</thead>
	<tbody>
		<?php $row = 0; ?>
		<?php foreach( $collections as $item ): ?>
			<tr class="<?php echo ( ($row % 2 ? 'djDebugOdd' : 'djDebugEven')) ?>">
				<td><?php echo $item['type'] ?></td>
				<td><?php echo $item['class'] ?></td>
				<td><?php echo $item['sql'] ?></td>
			</tr>
			<?php $row++; ?>
		<?php endforeach ?>
	</tbody>
</table>
<script type="text/javascript">
	require([
		"jquery",
		"jquery/jquery.cookie",
	], function($){
		(function($) {
			$('#collection-search').on('keyup', function(e) {
				if ('' != this.value) {
					var reg = new RegExp(this.value, 'i'); // case-insesitive

					$('.table-collection tbody').find('tr').each(function() {
						var $me = $(this);
						var hide=true;
						$me.find('td').each(function() {
							$td=$(this);
							if ($td.text().match(reg)) {
								hide=false;
							} 
						});
						if(hide)
						{
							$me.hide();
						}
						else
						{
							$me.show();
						}
					});
				} else {
					$('.table tbody').find('tr').show();
				}
			});
		})(jQuery);	
	});	
</script>