<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head') %> 
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="formstyle.css">
    <script src="/client-validation.js" defer></script>
    <style>
        body{
            overflow-y: hidden;
        }
        .input-submit {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            padding-bottom: 35px;
            text-align: center;
        }
        .input-submit:hover {
            background-color: #000;
            color: #fff;
        }
    </style>
    
</head>
<body>
    <%- include('partials/navbar') %>

    <div class="container">
        <div class="box">
            <div class="header">
                <p><%= action === 'login' ? 'Log In' : 'Sign Up' %></p>
            </div>
            <% if (errors && errors.length > 0) { %>
                <div class="alert alert-danger">
                    <% errors.forEach(function(error) { %>
                        <div class="error-message"><i class="bx bx-error"></i> <%= error.msg %></div>
                    <% }); %>
                </div>
            <% } %>
            <form action="/<%= action %>" method="post" id="authForm">
                <% if (action === 'signup') { %>
                    <div class="input-box">
                        <label for="username">Username</label>
                        <input type="text" class="input-field" id="username" name="username" placeholder="Enter Username" required>
                        <i class="bx bx-user"></i>
                    </div>
                    <div class="input-box">
                        <label for="email">Email</label>
                        <input type="email" class="input-field" id="email" name="email" placeholder="Enter Email" required>
                        <i class="bx bx-envelope"></i>
                    </div>
                    <div class="input-box">
                        <label for="phone">Phone</label>
                        <input type="phone" class="input-field" id="phone" name="phone" placeholder="Enter Phone" required>
                        <i class="bx bx-phone"></i>
                    </div>
                    <div class="input-box">
                        <label for="password">Password</label>
                        <input type="password" class="input-field" id="password" name="password" placeholder="Enter Password" required>
                        <i class="bx bx-show" data-target="password" onclick="togglePasswordVisibility(this)"></i>
                    </div>
                    <div class="input-box">
                        <label for="confirmPassword">Confirm Password</label>
                        <input type="password" class="input-field" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" required>
                        <i class="bx bx-show" data-target="confirmPassword" onclick="togglePasswordVisibility(this)"></i>
                    </div>
                <% } else { %>
                    <div class="input-box">
                        <label for="username">Username</label>
                        <input type="text" class="input-field" id="username" name="username" placeholder="Enter Username" required>
                        <i class="bx bx-user"></i>
                    </div>
                    <div class="input-box">
                        <label for="password">Password</label>
                        <input type="password" class="input-field" id="password" name="password" placeholder="Enter Password" required>
                        <i class="bx bx-show" data-target="password" onclick="togglePasswordVisibility(this)"></i>
                    </div>
                <% } %>
                <div class="input-box">
                    <input type="submit" class="input-submit" value="<%= action === 'login' ? 'LOGIN' : 'SIGN UP' %>">
                </div>
            </form>
            <div class="bottom">
                <span>
                    <a href="/auth?<%= action === 'login' ? 'action=signup' : 'action=login' %>">
                        <%= action === 'login' ? 'Sign Up' : 'Log in' %>
                    </a>
                </span>
                <% if (action === 'login') { %>
                    <span><a href="#">Forgot Password?</a></span>
                <% } %>
                </div>
 
        </div>
        
    </div>
 
    <%- include('partials/bottom_nav') %>
    <script>
        // /preloader js styling
        let preloader = document.querySelector("#preloader");
        window.addEventListener("load",function(e){
            preloader.style.display = "none";
        });
    </script>
    <script>
        function togglePasswordVisibility(icon) {
            const targetId = icon.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
    
            // Toggle between 'password' and 'text' type
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('bx-show');
                icon.classList.add('bx-hide');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('bx-hide');
                icon.classList.add('bx-show');
            }
        }
    </script>
    <script>
        window.embeddedChatbotConfig = {
        chatbotId: "3y5y_b4ZtgDExQUL8b2_A",
        domain: "www.chatbase.co"
        }
        </script>
        <script
        src="https://www.chatbase.co/embed.min.js"
        chatbotId="3y5y_b4ZtgDExQUL8b2_A"
        domain="www.chatbase.co"
        defer>
        </script>

</body>
</html>