<div class="panel panel-default">
	<div class="panel-body pn">
		<div class="table-responsive">
			<table class="SortableGrid m-0 table table-striped" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<td style="text-align: center; width: 10px;"><input type="checkbox" onclick="$(this.form).find('input:checkbox').not(':disabled').attr('checked', this.checked);" /></td>
						<td style="width: 10px;">&nbsp;</td>
						<td>{% lang 'ZoneName' %}</td>
						<td style="width: 120px;">{% lang 'ZoneType' %}</td>
						<td style="width: 50px; text-align: center;">{% lang 'Status' %}</td>
						<td style="width: 220px;">{% lang 'Action' %}</td>
					</tr>
				</thead>

				<tbody>
					{{ ZonesGrid|safe }}
				</tbody>
			</table>
		</div>
	</div>
</div>