<script>
    import { goto } from '$app/navigation';
    import Navbar from '../Navbar.svelte';
    
    let username = '';
    let password = '';
    let error = '';
    let isLoading = false;

    async function handleLogin() {
        if (!username || !password) {
            error = 'Please enter both username and password';
            return;
        }

        isLoading = true;
        error = '';
        
        // Simulate login request
        try {
            await new Promise(resolve => setTimeout(resolve, 1000));
            // Replace with actual login logic
            // await yourAuthFunction(username, password);
            goto('/'); // Redirect after successful login
        } catch (err) {
            error = 'Invalid credentials';
        } finally {
            isLoading = false;
        }
    }
</script>
<main>
    <Navbar />
    <div class="login-container">
        <div class="login-card">
            <h2 class="mb-4">Login</h2>
            
            {#if error}
                <div class="alert alert-danger">{error}</div>
            {/if}
    
            <form on:submit|preventDefault={handleLogin}>
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="username" 
                        bind:value={username}
                        required
                    />
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input 
                        type="password" 
                        class="form-control" 
                        id="password" 
                        bind:value={password}
                        required
                    />
                </div>
                <button 
                    type="submit" 
                    class="btn btn-primary w-100"
                    disabled={isLoading}
                >
                    {#if isLoading}
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Logging in...
                    {:else}
                        Login
                    {/if}
                </button>
            </form>
        </div>
    </div>
</main>

<style>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 44px); /* Account for navbar height */
        padding: 2rem;
        background-color: #f8f9fa;
    }

    .login-card {
        width: 100%;
        max-width: 400px;
        padding: 2rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .form-control {
        padding: 0.75rem;
    }

    .btn {
        padding: 0.75rem;
    }
</style>