package templates

templ Login() {
    <div class="container">
    <h2>Connection</h2>
        <form hx-post="/api/login" hx-target-error="#loginError" id="loginForm">
            <div hx-trigger="changed" id="loginError"></div>
            <div class="mb-3">
                <label for="email" class="form-label">Email Address</label>
                <input name="email" class="form-control" type="email" id="email" required>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input name="password" class="form-control" type="password" id="password" required>
            </div>
            <button class="btn btn-primary" type="submit">Connect</button>
        </form>

        <script type="application/javascript">
            document.getElementById('loginForm').addEventListener('htmx:afterRequest', function (ev) {
                if (ev.detail.successful) {
                    window.location.href = '/'
                }
            });
        </script>
    </div>
}