<script lang="ts">
	import { userPerms, employerPerms, adminPerms } from '$lib/shared.svelte';
	let { data } = $props();

	const dateFormatOptions: Intl.DateTimeFormatOptions = {
		year: 'numeric',
		month: 'short',
		day: 'numeric'
	};

	function getRoleFromPerms(perms: number): string {
		if (perms & adminPerms) return 'Admin';
		if (perms & employerPerms) return 'Employer';
		if (perms & userPerms) return 'User';
		return 'None';
	}
</script>

<div class="content">
	<div class="elevated separator-borders m-4 rounded">
		<div class="bottom-border flex place-content-between">
			<div class="p-3 font-semibold">
				User Account Management (Total: {data.users?.length || 0})
			</div>
			<a class="dull-primary-bg-color m-2 rounded-md px-2.5 py-1" href="/admin/users/create"
				>Create new user</a
			>
		</div>
		<form action="" class="px-4">
			<div class="flex py-4">
				<div class="search-bar">
					<input
						type="search"
						name="searchUsers"
						id="searchUsers"
						placeholder="Search Users"
						class="search-cancel"
					/>
					<button><span class="material-symbols-outlined">search</span></button>
				</div>
				<!--				<button class="hover-bg-color mx-2 rounded py-2 pl-3 pr-2 text-sm"-->
				<!--					>Filter<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span-->
				<!--					></button-->
				<!--				>-->
				<!--				<button class="hover-bg-color rounded py-2 pl-3 pr-2 text-sm"-->
				<!--					>Sort<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span-->
				<!--					></button-->
				<!--				>-->
			</div>
		</form>
		<div class="table">
			<table>
				<thead>
					<tr>
						<th class="left w-16 py-1">ID</th>
						<th class="py-1">Username</th>
						<th class="py-1">Permissions</th>
						<th class="py-1">Created</th>
						<th class="py-1">Last Sign-In</th>
						<th class="py-1">Active</th>
						<th class="w-28 py-1"></th>
					</tr>
				</thead>
				<tbody>
					{#if data.users !== undefined}
						{#each data.users as user}
							<tr>
								<td class="left">{user.id}</td>
								<td>{user.username}</td>
								<td>{user.perms} ({getRoleFromPerms(user.perms)})</td>
								<td
									>{user.createdAt?.toLocaleDateString('en-US', dateFormatOptions) || 'unknown'}</td
								>
								<td
									>{user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions) ||
										'unknown'}</td
								>
								<td class="material-symbols-outlined py-1.5">
									{user.active ? 'check' : 'close'}
								</td>
								<td class="w-28 pr-1 text-end">
									<a
										class="hover-bg-color material-symbols-outlined hyperlink-color icon-20 tooltip relative my-1 rounded p-1"
										href="/admin/users/{user.id}"
										>person<span class="tooltip-text font-sans text-sm">View account</span></a
									>
									<a
										class="hover-bg-color material-symbols-outlined icon-20 hyperlink-color tooltip relative my-1 ml-1 mr-8 rounded p-1"
										href="/admin/users/{user.id}/edit"
										>edit<span class="tooltip-text font-sans text-sm">Edit account</span></a
									>
								</td>
							</tr>
						{/each}
					{/if}
				</tbody>
			</table>
		</div>
	</div>
</div>
