import { Head } from "$fresh/runtime.ts";

export default function Login() {
    return (
        <>
            <Head>
                <title>Simple file server - Login</title>
            </Head>
            <div class="">
                <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"
                    />
                    <form action="/api/login" 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>
            </div>
        </>
    );
}
