<h4>Users</h4>
<br />

<div class="row">
	<div class="col-sm-12 col-lg-10">
		<input type="text" class="form-control form-control-sm mb-3" ng-model="userFilter.email" placeholder="Filter...">
		
		<table class="table table-sm table-hover table-striped">
			<thead class="thead-light">
				<tr class="d-flex">
					<th class="col-3">User</th>
					<th class="col-1 text-center">Enabled</th>
					<th class="col-1 text-center">Super Admin</th>
					<th class="col-1 text-center">National Admin</th>
					<th class="col-2 text-center">First/Last access</th>
					<th class="col-2">Countries</th>
					<th class="col-2"></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="u in users | filter:userFilter" class="d-flex">
					<th class="col-3" ng-class="{'text-secondary': !u.valid}">
						<i>{{u.email}}</i>
						<small ng-if="u.fullname"><br />Fullname: {{u.fullname}}</small>
						<small ng-if="u.organization"><br />Organization: {{u.organization}}</small>
					</th>
					<td class="col-1 text-center text-success">
						<i class="fa fa-check-circle" ng-if="u.valid"></i>
						<span class="text-warning"    ng-if="u.role == 'PENDING'">not configured</span>
						<span class="text-danger"     ng-if="!u.valid && (u.role != 'PENDING')">disabled</span>
					</td>
					<td class="col-1 text-center">
						<i class="fa fa-check-circle" ng-if="u.role == 'ADMIN'"></i>
					</td>
					<td class="col-1 text-center">
						<i class="fa fa-check-circle" ng-if="u.role == 'NATIONAL_ADMIN'"></i>
					</td>
					<td class="col-2 text-center">
						<span title="{{u.firstAccess}}">{{u.firstAccess | date}}</span><br />
						<span title="{{u.lastAccess}}">{{u.lastAccess | date}}</span>
					</td>
					<td class="col-2">
						<span ng-if="(u.role != 'ADMIN')">
							<img ng-src="resources/images/flags/{{c}}.gif" title="{{c}}" class="mr-1" ng-repeat="c in u.countries" />
							<span class="text-warning" ng-if="u.countries.length == 0"><i class="fa fa-exclamation-triangle"></i> no countries</span>
						</span>
						<span class="text-muted" ng-if="u.role == 'ADMIN'">All countries</span>
					</td>
					<td class="col-2 text-right">
						<a href="mailto:{{u.email}}" class="btn btn-sm  btn-outline-info"><i class="fa fa-at"></i></a>
						<button type="button" class="btn btn-sm  btn-outline-info" data-toggle="modal" data-target="#editUserModal" ng-click="setCurrentUser(u)"><i class="fa fa-edit"></i></button>
						<button type="button" class="btn btn-sm  btn-outline-danger" ng-click="deleteUser(u.email)"><i class="fa fa-trash"></i></button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Edit user</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body" style="min-height: 400px; max-height: 800px; overflow-y: auto;">
				<table class="table table-noborder">						
					<tr class="d-flex">
						<th class="col-3">Fullname</th>
						<td class="col-9" ng-if="currentUser.fullname">{{currentUser.fullname}}</td>
						<td class="col-9 text-muted" ng-if="!currentUser.fullname"><i>not specified</i></td>
					</tr>
					<tr class="d-flex">
						<th class="col-3">Email</th>
						<td class="col-9"><a href="mailto:{{currentUser.email}}">{{currentUser.email}}</a></td>
					</tr>
					<tr class="d-flex">
						<th class="col-3">Organization</th>
						<td class="col-9" ng-if="currentUser.organization">{{currentUser.organization}}</td>
						<td class="col-9 text-muted" ng-if="!currentUser.organization"><i>not specified</i></td>
					</tr>
					<tr class="d-flex">
						<th class="col-3">Reference person</th>
						<td class="col-9" ng-if="currentUser.referencePerson">{{currentUser.referencePerson}}</td>
						<td class="col-9 text-muted" ng-if="!currentUser.referencePerson"><i>not specified</i></td>
					</tr>
					<tr class="d-flex">
						<th class="col-3">Registration request</th>
						<td class="col-9" ng-if="currentUser.requestMessage"><pre>{{currentUser.requestMessage}}</pre></td>
						<td class="col-9 text-muted" ng-if="!currentUser.requestMessage"><i>not specified</i></td>
					</tr>
					<tr class="d-flex">
						<th class="col-3">Enabled</th>
						<td class="col-9">
							<input type="checkbox" ng-model="currentUser.valid" />
						</td>
					</tr>
					<tr class="d-flex" ng-if="superAdminMode && currentUser.valid">
						<th class="col-3">Role</th>
						<td class="col-3">
							<input type="radio" value="USER" ng-model="currentUser.role" />
							<label>USER</label>
						</td>
						<td class="col-3">	
							<input type="radio" value="NATIONAL_ADMIN" ng-model="currentUser.role" />
							<label>NATIONAL ADMIN</label>
						</td>
						<td class="col-3">		
							<input type="radio" value="ADMIN" ng-model="currentUser.role" />
							<label>SUPER ADMIN</label>
						</td>
					</tr>
				</table>	
					
				<div class="card mb-3"  ng-if="currentUser.valid && ((currentUser.role == 'USER') || (currentUser.role == 'NATIONAL_ADMIN'))">
					<div class="card-header bg-primary text-white py-1">Countries</div>
					<div class="card-body">
						<input type="text" class="form-control form-control-sm mb-3" ng-model="countryFilter" ng-show="vocabularies.countries.length > 10" placeholder="Filter country...">
						<div class="form-group row">
							<div class="col-xs-12 col-md-6 col-lg-4" ng-repeat="c in vocabularies.countries | filter:countryFilter">
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="checkbox" checklist-model="currentUser.countries" checklist-value="c.value"/>
									<label class="form-check-label">{{c.name}}</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveUser(currentUser)">Save changes</button>
			</div>
		</div>
	</div>
</div>




