argos/dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.html

<div class="container-fluid">
	<div class="row">
		<div class="col-12 pt-4 pb-4 pl-4">
			<div class="table-header col-auto d-flex">
				<span class="table-title">Collaborators</span>
				<div class="table-action" (click)="openShareDialog(dmp.id, dmp.label)">
					<mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span>
				</div>
			</div>
			<div class="table-container">
				<table *ngIf="formGroup.get('users')">
					<tr>
						<th>{{'USERS.LISTING.NAME' | translate}}</th>
						<th>{{'USERS.LISTING.EMAIL' | translate}}</th>
						<th>{{'USERS.LISTING.PERMISSIONS' | translate}}</th>
						<th *ngIf="isOwner()"></th>
					</tr>
					<tr *ngFor="let user of formGroup.get('users')?.value">
						<td>{{user.name}}</td>
						<td>{{user.email}}</td>
						<td>{{roleDisplay(user)}}</td>
						<td *ngIf="isOwner()">
							<div *ngIf="user.role" class="remove_user" (click)="removeCollaborator(user.id)">
								<mat-icon>delete</mat-icon>
							</div>
						</td>
					</tr>
				</table>
				<!-- <mat-list *ngIf="associatedUsers?.length" role="list" class="col-12">
					<h3 mat-subheader>Associated Users</h3>
					<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
						<mat-icon mat-list-icon>person</mat-icon>
						<div>{{user.name}}</div>
					</mat-list-item>
				</mat-list> -->
			</div>
		</div>
	</div>
</div>