
<div>
	<!-- List -->
	<div class="row">
		<div class="col-lg-12">
			<ng-transclude></ng-transclude>
		</div>
	</div>

	<div class="row">
		<!-- Page Sizes -->
		<div class="col-md-5">
			<nav class="pull-left">
				<ul class="pagination" style="margin: 0">
					<li ng-repeat="size in pageSizes" ng-class="{ active: pageSize == size }">
						<a href="" ng-click="setPageSize(size)">{{ size }}</a>
					</li>
				</ul>
			</nav>
		</div>

		<!-- Showing X of N -->
		<div class="col-md-2">
			<em class="text-muted" style="position: relative; top: 8px">
				{{ 'thShowingXOfN' | translate: range }}
			</em>
		</div>

		<!-- Page Navigation -->
		<div class="col-md-5">
			<nav class="pull-right">
				<ul class="pagination" style="margin: 0">
					<li ng-if="currentPage > 1">
						<a href="" ng-click="goTo(1)">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li ng-repeat="index in getPageRange()" ng-class="{ active: currentPage == index }">
						<a href="" ng-click="goTo(index)">{{ index }}</a>
					</li>
					<li ng-if="currentPage < pageCount">
						<a href="" ng-click="goTo(pageCount)">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>

	</div>

</div>
