<div class="row">
	<div class="col-xs-12">
	   <div class="table-responsive">
		<table id="sample-table-1" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label><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="icon-time 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><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='visible-md visible-lg hidden-sm hidden-xs btn-group'>
							<button class='btn btn-xs btn-success'><i class='icon-ok bigger-120'></i></button>
							<button class='btn btn-xs btn-info'><i class='icon-edit bigger-120'></i></button>
							<button class='btn btn-xs btn-danger'><i class='icon-trash bigger-120'></i></button>
							<button class='btn btn-xs btn-warning'><i class='icon-flag bigger-120'></i></button>
						</div>

						<div class='visible-xs visible-sm hidden-md hidden-lg'>
							<div class="inline position-relative">
								<button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"><i class="icon-cog icon-only bigger-110"></i></button>
								<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
									<li><a href="#" class="tooltip-info" data-rel="tooltip" title="View"><span class="blue"><i class="icon-zoom-in bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"><span class="green"><i class="icon-edit bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"><i class="icon-trash bigger-120"></i></span> </a></li>
								</ul>
							</div>
						</div>
						
					</td>
				</tr>
				{{/page.domains1}}
			</tbody>
		</table>
	   </div><!--/.table-responsive-->
	</div><!--/span-->
</div><!--/row-->


<div class="hr hr-18 dotted hr-double"></div>

<h4 class="pink">
	<i class="icon-hand-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="table-header">
		Results for "Latest Registered Domains"
	</div>
	  <div class="table-responsive">
		<table id="sample-table-2" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label><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="icon-time 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><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='visible-md visible-lg hidden-sm hidden-xs action-buttons'>
							<a class="blue" href="#"><i class="icon-zoom-in bigger-130"></i></a>
							<a class="green" href="#"><i class="icon-pencil bigger-130"></i></a>
							<a class="red" href="#"><i class="icon-trash bigger-130"></i></a>
						</div>
						
						
						<div class='visible-xs visible-sm hidden-md hidden-lg'>
							<div class="inline position-relative">
								<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown"><i class="icon-caret-down icon-only bigger-120"></i></button>
								<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
									<li><a href="#" class="tooltip-info" data-rel="tooltip" title="View"><span class="blue"><i class="icon-zoom-in bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-success" data-rel="tooltip" title="Edit"><span class="green"><i class="icon-edit bigger-120"></i></span></a></li>
									<li><a href="#" class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"><i class="icon-trash 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="icon-time 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="icon-remove"></i> Close</button>
		<ul class="pagination pull-right no-margin">
			<li class="prev disabled"><a href="#"><i class="icon-double-angle-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="icon-double-angle-right"></i></a></li>
		</ul>
	</div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div>