From 2ba9a8cee210c473590ed94c61c192acd9214e04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Wed, 21 Sep 2022 15:55:06 +0200
Subject: [PATCH] user details wip

---
 .../editor-view-users-user-details.element.ts | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-user-details.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-user-details.element.ts
index 3ad4c63aaf..8bcfb49358 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-user-details.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-user-details.element.ts
@@ -7,7 +7,38 @@ import { Subscription } from 'rxjs';
 
 @customElement('umb-editor-view-users-user-details')
 export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixin(LitElement) {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: grid;
+				grid-template-columns: 1fr 350px;
+				gap: var(--uui-size-space-6);
+				padding: var(--uui-size-space-6);
+			}
+
+			#left-column {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#right-column > uui-box > div {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-2);
+			}
+			uui-avatar {
+				width: 50%;
+				flex: 1 1 0%;
+				place-self: center;
+			}
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				width: 100%;
+			}
+		`,
+	];
 
 	@state()
 	private _users: Array<UserItem> = [];
@@ -46,7 +77,26 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
 	}
 
 	render() {
-		return html`${this._user?.name}`;
+		return html`
+			<div id="left-column">
+				<uui-box>
+					<p slot="headline">Profile</p>
+				</uui-box>
+				<uui-box>
+					<p slot="headline">Profile</p>
+				</uui-box>
+			</div>
+			<div id="right-column">
+				<uui-box>
+					<div>
+						<uui-avatar .name=${this._user?.name || ''}></uui-avatar>
+						<uui-button label="Change photo"></uui-button>
+						<hr />
+						<uui-button look="primary" color="danger" label="Delete User"></uui-button>
+					</div>
+				</uui-box>
+			</div>
+		`;
 	}
 }