D-Net

<table class="table table-sm table-hover col-sm-12 col-md-10 col-lg-8">

	<thead class="thead-light">

		<tr class="d-flex">

			<th class="col-5">User</th>

			<th class="col-1 text-center">Enabled</th>

			<th class="col-1 text-center">Is admin</th>

			<th class="col-3">Countries</th>

			<th class="col-2"></th>

		</tr>

	</thead>

	<tbody>

		<tr ng-repeat="u in users" class="d-flex" ng-class="{'table-danger' : u.role == 'PENDING'}">

			<th class="col-5" ng-class="{'text-secondary': !u.valid}">{{u.email}}</th>

			<td class="col-1 text-center text-success">

				<i class="fa fa-check-circle" ng-if="u.valid"></i>

			</td>

			<td class="col-1 text-center">

				<i class="fa fa-check-circle" ng-if="u.role == 'SUPERUSER'"></i>

				<span class="text-warning" ng-if="u.role == 'PENDING'">not configured</span>

			</td>

			<td class="col-3">

				<span ng-if="u.role == 'USER'">

					<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 == 'SUPERUSER'">All countries</span>

				<span class="text-warning" ng-if="u.role == 'PENDING'">not configured</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 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: 300px; max-height: 500px; overflow-y: auto;">

				<form>

					<div class="form-group row">

						<label class="col-sm-2 col-form-label">Email</label>

						<div class="col-sm-10"><a href="mailto:{{currentUser.email}}">{{currentUser.email}}</a></div>

					</div>

					<div class="form-group row">

						<label class="col-sm-2 col-form-label">Enabled</label>

						<div class="col-sm-10">

							<div class="form-check">

								<input class="form-check-input" type="checkbox" ng-model="currentUser.valid" />

							</div>

						</div>

					</div>

					<div class="form-group row" ng-if="currentUser.valid">

						<label class="col-sm-2 col-form-label">Role</label>

						<div class="col-sm-10">

							<div class="form-check form-check-inline">

								<input class="form-check-input" type="radio" value="USER" ng-model="currentUser.role">

								<label class="form-check-label">USER</label>

							</div>

							<div class="form-check form-check-inline">

								<input class="form-check-input" type="radio" value="SUPERUSER" ng-model="currentUser.role">

								<label class="form-check-label">SUPERUSER</label>

							</div>

						</div>

					</div>

					<div class="card mb-3"  ng-if="currentUser.valid && currentUser.role == 'USER'">

						<div class="card-header bg-primary text-white py-1">Countries</div>

						<div class="card-body">

							<div class="form-group row">

								<div class="col-sm-2" ng-repeat="c in vocs.countries">

									<div class="form-check form-check-inline">

										<input class="form-check-input" type="checkbox" checklist-model="currentUser.countries" checklist-value="c"/>

										<label class="form-check-label">{{c}}</label>

									</div>

								</div>

							</div>

						</div>

					</div>

				</form>

			</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>