<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - MerchantsOfHope.org</title>
    <meta name="description" content="Login to your MerchantsOfHope.org account">
    
    <link rel="stylesheet" href="/static/css/accessibility.css">
</head>
<body>
    <a href="#main" class="skip-link">Skip to main content</a>
    
    <header>
        <div class="container">
            <h1>MerchantsOfHope.org</h1>
            <p>Login to Your Account</p>
            
            <nav aria-label="Main navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/positions">Browse Positions</a></li>
                    <li><a href="/apply">Apply</a></li>
                    <li><a href="/login">Login</a></li>
                    <li><a href="/register">Register</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main id="main">
        <div class="container">
            <h1>Login</h1>
            
            <form id="login-form">
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" required aria-describedby="email-help">
                    <div id="email-help" class="form-hint">Enter your registered email address</div>
                </div>
                
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" required aria-describedby="password-help">
                    <div id="password-help" class="form-hint">Enter your password</div>
                </div>
                
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
            
            <div class="divider">
                <span>Or continue with</span>
            </div>
            
            <div class="social-login">
                <button class="social-btn" onclick="socialLogin('oidc')" aria-label="Login with enterprise SSO">
                    <span>🏢</span> <span>Enterprise SSO (OIDC)</span>
                </button>
                <button class="social-btn" onclick="socialLogin('google')" aria-label="Login with Google">
                    <span>🔍</span> <span>Continue with Google</span>
                </button>
                <button class="social-btn" onclick="socialLogin('github')" aria-label="Login with GitHub">
                    <span>🐱</span> <span>Continue with GitHub</span>
                </button>
            </div>
            
            <div class="card" style="margin-top: var(--spacing-large);">
                <p>Don't have an account? <a href="/register">Register here</a></p>
                <p><a href="/forgot-password">Forgot your password?</a></p>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 MerchantsOfHope.org - A TSYS Group Initiative</p>
            <p>Committed to accessibility, security, and excellence</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set proper focus management
            const mainContent = document.getElementById('main');
            mainContent.setAttribute('tabindex', '-1');
            mainContent.focus();
            
            // Login form submission
            const loginForm = document.getElementById('login-form');
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Get form data
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                
                // Basic validation
                if (!email || !password) {
                    showError('Please enter both email and password');
                    return;
                }
                
                // In a real app, this would make an API call to authenticate the user
                alert(`Attempting to login with email: ${email}\n\nIn a real application, this would call the authentication API.`);
                
                // Simulate login success
                localStorage.setItem('isLoggedIn', 'true');
                localStorage.setItem('userEmail', email);
                
                // Redirect to dashboard or previous page
                window.location.href = '/';
            });
            
            // Ensure all interactive elements have proper focus management
            const interactiveElements = document.querySelectorAll('a, button, input, select, textarea');
            interactiveElements.forEach(el => {
                el.addEventListener('focus', function() {
                    this.style.outline = '2px solid var(--secondary-color)';
                    this.style.outlineOffset = '2px';
                });
                
                el.addEventListener('blur', function() {
                    this.style.outline = '';
                });
            });
        });
        
        function socialLogin(provider) {
            // In a real app, this would redirect to the appropriate OAuth provider
            alert(`Redirecting to ${provider} authentication. In a real application, this would redirect to the OAuth provider.`);
            
            // Store return URL to redirect after authentication
            localStorage.setItem('returnUrl', window.location.href);
        }
        
        function showError(message) {
            // Create error message element
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-error';
            errorDiv.textContent = message;
            errorDiv.setAttribute('role', 'alert');
            
            // Add to beginning of form
            const form = document.getElementById('login-form');
            form.insertBefore(errorDiv, form.firstChild);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (errorDiv.parentNode) {
                    errorDiv.parentNode.removeChild(errorDiv);
                }
            }, 5000);
        }
    </script>
</body>
</html>