<script lang="ts">
import UserTable from '$lib/components/table/UserTable.svelte';
import { resolve } from '$app/paths';

const {data} = $props();
</script>

<div class="flex justify-between items-center ">
	<p class="font-bold">用户管理</p>
	<div class="breadcrumbs ">
		<ul>
			<li><a href={resolve('/app/dashboard')}>仪表盘</a></li>
			<li><a href={resolve('/app/settings')}>系统设置</a></li>
			<li><a href={resolve('/app/settings/auth')}>认证管理</a></li>
			<li><a href={resolve('/app/settings/auth/users')}>用户管理</a></li>
		</ul>
	</div>
</div>
{#await data.streamed.userList}
	加载中
{:then result}
	{#await data.streamed.roles}
		加载中
	{:then roles}
		<UserTable users={result} roles={roles}/>
	{:catch err}
		<p>出错了: {err.message}</p>
	{/await}
{:catch err}
	<p>出错了: {err.message}</p>
{/await}