<head>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="/css/form-styling.css">
    <script src="/js/script.js" defer></script>
</head>
<!-- Sign Up EJS -->
<div id="signup" class="overlay">
    <div class="external-window-container">
        <a href="/" id="close-window-link">Go back</a>
        <div class="window-container">
            <div class="form-title">
                <h1 class="brandName form-brand">BagsForYou</h1>
                <h2>SIGN UP</h2>
                <p class="alert" id="alert">
                    <%= errorMsg %>
                </p>
            </div>
            <form action="/signup" method="POST" id="signUpForm">
                <label for="username">Username :</label>
                <input type="text" name="username" id="signupUsername">
                <label for="nama">Nama :</label>
                <input type="text" name="nama" id="signupNama">
                <label for="email">Email :</label>
                <input type="email" name="email" id="loginEmail">
                <label for="password">Password :</label>
                <input type="password" name="password" id="loginPass">
                <input type="submit" value="Sign Up">
            </form>
            <p>Have an account? <a href="/login">Login</a> instead</p>
        </div>
    </div>
</div>