<!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="/register">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>
        <form method="POST" action="/api/signup">
            <label>Username</label>
	    <div class="spacer">
                <input type="text" name="username" required="">
	    </div>
            <br>
	    <div class="Password">
                <label>Password</label>
	        <div class="spacer">
                    <input type="password" name="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="" name="captcha" type="text">
	        </div>
	    </div>
            <br>
            <input type="hidden" name="unique_token" value="{{ .unique_token }}">
            <input type="submit" value="Register">
        </form>
    </div>
</body>
</html>