title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user

<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/mws-header">
	<$set name="page-title" value="User Profile">
		<$transclude/>
	</$set>
</$tiddler>
<div class="main-wrapper">
	<div class="user-profile-container">
		<div class="user-profile-header">
			<div class="user-profile-avatar">
				<$text text={{{ [<user-initials>uppercase[]] }}}/>
			</div>
			<h1 class="user-profile-name"><$text text={{{ [<user>jsonget[username]] }}}/></h1>
			<p class="user-profile-email"><$text text={{{ [<user>jsonget[email]] }}}/></p>
		</div>

		<div class="user-profile-details">
			<div class="user-profile-item">
				<span class="user-profile-label">User ID:</span>
				<span class="user-profile-value"><$text text={{{ [<user>jsonget[user_id]] }}}/></span>
			</div>
			<div class="user-profile-item">
				<span class="user-profile-label">Created At:</span>
				<span class="user-profile-value"><$text text={{{ [<user>jsonget[created_at]split[T]first[]] }}}/></span>
			</div>
			<div class="user-profile-item">
				<span class="user-profile-label">Last Login:</span>
				<span class="user-profile-value"><$text text={{{ [<user>jsonget[last_login]split[T]first[]] }}}/></span>
			</div>
			
			<div class="user-profile-roles">
				<h2>User Role</h2>
				<ul>
					<li>
						<$text text={{{ [<user-role>jsonget[role_name]] }}}/>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<% if [<user-is-admin>match[yes]] %>
		<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account">
			<$transclude/>
		</$tiddler>
	<% elseif [<is-current-user-profile>match[yes]] %>
		<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account">
			<$transclude/>
		</$tiddler>
	<% endif %>

	<$let flash-message={{{ [[$:/state/mws/flash-message]get[text]] }}}>
		<$reveal type="nomatch" state="$:/state/mws/flash-message" text="">
			<div class="flash-message">
				<$text text=<<flash-message>>/>
			</div>
			<$action-setfield $tiddler="$:/state/mws/flash-message" text=""/>
		</$reveal>
	</$let>
</div>

<style>
.main-wrapper {
	display: flex;
	flex-direction: row;
	gap: 5px;
	max-width: 80vw;
	margin: auto;
}

.user-profile-container {
	flex: 4;
	margin: 2rem auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	max-width: 600px;
}

.user-profile-header {
	background: #3498db;
	color: #fff;
	padding: 2rem;
	text-align: center;
}

.user-profile-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #3498db;
}

.user-profile-avatar * {
	color: #3498db;
}

.user-profile-name {
	font-size: 1.5rem;
	margin: 0;
}

.user-profile-email {
	font-size: 1rem;
	opacity: 0.8;
	margin: 0.5rem 0 0;
}

.user-profile-details {
	padding: 2rem;
}

.user-profile-item {
	margin-bottom: 1rem;
}

.user-profile-label {
	font-weight: bold;
	color: #555;
}

.user-profile-value {
	color: #333;
}

.user-profile-roles {
	margin-top: 2rem;
}

.user-profile-roles h2 {
	font-size: 1.2rem;
	color: #3498db;
	margin-bottom: 1rem;
}

.user-profile-roles ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.user-profile-roles li {
	background: #f1f1f1;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	display: inline-block;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}
</style>