title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-users

\define edit-user-actions(user-id)
	<$action-sendmessage $message="tm-modal" $param="$:/plugins/tiddlywiki/multiwikiserver/templates/edit-user-modal" user-id=<<user-id>>/>
\end

\define delete-user-actions(user-id)
	<$action-sendmessage $message="tm-server-request"
		method="DELETE"
		url={{{ [[$:/admin/users/]addsuffix<user-id>] }}}
		redirectAfterSuccess="/admin/users"/>
\end

<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/mws-header">
	<$set name="page-title" value="User Management">
		<$transclude/>
	</$set>
</$tiddler>

<div class="users-container">
	<$list filter="[<user-list>jsonindexes[]count[]!match[0]]">
		<div class="users-list">
			<$list filter="[<user-list>jsonindexes[]]" variable="user-index">
				<$let currentUser={{{ [<user-list>jsonextract<user-index>] }}}>
					<$set name="user-id" value={{{ [<currentUser>jsonget[user_id]] }}}>
						<a href={{{ [[/admin/users/]addsuffix<user-id>addsuffix[?q=preview]] }}} class="user-item">
							<div class="user-info">
								<span class="user-name">
									<$text text={{{ [<currentUser>jsonget[username]] }}}/>
								</span>
								<span class="user-email">
									<$text text={{{ [<currentUser>jsonget[email]] }}}/>
								</span>
							</div>
							<div class="user-details">
								<span class="user-created">
									Created: <$text text={{{ [<currentUser>jsonget[created_at]] }}}/>
								</span>
								<span class="user-last-login">
									Last Login: <$text text={{{ [<currentUser>jsonget[last_login]] }}}/>
								</span>
							</div>
						</a>
					</$set>
				</$let>
			</$list>
		</div>
	</$list>

	<$list filter="[<user-is-admin>match[yes]][<first-guest-user>match[yes]]">		
		<div class="add-user-card">
			<$transclude tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/add-user-form" mode="inline"/>
		</div>
	</$list>
</div>

<style>
	.users-container {
		margin: auto;
		max-width: 1200px;
		display: flex;
		justify-content: space-between;
		gap: 2rem;
	}
	.users-list {
		flex: 1;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 2rem;
	}
	.add-user-card {
		width: 300px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 2rem;
		margin: auto;
	}
	.user-item {
		display: block;
		width: 100%;
		text-align: left;
		background: none;
		border: none;
		border-bottom: 1px solid #eee;
		padding: 1rem 0;
		cursor: pointer;
		transition: background-color 0.3s ease;
		text-decoration: none;
	}
	.user-item:hover {
		background-color: #f5f5f5;
		text-decoration: none;
	}
	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-name {
		font-weight: bold;
	}
	.user-email {
		color: #666;
	}
	.user-details {
		font-size: 0.9em;
		color: #888;
		margin-top: 0.5rem;
	}
	.add-user-form {
		display: none; /* Hide the original add user button */
	}
	.tc-btn-big-green {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 1em;
	}
	.tc-btn-big-green:hover {
		background-color: #45a049;
	}
	.no-users-message {
		text-align: center;
		padding: 2rem;
		color: #666;
	}
</style>