import { Layout } from "../layout.tsx";

interface LoginProps {
    error?: string;
}

export function Login({ error }: LoginProps) {
    return (
        <Layout user={null} title="Sign in">
            <div class="auth-container">
                <h1 class="page-title">Sign in</h1>
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <form method="POST" action="/login" class="auth-form">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input
                            id="username"
                            name="username"
                            type="text"
                            required
                            autocomplete="username"
                        />
                    </div>
                    <div id="passkey-section" style="display:none">
                        <button
                            id="passkey-btn"
                            class="btn btn-secondary btn-block"
                            type="button"
                        >
                            Sign in with passkey
                        </button>
                        <p id="passkey-error" style="display:none"></p>
                        <div class="auth-divider">
                            <span>or</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            required
                            autocomplete="current-password"
                        />
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        Sign in with password
                    </button>
                </form>
                <p class="auth-footer">
                    Don't have an account? <a href="/register">Register</a>
                </p>
            </div>
            <script type="module" src="/assets/passkey-login.js"></script>
        </Layout>
    );
}