{% extends app.request.query.get("embed") == '1'
  ? "base.html.twig"
  : "bases/base." ~ subdomain ~ ".html.twig" %}

{% block title %}{{ parent() }}{% endblock %}

{% block head %}
{{ parent() }}
{# <meta name="description" content=""> #}
{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    var register = function (e) {
        e.preventDefault();
        var form = this;
        var btn = $('#submit');
        btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Create account');
        btn.prop('disabled', true);
        $.post($(form).attr('action'), $(form).serialize()).done(function (resp) {
            console.log(resp);
            btn.prop('disabled', false);
            if (resp.result === false) {
                btn.html('Create account');
                $('#' + resp.reason).addClass('is-invalid');
            } else {
                form.classList.add('was-validated');
                $('.invalid-feedback').addClass('d-none');
                setCookie('userToken', resp.token, 30);
                window.location.href = "{{path('index')}}";
            }
        });
    }

    $('form').on('submit', register);
</script>
{% endblock %}

{% block styles %}
{{parent()}}
<style>
    html,
    body {
        height: 100%;
    }

    body {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
    }

    .form-signup {
        width: 100%;
        max-width: 330px;
        padding: 15px;
        margin: auto;
    }

    .form-signup .checkbox {
        font-weight: 400;
    }

    .form-signup .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

    .form-signup .form-control:focus {
        z-index: 2;
    }

    .form-signup input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signup input[type="password"] {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
</style>
{% endblock %}

{% block body %}
<div class="container text-center">
    <form class="form-signup" action="{{path('register-submit')}}" method="POST">
        <img class="mb-4" src="{{path('index')}}/images/logo.png" alt="Logo" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">Create an account</h1>
        <label for="email" class="sr-only">Email address</label>
        <input type="email" id="email" class="form-control" name="email" placeholder="Email address" required=""
            autofocus="">
        <div class="invalid-feedback">
            Email already exists.
        </div>
        <label for="pass" class="sr-only">Password</label>
        <input type="password" id="pass" class="form-control" name="pass" placeholder="Password" required="">
        {% if admin %}
        <label for="master_pass" class="sr-only">Master Password</label>
        <input type="password" id="master_pass" class="form-control mt-4" name="master_pass"
            placeholder="Master Password" required="" style="border-radius: 3px">
        <input type="hidden" name="role" value="1">
        {% else %}
        <input type="hidden" name="role" value="0">
        {% endif %}
        <div class="invalid-feedback">
            Wrong password.
        </div>
        <button class="btn btn-lg btn-primary btn-block mt-4" type="submit" id="submit">Create account</button>
        <p class="mt-5 mb-3 text-muted">&copy; {{ "now"|date("Y") }}</p>
    </form>
</div>
{% endblock %}