@if (user$ | async; as user) {
	<!-- Space scrolls the page on a div; the role="button" contract is to activate instead,
	     hence the preventDefault() on the Space handler below. -->
	<div
		class="user-container"
		[class.with-identity]="showIdentity"
		[attr.title]="showIdentity ? null : user?.name"
		[attr.aria-label]="user?.name"
		role="button"
		tabindex="0"
		(click)="onClicked()"
		(keydown.enter)="onClicked()"
		(keydown.space)="$event.preventDefault(); onClicked()"
	>
		<div class="img-container">
			@if (user?.imageUrl) {
				<img [src]="user.imageUrl" [alt]="user?.name" />
			} @else {
				<span class="initials">{{ initials(user) }}</span>
			}
			<span class="presence" [class.online]="online$ | async" [class.offline]="!(online$ | async)"></span>
		</div>
		@if (showIdentity) {
			<div class="identity-container">
				<div class="name">{{ user?.name }}</div>
				<div class="email">{{ user?.email }}</div>
			</div>
		}
	</div>
}