<div class="row">
	<div class="col-xs-12">
		<table id="simple-table" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label>
					</th>
					<th>Domain</th>
					<th>Price</th>
					<th class="hidden-480">Clicks</th>
					<th><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> Update</th>
					<th class="hidden-480">Status</th>
					<th></th>
				</tr>
			</thead>
									
			<tbody>
				{{#page.domains1}}
				<tr>
					<td class='center'>
						<label class="pos-rel">
							<input type='checkbox' class="ace" />
							<span class="lbl"></span>
						</label>
					</td>
					<td><a href='#'>{{name}}</a></td>
					<td>{{price}}</td>
					<td class='hidden-480'>{{clicks}}</td>
					<td>{{update}}</td>
					<td class='hidden-480'>
						{{#expiring}}
						<span class='label label-sm label-warning'>Expiring</span>
						{{/expiring}}
						{{#registered}}
						<span class='label label-sm label-success'>Registered</span>
						{{/registered}}
						{{#flagged}}
						<span class='label label-sm label-inverse arrowed-in'>Flagged</span>
						{{/flagged}}
						{{#sold}}
						<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>
						{{/sold}}
					</td>
					<td>
						<div class='hidden-sm hidden-xs btn-group'>
							<button class='btn btn-xs btn-success'><i class='ace-icon fa fa-check bigger-120'></i></button>
							<button class='btn btn-xs btn-info'><i class='ace-icon fa fa-pencil bigger-120'></i></button>
							<button class='btn btn-xs btn-danger'><i class='ace-icon fa fa-trash-o bigger-120'></i></button>
							<button class='btn btn-xs btn-warning'><i class='ace-icon fa fa-flag bigger-120'></i></button>
						</div>

						<div class='hidden-md hidden-lg'>
							<div class="inline pos-rel">
								<button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto"><i class="ace-icon fa fa-cog icon-only bigger-110"></i></button>
								<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
									<li><a href="#" class="tooltip-info" data-rel="tooltip" title="View"><span class="blue"><i class="ace-icon fa fa-search-plus bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"><span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span> </a></li>
								</ul>
							</div>
						</div>
						
					</td>
				</tr>
				{{/page.domains1}}
			</tbody>
		</table>
	</div><!-- /.span -->
</div><!-- /.row -->


<div class="hr hr-18 dotted hr-double"></div>

<h4 class="pink">
	<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
	<a href="#modal-table" role="button" class="green" data-toggle="modal">
		Table Inside a Modal Box
	</a>
</h4>

<div class="hr hr-18 dotted hr-double"></div>


<div class="row">
 <div class="col-xs-12">
	<h3 class="header smaller lighter blue">jQuery dataTables</h3>
	

	<div class="clearfix">
		<div class="pull-right tableTools-container"></div>
	</div>
	
	<div class="table-header">
		Results for "Latest Registered Domains"
	</div>
	  <!-- div.table-responsive -->
	  <!-- div.dataTables_borderWrap -->
	  <div>	  
		<table id="dynamic-table" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label>
					</th>
					<th>Domain</th>
					<th>Price</th>
					<th class="hidden-480">Clicks</th>
					<th><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> Update</th>
					<th class="hidden-480">Status</th>
					<th></th>
				</tr>
			</thead>
									
			<tbody>

				{{#page.domains2}}
				<tr>
					<td class='center'>
						<label class="pos-rel"><input type='checkbox' class="ace" /><span class="lbl"></span></label>
					</td>
					<td><a href='#'>{{name}}</a></td>
					<td>{{price}}</td>
					<td class='hidden-480'>{{clicks}}</td>
					<td>{{update}}</td>
					<td class='hidden-480'>
						{{#expiring}}
						<span class='label label-sm label-warning'>Expiring</span>
						{{/expiring}}
						{{#registered}}
						<span class='label label-sm label-success'>Registered</span>
						{{/registered}}
						{{#flagged}}
						<span class='label label-sm label-inverse arrowed-in'>Flagged</span>
						{{/flagged}}
						{{#sold}}
						<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>
						{{/sold}}
					</td>
					<td>
						<div class='hidden-sm hidden-xs action-buttons'>
							<a class="blue" href="#"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>
							<a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130"></i></a>
							<a class="red" href="#"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>
						</div>
						
						
						<div class='hidden-md hidden-lg'>
							<div class="inline pos-rel">
								<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto"><i class="ace-icon fa fa-caret-down icon-only bigger-120"></i></button>
								<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
									<li><a href="#" class="tooltip-info" data-rel="tooltip" title="View"><span class="blue"><i class="ace-icon fa fa-search-plus bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"><span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span> </a></li>
								</ul>
							</div>
						</div>
					</td>
				</tr>
				{{/page.domains2}}

			</tbody>
		</table>
	  </div>
 </div>
</div>






<div id="modal-table" class="modal fade" tabindex="-1">
 <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-header no-padding">
		<div class="table-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="white">&times;</span></button>
			Results for "Latest Registered Domains
		</div>
	</div>
	
	<div class="modal-body no-padding">
		<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
			<thead>
				<tr>
					<th>Domain</th>
					<th>Price</th>
					<th>Clicks</th>
					<th><i class="ace-icon fa fa-clock-o bigger-110"></i> Update</th>
				</tr>
			</thead>
									
			<tbody>
				{{#page.domains1}}
				<tr>
					<td><a href='#'>{{name}}</a></td>
					<td>{{price}}</td>
					<td>{{clicks}}</td>
					<td>{{update}}</td>
				</tr>
				{{/page.domains1}}
			</tbody>
		</table>
	</div>
	
	<div class="modal-footer no-margin-top">
		<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Close</button>
		<ul class="pagination pull-right no-margin">
			<li class="prev disabled"><a href="#"><i class="ace-icon fa fa-angle-double-left"></i></a></li>
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li class="next"><a href="#"><i class="ace-icon fa fa-angle-double-right"></i></a></li>
		</ul>
	</div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div>