@extends('layouts.auth')

@section('title', 'Sign in')

@section('content')
    <h2>Welcome back</h2>
    <p class="lead">Sign in to your finance dashboard</p>

    <form method="POST" action="/login" id="loginForm">
        @csrf
        <div class="form-row">
            <label for="email">Email address</label>
            <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username">
        </div>
        <div class="form-row">
            <label for="password">Password</label>
            <input id="password" type="password" name="password" required autocomplete="current-password">
        </div>
        <div class="checkbox-row">
            <input id="remember" type="checkbox" name="remember">
            <label for="remember" style="margin: 0;">Remember me on this device</label>
        </div>
        <button type="submit" class="btn-primary" id="loginButton">Sign in</button>
    </form>

    <div class="helper-links">
        <a href="/forgot-password">Forgot your password?</a>
    </div>

    {{-- Prevent double submission (a fast double-click re-posts with a stale CSRF token → 419 Page Expired) --}}
    <script>
        (function () {
            var form = document.getElementById('loginForm');
            var button = document.getElementById('loginButton');
            if (!form || !button) return;

            form.addEventListener('submit', function (event) {
                if (form.dataset.submitting === '1') {
                    event.preventDefault();
                    return;
                }
                form.dataset.submitting = '1';
                // Disable on the next tick so the in-flight submission still completes.
                window.setTimeout(function () {
                    button.disabled = true;
                    button.textContent = 'Signing in…';
                }, 0);
            });
        })();
    </script>
@endsection