<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/js/main.js"></script>
</head>
<body>
    <div class="headerbar">
        <a class="a" href="/">CTAMail</a>
        <a class="main a" href="/signup">Sign up</a>
        <a class="a" href="/account">Account</a>
        <button class="a right" onclick="toggleDarkMode()">Toggle Theme</button>
    </div>
    <div class="content">
        <h1>Register an Email Account</h1>
        <label>Username</label>
	    <div class="spacer">
                <input type="text" id="username" required="">
	    </div>
        <br>
	    <div class="Password">
            <label>Password</label>
            <div class="spacer">
                <input type="password" id="password" required="">
	        </div>
	    </div>
        <br>
    
        <div class="spacer">
            <label>CAPTCHA</label>
	        <div class="spacer">
                <img src="data:image/png;base64,{{ .captcha_image }}" alt="Captcha">
	        </div>
            <div class="spacer">
                <input required="" id="captcha" type="text">
	        </div>
        </div>
        <br>
        <input type="hidden" id="unique_token" name="unique_token" value="{{ .unique_token }}">
        <button class="button" onclick="signup();">Register</button>
    </div>
</body>
</html>