<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/images/favicon/site.webmanifest">
    <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/images/favicon/favicon.ico">
    <meta name="apple-mobile-web-app-title" content="Pax S90">
    <meta name="application-name" content="Pax S90">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="msapplication-TileImage" content="/images/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    
    <title>Datex Pay | Login</title>
    <link rel="stylesheet" href="/css/login-style.css">
</head>

<body>


    <div class="container">
        <div class="screen">
            <div class="screen__content">
                <div class="login-title">
                    <h3>Datex Pay - Diagnostic System and Service Desk</h3>
                    <span id="version"></span>
                <!-- <p class="login-title"> <br> </p>     -->
                </div>
                
                
                <form class="login" action="/auth" method="post">
                    <% if (message) { %>
                        <div class="error-message">
                            <%= message %>
                        </div>
                        <% } %>
                            <div class="login__field">
                                <i class="login__icon fas fa-user"></i>
                                <input type="text" class="login__input" id="login" name="login"
                                    placeholder="User name / Email">
                            </div>
                            <div class="login__field">
                                <i class="login__icon fas fa-lock"></i>
                                <input type="password" class="login__input" id="password" name="password"
                                    placeholder="Password">
                            </div>
                            <input class="button login__submit" type="submit" value="Login">

                            <% if (enableSignup) { %> <!-- Only show the signup button if signup is enabled -->
                                <button class="sign-up-btn" onclick="window.location.href='/signup'">Sign up</button>
                                <% } else { %>
                                    <button class="sign-up-btn disabled-btn" disabled="disabled">Sign up</button>
                                    <% } %>

                </form>
                

                

                <div class="social-login">
                    
                    <img class="logo" src="/images/favicon/favicon.ico" alt="" sizes="20px" >
                    <h3>Datex Pay</h3>
                    <div class="social-icons">
                        <a href="#" class="social-login__icon fab fa-instagram"></a>
                        <a href="#" class="social-login__icon fab fa-facebook"></a>
                        <a href="#" class="social-login__icon fab fa-twitter"></a>
                    </div>
                </div>
            </div>
            <div class="screen__background">
                <span class="screen__background__shape screen__background__shape4"></span>
                <span class="screen__background__shape screen__background__shape3"></span>		
                <span class="screen__background__shape screen__background__shape2"></span>
                <span class="screen__background__shape screen__background__shape1"></span>
            </div>	
            <p class="login-footer"> © 2024 Ал Омаири Ахмед </p>	
        </div>
        
    </div>
 
</body>
<script src="js/auth.js"></script>
<script>
    const version = document.getElementById('version');
    version.innerText = serverEnv.version
</script>
</html>
