<?php 

ce("pagination")
->tpl(function(){
?>
<div>
	<nav ng-show="length>1">
	  <ul class="pagination pagination-sm">
	    <li ng-class="{'disabled':page<=1}"><a style="cursor:pointer" ng-click="page>1?ngPage({page:page-1}):false"><span aria-hidden="true">&laquo;</span></a></li>
	    <li ng-show="page-5>1"><a style="cursor:pointer" ng-click="ngPage({page:1})">1</a></li>
	    <li ng-show="page-5>2"><a style="cursor:pointer">...</a></li>
	    <li ng-repeat="p in [] | rangepagination:5:page:length" ng-class="{'active':p==page}"><a style="cursor:pointer" ng-click="ngPage({page:p})">{{p}}</a></li>
	    <li ng-show="page+5<length-1"><a style="cursor:pointer">...</a></li>
	    <li ng-show="page+5<length"><a style="cursor:pointer" ng-click="ngPage({page:length})">{{length}}</a></li>
		<li ng-class="{'disabled':page>=length}">
		  <a style="cursor:pointer" ng-click="(page<length)?ngPage({page:page+1}):false">
		    <span aria-hidden="true">&raquo;</span>
		  </a>
		</li>
	  </ul>
	</nav>
</div>
<?php
})
->js(function(){
?>
<script>
	app.filter('rangepagination', function() {
	  return function(input, m,p,t) {
	    m = parseInt(m);
	    p = parseInt(p);
	    t = parseInt(t);
	    for (var i=Math.max(p-m,1); i<=Math.min(p+m,t); i++) {
	      input.push(i);
	    }
	    return input;
	  };
	});
	app.directive('pagination', function () {
		return {
			restrict: 'EA',
			template:{{inject-tpl}},
			scope:{length:"=",page:"=",ngPage:"&"},
			replace:true,
			controller:function($scope){
				$scope.scopename = "pagination";
			}
		};
	});
</script>
<?php
});