<!DOCTYPE html> 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css-file/login.css">
    <title>Simple School Portal</title>
</head>

<body id="body">

    <%- include('navbar') %>

    <div class="container">
        <div class="page" id="landingPage">
          
            <h2>Welcome</h2>
            <div class="container" id="container">
                <div class="form-container sign-up-container">
                    <form action="/views/signup.ejs" method="post"> 
                        <h1>Create Account for Teacher</h1><br>
                        
                        <input type="hidden" name="role" value="teacher">
                        <input type="text" placeholder="Name"  />
                        <input type="text" placeholder="Teacher ID" name="TeacherID" required/>
                        <input type="email" placeholder="Email" name="Email" required/>
                        <input type="password" placeholder="Password" name="Password"id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required />
                        <p>Already have an account? <a id="a" href="index.ejs">Sign in</a></p>
                        <button type="submit">Sign Up</button> 
                   </form>
                </div>
                
                <div class="form-container sign-in-container">
                    <form action="/views/signup.ejs" method="post"> 
                        <h1>Create Account for Student</h1><br>
                        
                        <input type="hidden" name="role" value="student">
                        <input type="text" placeholder="Name"  />
                        <input type="text" placeholder="Student ID" name="StudentID"  required/>
                        <input type="email" placeholder="Email" name="Email" required/>
                        <input type="password" placeholder="Password" name="Password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
                        <p>Already have an account? <a id="a" href="index.ejs">Sign in</a></p>
                        
                        <button type="submit">Sign Up</button> 
                    </form>
                </div>
                <div class="overlay-container">
                    <div class="overlay">
                        <div class="overlay-panel overlay-left">
                            <h1>Hello</h1>
                            <p>If you are a Student press here!</p>
                            <button class="ghost" id="signIn">Change</button>
                        </div>
                        <div class="overlay-panel overlay-right">
                            <h1>Hello</h1>
                            <p>If you are a Teacher press here!</p>
                            <button class="ghost" id="signUp">Change</button>
                        </div>
                    </div>
                </div>
            </div>
            

        </div>
    </div>

    <!-- Scripts -->
    <script src="js-file/script.js"></script>
</body>

</html>
