<script lang="ts">
	import { enhance } from '$app/forms';
	import { resolve } from '$app/paths';
	import Icon from '$lib/components/icon/Icon.svelte';
	export let form;

</script>

<div class="min-h-screen bg-base-200 flex items-center justify-center p-4">

	<div class="card w-full max-w-sm bg-base-100 shadow-2xl">
		<div class="card-body">

			<div class="text-center mb-4">
				<h2 class="text-2xl font-bold flex justify-center items-center gap-2">
					<Icon id="logo" size="40" className="inline-block"></Icon>
					<span>IT DTMS登录</span>
				</h2>
			</div>
			{#if form?.message}
				<div class="alert alert-error text-sm py-2 mb-4">
					{form.message}
				</div>
			{/if}
			<form method="post" use:enhance class="space-y-4">

				<div class="form-control">
					<label class="label">
						<span class="label-text">用户名</span>
					</label>
					<div class="relative">
						<input
							type="text"
							name="username"
							placeholder="username"
							class="input input-bordered w-full pl-10"
							required
						/>
						<span class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" /></svg>
            </span>
					</div>
				</div>

				<div class="form-control">
					<label class="label">
						<span class="label-text">密码</span>
					</label>
					<div class="relative">
						<input
							type="password"
							name="password"
							placeholder="password"
							class="input input-bordered w-full pl-10"
							required
						/>
						<span class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z" clip-rule="evenodd" /></svg>
            </span>
					</div>

				</div>

				<div class="form-control mt-6 flex justify-between">
					<label class="label cursor-pointer justify-start gap-2">
						<input type="checkbox"  class="checkbox checkbox-sm checkbox-primary" />
						<span class="label-text">记住我</span>
					</label>
					<div class="label" >
						<a href={resolve('/auth/forgetPassword')} class="label-text-alt link link-hover">忘记密码?</a>
					</div>
				</div>

				<div class="form-control mt-2">
					<button class="btn btn-primary w-full" >

							登录

					</button>
				</div>

			</form>
		</div>
	</div>
</div>