{% extends "/Bases/StandardWebPage.html.twig" %}

{% block content %}


    <script src="https://www.google.com/recaptcha/enterprise.js?render={{ _CAPTCHA_KEY_ID_ }}"></script>
    <script>
        function onSubmitLoginForm(token) {
            document.getElementById("LoginForm").submit();
        }
        function onSubmitCreateAccountForm(token) {
            document.getElementById("CreateAccountForm").submit();
        }
    </script>

    <div class="InnerContent">
        <h1>{{ "Account Login"|translate }}</h1>
        <form
                id="LoginForm"
                action="/FormHandling/Login.php"
                method="POST"
        >
            <label for="Username">{{ "Username"|translate }}</label>
            <br>
            <input id="Username" name="Username" type="text">

            <br>

            <label for="Password">{{ "Password"|translate }}</label>
            <br>
            <input id="Password" name="Password" type="password">

            <br>

            <button class="g-recaptcha"
                    data-sitekey="{{ _CAPTCHA_KEY_ID_ }}"
                    data-callback='onSubmitLoginForm'
                    data-action='submit'>{{ "Login"|translate }}</button>
        </form>

        <br>
        <hr>
        <br>

        <h1>{{ "Create an Account"|translate }}</h1>
        <form
                id="CreateAccountForm"
                action="/FormHandling/CreateAccount.php"
                method="POST"
        >
            <label for="Username">{{ "Username"|translate }}</label>
            <br>
            <input id="Username" name="Username" type="text">

            <br>

            <label for="Password1">{{ "Password"|translate }}</label>
            <br>
            <input id="Password1" name="Password1" type="password">

            <br>

            <label for="Password2">{{ "Confirm Password"|translate }}</label>
            <br>
            <input id="Password2" name="Password2" type="password">

            <br>

            <button class="g-recaptcha"
                    data-sitekey="{{ _CAPTCHA_KEY_ID_ }}"
                    data-callback='onSubmitCreateAccountForm'
                    data-action='submit'>{{ "Create an Account"|translate }}</button>
        </form>
    </div>
{% endblock %}