---
interface Props {
    error: string | null;
}

const { error } = Astro.props as Props;
---

<div class="card">
    <div class="card-body">
        {
            error && (
                <div class="alert alert-danger" style="text-align: center">
                    {error}
                </div>
            )
        }
        <form method="post" action="/login">
            <div class="form-floating mb-3">
                <input
                    type="text"
                    class="form-control"
                    id="username"
                    name="username"
                />
                <label class="form-label">Nom d'utilisateur</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
                />
                <label class="form-label">Mot de passe</label>
            </div>
            <div class="d-grid">
                <button type="submit" class="btn btn-primary">
                    Connexion
                </button>
            </div>
        </form>
    </div>
</div>