{% extends "base.twig" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <p class="text-primary">Cookies must be available and accepted to login and register</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
            {% if page.state == 1 %}
                <p class="text-danger">Bad credentials</p>
            {% elseif page.state == 2 %}
                <p class="text-danger">Email already exits</p>
            {% endif %}
            </div>
        </div>
    </div>
    <div id="login">
        <form class="form-horizontal" method="post">
            <div class="form-group">
                <label class="control-label col-sm-2" for="email">Email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" required="required" name="email" placeholder="Enter email">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">Password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" required="required" name="pwd" placeholder="Enter password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success g-recaptcha" data-sitekey="6Lc7gXAUAAAAAJRaFo99vIkOUWckuGW8IOLtUxwZ"
                    data-callback="YourOnSubmitFn">Submit</button>
                </div>
            </div>
            <div class="col-sm-offset-1 col-sm-12">
                <button onclick="nowRegister()" id="registerbtn" class="btn btn-primary">Don't have an account yet? Sing up</button>
            </div>
        </form>
    </div>
    <div id="register" style="display:none;">
        <form class="form-horizontal" method="post">
            <div class="form-group">
                <label class="control-label col-sm-2" for="emailre">Email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" required="required" name="emailre" id="emailre" placeholder="Enter email">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="emailre-re">Repeat email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" required="required" name="emailre-re" id="emailre-re" placeholder="Repeat email">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwdre">Password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" required="required" name="pwdre" id="pwdre" placeholder="Enter password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwdre-re">Repeat password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" required="required" name="pwdre-re" id="pwdre-re" placeholder="Repeat password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="name">Nickname:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" required="required" name="name" id="pwdre-re" placeholder="Enter your nickname for public identification">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3" for="tos">You agree to our <a href="?page=tos">Terms of service</a></label>
                <div class="col-sm-9">
                    <input type="checkbox"  required="required" name="tos" id="tos">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success g-recaptcha"
                    data-sitekey="6Lc7gXAUAAAAAJRaFo99vIkOUWckuGW8IOLtUxwZ"
                    data-callback="YourOnSubmitFn">Submit</button>
                </div>
            </div>
            <div class="col-sm-offset-1 col-sm-12">
                <button onclick="nowLogin()" id="loginbtn" class="btn btn-primary">Already have an account? Sign in</button>
            </div>
        </form>

    </div>
{% endblock %}

{% block js %}
    <script>

        function checkPassword() {
            if ($('#pwdre').val() != $("#pwdre-re").val()) {
                $("#pwdre-re")[0].setCustomValidity('Password do not match');
            } else {
                $("#pwdre-re")[0].setCustomValidity('');
            }
            //console.log($('#pwdre').val());
        }

        function checkEmail() {
            if ($('#emailre').val() != $("#emailre-re").val()) {
                $("#emailre-re")[0].setCustomValidity('Email do not match');
            } else {
                $("#emailre-re")[0].setCustomValidity('');
            }
        }

        function nowRegister() {
            $("#login").css("display", "none");
            $("#register").css("display", "");
        }
        function nowLogin() {
            $("#register").css("display", "none");
            $("#login").css("display", "");
        }

        document.getElementById("pwdre").onchange = checkPassword;
        document.getElementById("pwdre-re").onchange = checkPassword;
        document.getElementById("emailre").onchange = checkEmail;
        document.getElementById("emailre-re").onchange = checkEmail;

        {% if page.page == "register" or page.state == 2 %}
        nowRegister();
        {% endif %}

    </script>
{% endblock %}