<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexCore Pharma - Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="auth-body">

    <div class="login-container" style="opacity: 0;">
        <div class="brand">
            <h1>NexCore Pharma</h1>
            <p>Multi-Tenant Pharmacy Management</p>
        </div>

        <?php
        $flash = \App\Utils\Flash::get();
        if ($flash):
        ?>
            <div class="flash-message flash-<?php echo htmlspecialchars($flash['type']); ?>">
                <?php echo htmlspecialchars($flash['message']); ?>
            </div>
        <?php endif; ?>

        <form action="/login/authenticate" method="POST">
            <div class="input-group">
                <label for="email">Email Address or Username</label>
                <input type="text" id="email" name="email" placeholder="pharmacist@tenant.com" required>
            </div>
            
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required>
            </div>

            <button type="submit" class="btn-primary">Sign In</button>
            <p style="text-align: center; margin-top: 1rem; font-size: 0.9rem;">
                <a href="/register" style="color: var(--primary-color); text-decoration: none;">New Pharmacy? Create an account.</a>
            </p>
    </div>

    <script>
        // Auto-mark required fields with a red asterisk
        document.querySelectorAll('input[required], select[required], textarea[required]').forEach(element => {
            if(element.id) {
                const label = document.querySelector(`label[for="${element.id}"]`);
                if(label && !label.innerHTML.includes('req-mark')) {
                    label.innerHTML = label.innerHTML.replace(/\s*\*\s*$/, '') + ' <span class="req-mark" style="color: #ef4444;">*</span>';
                }
            }
        });
    </script>
</body>
</html>
