-[ template "/base/base.html" ]-

-[ block body ]-

-[ insert "/base/path.html" ]-

<div class="row justify-content-center" style="padding-top: 50px; padding-bottom: 30px;">
    <div class="col-md-8 col-lg-6">
        <div class="card shadow">
            <div class="card-body">
                <h2 class="text-center mb-4">Login</h2>

                <!-- error message placeholder -->
                <div id="login-error" class="alert alert-danger" style="display:none;"></div>

                <form id="login-form" method="POST">
                    <div class="mb-3">
                        <label for="host" class="form-label">Host</label>
                        <select name="host" class="form-select" id="host" required>
                        -[ for h hosts ]- 
                            <option value="-[ h ]-" selected>-[ h ]-</option>
                        -[ endfor ]- 
                        </select>
                    </div> 
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label> 
                        <input type="text" class="form-control" id="username" placeholder="Username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input name="password" class="form-control" type="password" placeholder="Password" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-pink">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('login-form');
        const errorDiv = document.getElementById('login-error');

        form.addEventListener('submit', async event => {
            event.preventDefault();
            errorDiv.style.display = 'none';
            errorDiv.textContent = '';

            // Collect form data as URL-encoded
            const formData = new FormData(form);
            const urlParams = new URLSearchParams();
            for (const [key, value] of formData.entries()) {
                urlParams.append(key, value);
            }

            try {
                const res = await fetch(window.location.pathname, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: urlParams.toString(),
                    credentials: 'include'
                });
                
                const json = await res.json();

                if (json.success === false) {
                    // login failed
                    errorDiv.textContent = json.message || 'Invalid credentials';
                    errorDiv.style.display = 'block';
                } else {
                    // login succeeded — pick a redirect target:
                    //   1) ?next=<path> on this URL (must be same-origin path)
                    //   2) document.referrer if same-origin and not /user/login
                    //   3) "/" as a safe fallback
                    const params = new URLSearchParams(window.location.search);
                    const next = params.get('next');
                    let target = '/';
                    if (next && next.startsWith('/') && !next.startsWith('//')) {
                        target = next;
                    } else if (document.referrer && document.referrer.startsWith(window.location.origin)) {
                        const url = new URL(document.referrer);
                        if (url.pathname !== '/user/login') {
                            target = url.pathname + url.search;
                        }
                    }
                    setTimeout(() => {
                        window.location.href = target;
                    }, 500);
                    errorDiv.textContent = json.message || 'Logged in successfully. Redirecting...';
                    errorDiv.style.display = 'block';
                }
            } catch (err) {
                console.error('Login error:', err);
                errorDiv.textContent = 'An error occurred. Please try again.';
                errorDiv.style.display = 'block';
            }
        });
    });
</script>

-[ endblock ]-