<script lang="ts">
	import '../../app.postcss';
	import {
		Sidebar,
		SidebarGroup,
		SidebarItem,
		SidebarWrapper,
		SidebarDropdownItem,
		SidebarDropdownWrapper
	} from 'flowbite-svelte';
	import {
		ClipboardSolid,
		GridSolid,
		UserSolid,
		ClockSolid,
		CartOutline,
		BuildingSolid,
		ChartMixedSolid,
		CalendarMonthSolid,
		BellSolid,
		DrawSquareSolid,
		UsersSolid,
		RedoOutline,
		HomeSolid
	} from 'flowbite-svelte-icons';

	export let data;
	$: isAdmin = data.role === 'ADMIN';
</script>

<div class="min-h-screen w-screen flex">
	<Sidebar>
		<SidebarWrapper>
			<SidebarGroup>
				<!-- NOTE: Home -->
				<SidebarItem label="Home" href="/app">
					<svelte:fragment slot="icon">
						<HomeSolid
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
				</SidebarItem>

				<!-- NOTE: Activity -->
				<SidebarDropdownWrapper label="Activity">
					<svelte:fragment slot="icon">
						<ClipboardSolid
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
					<SidebarDropdownItem label="Record" href="/app/activity/record" />
					{#if isAdmin}
						<SidebarDropdownItem label="Setting" href="/app/activity/setting" />
						<SidebarDropdownItem label="Group" href="/app/activity/group" />
					{/if}
				</SidebarDropdownWrapper>

				<!-- NOTE: OT -->
				<SidebarDropdownWrapper label="OT">
					<svelte:fragment slot="icon">
						<ClockSolid
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
					<SidebarDropdownItem label="Record" href="/app/ot/record" />
					{#if isAdmin}
						<SidebarDropdownItem label="Setting" href="/app/ot/setting" />
					{/if}
				</SidebarDropdownWrapper>

				<!-- NOTE: Rainfall -->
				<SidebarItem label="Rainfall" href="/app/rainfall">
					<svelte:fragment slot="icon">
						<GridSolid
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
				</SidebarItem>

				<!-- NOTE: Vehicle -->
				<SidebarDropdownWrapper label="Vehicle">
					<svelte:fragment slot="icon">
						<CartOutline
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
					<SidebarDropdownItem label="Record" href="/app/vehicle/record" />
					{#if isAdmin}
						<SidebarDropdownItem label="Name" href="/app/vehicle/name" />
					{/if}
				</SidebarDropdownWrapper>

				{#if isAdmin}
					<!-- NOTE: Incentive -->
					<SidebarDropdownWrapper label="Incentive">
						<svelte:fragment slot="icon">
							<ChartMixedSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
						<SidebarDropdownItem label="Record" href="/app/incentive/record" />
						<SidebarDropdownItem label="Setting" href="/app/incentive/setting" />
					</SidebarDropdownWrapper>

					<!-- NOTE: Monthly Record -->
					<SidebarItem label="Monthly Record" href="/app/monthly">
						<svelte:fragment slot="icon">
							<CalendarMonthSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
					</SidebarItem>

					<!-- NOTE: Block -->
					<SidebarItem label="Block" href="/app/block">
						<svelte:fragment slot="icon">
							<BuildingSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
					</SidebarItem>

					<!-- NOTE: Sector -->
					<SidebarItem label="Sector" href="/app/sector">
						<svelte:fragment slot="icon">
							<DrawSquareSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
					</SidebarItem>

					<!-- NOTE: Public Holiday -->
					<SidebarItem label="Public Holiday" href="/app/public-holiday">
						<svelte:fragment slot="icon">
							<BellSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
					</SidebarItem>

					<!-- NOTE: Employee -->
					<SidebarItem label="Employee" href="/app/employee">
						<svelte:fragment slot="icon">
							<UsersSolid
								class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
							/>
						</svelte:fragment>
					</SidebarItem>
				{/if}

				<!-- NOTE: User -->
				<SidebarDropdownWrapper label="User">
					<svelte:fragment slot="icon">
						<UserSolid
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
					<SidebarDropdownItem label="Reset Password" href="/app/user/reset-password" />
					{#if isAdmin}
						<SidebarDropdownItem label="Manage User" href="/app/user/manage" />
					{/if}
				</SidebarDropdownWrapper>

				<!-- NOTE: Sign out -->
				<SidebarItem label="Sign out" href="/app/sign-out">
					<svelte:fragment slot="icon">
						<RedoOutline
							class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
						/>
					</svelte:fragment>
				</SidebarItem>
			</SidebarGroup>
		</SidebarWrapper>
	</Sidebar>

	<div class="py-8 px-10 overflow-hidden">
		<slot />
	</div>
</div>