"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>BMRS - Login</title>\n    <link rel=\"stylesheet\" href=\"/openmrs/ms/uiframework/resource/botswanaemr/styles/fontawesome/css/all.min.css\">\n    <link rel=\"icon\" type=\"image/png\" href=\"/openmrs/images/openmrs-favicon.png\"/>\n    <link href=\"/openmrs/ms/uiframework/resource/botswanaemr/styles/login-design.css\" rel=\"stylesheet\" type=\"text/css\">\n    <script src=\"/openmrs/csrfguard\" type=\"text/javascript\"></script>\n\n</head>\n\n<body>\n<div class=\"login-container\">\n    <div class=\"header\">\n        <div class=\"logo-img\"></div>\n\n        <div class=\"title\">Ministry of Health</div>\n\n        <div class=\"subtitle\">Botswana Medical Records System</div>\n    </div>\n\n    <form id=\"loginForm\" method=\"post\">\n        \n\n\n\n\n        <div class=\"form-group\">\n            <label for=\"username\">Username</label>\n            <i class=\"fas fa-user input-icon\"></i>\n            <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Enter your username\" required>\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"password\">Password</label>\n            <i class=\"fas fa-lock input-icon\"></i>\n            <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Enter your password\" required>\n            <i class=\"fas fa-eye-slash password-toggle\" id=\"passwordToggle\"></i>\n        </div>\n\n        <div class=\"forgot-password\">\n            <a href=\"#\" id=\"forgotPasswordLink\">Forgot password?</a>\n        </div>\n\n        <button type=\"submit\" class=\"btn-login\">\n            <i class=\"fas fa-sign-in-alt\"></i>\n            Sign in\n        </button>\n        <input type=\"hidden\" name=\"redirectUrl\" value=\"\"/>\n    </form>\n</div>\n\n<!-- Forgot Password Modal -->\n<div class=\"modal\" id=\"forgotPasswordModal\">\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <h3 class=\"modal-title\">Password Assistance</h3>\n            <button class=\"close-modal\">&times;</button>\n        </div>\n\n        <div class=\"modal-body\">\n            <p>For security reasons, password resets must be handled by your system administrator.</p>\n\n            <p>Please contact your hospital's IT support team to reset your password.</p>\n\n            <p><i class=\"fas fa-phone-alt\"></i> IT Support: +267 363 2730</p>\n        </div>\n\n        <div class=\"modal-footer\">\n            <button class=\"btn-ok\">I Understand</button>\n        </div>\n    </div>\n</div>\n\n<script>\n    var OPENMRS_CONTEXT_PATH = 'openmrs';\n\n    // Forgot password modal\n    const forgotPasswordLink = document.getElementById('forgotPasswordLink');\n    const modal = document.getElementById('forgotPasswordModal');\n    const closeModal = document.querySelector('.close-modal');\n    const btnOk = document.querySelector('.btn-ok');\n\n    // Password toggle functionality\n    const passwordInput = document.getElementById('password');\n    const passwordToggle = document.getElementById('passwordToggle');\n\n    // Toggle password visibility\n    passwordToggle.addEventListener('click', function () {\n        if (passwordInput.type === 'password') {\n            passwordInput.type = 'text';\n            passwordToggle.classList.replace('fa-eye-slash', 'fa-eye');\n        } else {\n            passwordInput.type = 'password';\n            passwordToggle.classList.replace('fa-eye', 'fa-eye-slash');\n        }\n    });\n\n    // Show/hide toggle based on input content\n    passwordInput.addEventListener('input', function () {\n        if (passwordInput.value.length > 0) {\n            passwordToggle.classList.add('visible');\n        } else {\n            passwordToggle.classList.remove('visible');\n            // Reset to password type if empty\n            passwordInput.type = 'password';\n            passwordToggle.classList.replace('fa-eye', 'fa-eye-slash');\n        }\n    });\n\n    // Forgot password modal logic\n    forgotPasswordLink.addEventListener('click', function (e) {\n        e.preventDefault();\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    });\n\n    closeModal.addEventListener('click', function () {\n        modal.style.display = 'none';\n        document.body.style.overflow = 'auto';\n    });\n\n    btnOk.addEventListener('click', function () {\n        modal.style.display = 'none';\n        document.body.style.overflow = 'auto';\n    });\n\n    // Close modal when clicking outside\n    window.addEventListener('click', function (e) {\n        if (e.target === modal) {\n            modal.style.display = 'none';\n            document.body.style.overflow = 'auto';\n        }\n    });\n\n    // Login button loading state\n    const loginForm = document.getElementById('loginForm');\n    const loginBtn = loginForm.querySelector('.btn-login');\n    const originalBtnHTML = loginBtn.innerHTML;\n\n    loginForm.addEventListener('submit', function () {\n        // Change button to loading state\n        loginBtn.disabled = true;\n        loginBtn.innerHTML = '<i class=\"fas fa-circle-notch fa-spin\"></i> Signing in, please wait...';\n    });\n\n    // Reset button if login fails (when an error alert is present)\n    window.addEventListener('load', function () {\n        const errorAlert = document.querySelector('.alert-danger');\n        if (errorAlert) {\n            loginBtn.disabled = false;\n            loginBtn.innerHTML = originalBtnHTML;\n        }\n    });\n</script>\n\n</body>\n</html>\n"