<div class='container' [class]="user.active?'active':'inactive'"
    cdkDropList
    (cdkDropListDropped)="drop($event)"
    >
    <div class='titleBar' fxLayout>
        <div class='name' [title]='user.email' fxFlex>
            {{ user.name }}
        </div>
        <button mat-button fxFlex='0 1 0%' matTooltip='Edit user' (click)='edit()'>
            <mat-icon>edit</mat-icon>
        </button>
        <button mat-button fxFlex='0 1 0%' matTooltip='Delete user' (click)='delete()'>
            <mat-icon>delete</mat-icon>
        </button>
    </div>
    <mat-chip-listbox #chipList>
        <mat-chip-option *ngFor='let role of user.roles$ | async'
            [selectable]='true'
            [removable]='true'
            (removed)="removeUserRole(user, role)"
        >
            {{ role.name }}
            <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip-option>
    </mat-chip-listbox>
</div>