<div class="main-content">
	<div class="container-fluid user-listing">
		<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>

		<app-user-criteria-component></app-user-criteria-component>
		<mat-card class="mat-card">
			<mat-table [dataSource]="dataSource" matSort>

				<!-- Column Definition: Label -->
				<ng-container cdkColumnDef="name">
					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
				</ng-container>

				<ng-container cdkColumnDef="email">
					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.EMAIL' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">{{row.email}}</mat-cell>
				</ng-container>

				<ng-container cdkColumnDef="lastloggedin">
					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LAST-LOGGED-IN' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">{{row.lastloggedin | date:'shortDate'}}</mat-cell>
				</ng-container>

				<!-- Column Definition: Roles -->
				<ng-container cdkColumnDef="roles">
					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.ROLES' | translate}}</mat-header-cell>
					<mat-cell *matCellDef="let row">
						<app-user-role-editor-component [item]="row"></app-user-role-editor-component>
					</mat-cell>
				</ng-container>

				<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

			</mat-table>
			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
			</mat-paginator>
		</mat-card>
	</div>
</div>
