@js(https://www.google.com/recaptcha/api.js)
@js(js/login/signup.js)

@extends(templates/layout_normal)

@section(main)
    <h2>Sign up</h2>
    <div class="box">
        <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
            <?php if (isset($email) || isset($username)): ?>
                <p class="justify">No user found with the given email address / username. Sign up with one click!</p>
                <?php if (isset($email)): ?>
                    <input type="email" class="text big fullWidth marginTop" name="email" placeholder="Email address" autocomplete="username" value="<?= $email ?>" required>
                <?php else: ?>
                    <input type="email" class="text big fullWidth marginTop" name="email" placeholder="Email address" autocomplete="username" required autofocus>
                <?php endif; ?>
                <?php if (isset($username)): ?>
                    <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username" value="<?= $username ?>">
                <?php else: ?>
                    <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username" autofocus>
                <?php endif; ?>
                <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password confirmation" autocomplete="new-password" required minlength="6">
            <?php else: ?>
                <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" required autofocus>
                <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username">
                <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password" autocomplete="new-password" required minlength="6">
                <input type="password" class="text big fullWidth marginTop" name="password_confirm" placeholder="Password confirmation" autocomplete="new-password" minlength="6">
            <?php endif; ?>
            <?php if (!empty($_ENV['RECAPTCHA_SITEKEY'])): ?>
                <div class="marginTop">
                    <div class="g-recaptcha" data-sitekey="<?= $_ENV['RECAPTCHA_SITEKEY'] ?>"></div>
                </div>
            <?php endif; ?>
            <p id="signupFormError" class="formError justify marginTop"></p>
            <div class="right">
                <button class="marginTop" type="submit">Sign up</button><!--
             --><?php if (isset($email)): ?><!--
                 --><button id="resetSignupButton" class="gray marginTop marginLeft" type="button">Reset</button>
                <?php endif; ?>
            </div>
            <p class="center marginTop"><a href="/login" title="Login">Already have an account?</a></p>
            <hr>
            <div class="center">
                <a class="button yellow" href="/login/google" title="Signup with Google">Signup with Google</a>
            </div>
        </form>
    </div>
@endsection