<section id="filter-bar">
	<div class="container">
		
		<div class="pull-left">
			<div class="form-group">
				<label for="name">{{ 'search' | translate }}</label>
				<input name="name" ng-model="filters.query" class="form-control">
			</div>

			<div class="form-group">
				<label for="sort">{{ 'sort' | translate }}</label>
				<select name="sort" ng-model="filters.sort" ng-change="filters.setSortProp()" class="form-control">
					<option value="newest">{{ 'newest' | translate }}</option>
					<option value="oldest">{{ 'oldest' | translate }}</option>
					<option value="lastSeen" selected>{{ 'lastSeen' | translate }}</option>
				</select>
			</div>	
		</div>

		<div class="pull-right">
			<button data-toggle="modal" data-target="#default-permissions-modal" class="btn btn-success">{{ 'defaultPermissions' | translate }}</button>
			<button data-toggle="modal" data-target="#new-user-modal" class="btn btn-success">{{ 'createNewUser' | translate }}</button>
		</div>

	</div>
</section>

<section id="dashboard-container">

	<div class="container">

		<div ng-if="isDemo" class="alert alert-info user-selectable">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
			<p>This page would normally only be accessible to admin or users with <strong>users:update</strong> permission.</p>
			<p><strong>Permissions modifications saving on demo site is disabled</strong>. If you want to test an account with limited permissions use - Username: <strong>demo@limited.com</strong> and Password: <strong>demo</strong></p>
		</div>

		<section class="row">
			<div class="pull-left checkbox-pull" title="{{ 'disableRegistrationExpl' | translate }}">
				<div class="checkbox">
			    	<label>
			      		<input type="checkbox" ng-checked="enableRegistration" ng-model="enableRegistration" ng-change="toggleRegistration(enableRegistration)">
			      		<span>{{ 'enableUserRegistration' | translate }}</span>
			    	</label>
			  	</div>
			</div>
			<div class="pagi-container pull-right"><ul class="pagination" bl-users-pagination></ul></div>
		</section>
		
		<table class="table table-striped table-bordered">
	      	<thead>
	        	<tr>
	          		<th>#</th>
	          		<th>{{ 'email' | translate }}</th>
	          		<th>{{ 'lastLogin' | translate }}</th>
	          		<th>{{ 'createdAt' | translate }}</th>
	          		<th>{{ 'actions' | translate }}</th>
	        	</tr>
	      	</thead>
	      	<tbody>
	        	<tr ng-repeat="user in usersPaginator.currentItems | filter:{email:filters.query} | orderBy:filters.order:filters.reverse">
	          		<th scope="row">{{ 1 + $index }}</th>
	          		<td>{{ showEmail(user.email) }}</td>
	          		<td>{{ user.last_login }}</td>
	          		<td>{{ user.created_at }}</td>
	          		<td>
	          			<button ng-click="openPermissionsModal(user)" title="Modify permissions" class="btn-sm btn-info"><i class="fa fa-key"></i> </button>
	          			<button ng-click="delete(user)" title="Delete User" class="btn-sm btn-danger"><i class="fa fa-trash-o"></i> </button>
	          		</td>
	        	</tr>
	      	</tbody>
	    </table>

	</div>
	
</section>

