export default function LoginForm({
    redirect = "/",
    failed = false,
}: { redirect?: string
    failed?: boolean }
) {

    return <div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] 
    flex flex-col items-center border-gray-500 border-2 rounded-md
    sm:max-w-screen-sm max-w-screen-md">
        <img
            src="/logo.svg"
            class="w-32 h-32"
            alt="the fresh logo: a sliced lemon dripping with juice"
        />
        <h1 class="text-2xl font-bold">Login</h1>
        {failed ? <p class="text-red-500">Login failed</p> : null}
        <form
            action={"/login?redirect=" + redirect}
            method="POST"
            class="flex flex-col gap-2 items-stretch"
        >
            <div class="flex gap-2 flex-wrap">
                <div class="basis-40 flex items-center flex-1">
                    <label for="username" class="w-20">Username</label>
                    <input
                        type="text"
                        name="username"
                        id="username"
                        class="border-b-2 focus:border-green-500 transition-colors flex-1"
                    />
                </div>
                <div class="flex items-center flex-1">
                    <label for="password" class="w-20">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        class="border-b-2 focus:border-green-500 transition-colors flex-1"
                    />
                </div>
            </div>
            <button
                type="submit"
                class="bg-gray-400 p-2 rounded
                            m-auto"
            >
                Login
            </button>
        </form>
    </div>
}