<div class="modal fade" id="permissions-modal">
	<div class="modal-dialog">
    	<div class="modal-content">
      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        		<h4 class="modal-title" id="myModalLabel">{{ 'modifyUserPermissions' | translate }}</h4>
      		</div>
      		<div class="modal-body">
        		<ul class="list-unstyled clearfix">
        			<li class="col-sm-6" ng-repeat="permission in availablePermissions">
        				<div ng-if="permission.indexOf('*') < 0">
        					<h4>{{ permission }}</h4>
	        				<div class="toggler" ng-repeat="action in permissionSubActions">
	        					<div class="action-name">{{ action }}:</div>
	        					<div class="toggle toggle-light" name="{{ permission+'.'+action }}" for="user" bl-permissions-toggler="{{ activeUserHasPermission(permission+'.'+action) }}"></div>
	        				</div>
        				</div>
        				<div class="single-permission" ng-if="permission.indexOf('*') > -1">
        					<h4>{{ permission.replace('*', '') }}</h4>
        					<div class="toggle toggle-light" name="{{ permission.replace('*', '') }}" for="user" bl-permissions-toggler="{{ activeUserHasPermission(permission) }}"></div>
        				</div>
        			</li>
        		</ul>
      		</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close' | translate }}</button>
	        	<button ng-click="savePermissions()" type="button" class="btn btn-primary">{{ 'saveChanges' | translate }}</button>
	      	</div>
    	</div>
  	</div>
</div>

<div class="modal fade" id="default-permissions-modal">
	<div class="modal-dialog">
    	<div class="modal-content">
      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        		<h4 class="modal-title">{{ 'defaultPermissions' | translate }}</h4>
        		<p>{{ 'defaultPermExpl' | translate }}</p>
      		</div>
      		<div class="modal-body">
        		<ul class="list-unstyled clearfix">
        			<li class="col-sm-6" ng-repeat="permission in availablePermissions">
        				<div ng-if="permission.indexOf('*') < 0">
        					<h4>{{ permission }}</h4>
	        				<div class="toggler" ng-repeat="action in permissionSubActions">
	        					<div class="action-name">{{ action }}:</div>
	        					<div class="toggle toggle-light" name="{{ permission+'.'+action }}" for="default-permissions" bl-permissions-toggler="{{ defaultPermissionSet(permission+'.'+action) }}"></div>
	        				</div>
        				</div>
        				<div class="single-permission" ng-if="permission.indexOf('*') > -1">
        					<h4>{{ permission.replace('*', '') }}</h4>
        					<div class="toggle toggle-light" name="{{ permission.replace('*', '') }}" for="default-permissions" bl-permissions-toggler="{{ defaultPermissionSet(permission) }}"></div>
        				</div>
        			</li>
        		</ul>
      		</div>
	      	<div class="modal-footer">
	      		<button ng-click="assignPermissionsToAll(defaultPermissions)" type="button" class="btn btn-primary pull-left">{{ 'assignToExisting' | translate }}</button>
	        	<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close' | translate }}</button>
	        	<button ng-click="saveDefaultPermissions()" type="button" class="btn btn-primary">{{ 'saveChanges' | translate }}</button>
	      	</div>
    	</div>
  	</div>
</div>

<div class="modal fade" id="new-user-modal">
	<div class="modal-dialog">
    	<div class="modal-content">
      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        		<h4 class="modal-title" id="myModalLabel">{{ 'createNewUser' | translate }}</h4>
      		</div>
      		<div class="modal-body">
        		<div class="form-group">
        			<label for="email">{{ 'email' | translate }}</label>
        			<input class="form-control" type="text" ng-model="newUser.email">
        			<h6 ng-if="errors.email" class="alert alert-danger">{{ errors.email }}</h6>
        		</div>
        		<div class="form-group">
        			<label for="password">{{ 'password' | translate }}</label>
        			<input class="form-control" type="password" ng-model="newUser.password">
        			<h6 ng-if="errors.password" class="alert alert-danger">{{ errors.password }}</h6>
        		</div>
        		<div class="form-group">
        			<label for="password">{{ 'repeatPassword' | translate }}</label>
        			<input class="form-control" type="password" ng-model="newUser.repeatPassword">
        			<h6 ng-if="errors.repeatPassword" class="alert alert-danger">{{ errors.repeatPassword }}</h6>
        		</div>
      		</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'close' | translate }}</button>
	        	<button ng-click="createNewUser()" type="button" class="btn btn-primary">{{ 'create' | translate }}</button>
	      	</div>
    	</div>
  	</div>
</div>