{% extends "base.twig" %}

{% block head %}
<style type="text/css">
    body {
        background: #282627;
    }

    html, body {
        height: 100%;
        overflow: hidden;
        font-family: 'Lato', sans-serif !important;
    }

    .main {
        height: 100%;
        width: 100%;
        display: table;
    }

    .wrapper {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
    }

    .login-box {
        margin: 0 auto;
        /*margin: 50px;*/
        padding: 20px;
        width: 300px;
    }

    input[type=text], input[type=password], input[type=submit] {
        width: 100%;
        padding: 15px;
        border: 1px solid #515e67;
        background: transparent;
        border-radius: 5px;
        margin-bottom: 20px;
        color: white;
        outline: none;
        box-sizing: border-box;
    }

    input[type=text]:focus, input[type=text]:active,
    input[type=password]:focus, input[type=text]:active {
        border: 1px solid #6ed9a1;
    }

    input[type=submit] {
        background: #6ed9a1;
        text-transform: uppercase;
        margin-top: 15px;
        cursor: pointer;
    }

    .message {
        color: #f55753;
        margin-bottom: 30px;
    }

    [readonly] {
        opacity: 0.3;
        pointer-events: none;
    }
</style>
{% endblock %}

{% block body %}

<div class="main">
    <div class="login-box">
        {% if type == 'logout' %}
        <form action="{{logoutUrl}}" method="get">
            <div class="message">{{message}}</div>
            <input type="submit" value="Logout"/>
        </form>
        {% else %}
        <form action="{{loginUrl}}" method="post">
            <div id="status-message" class="message">{{message}}</div>
            <input type="text" placeholder="User or email" {% if readonly %}readonly{% endif %} value="{{username}}" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" name="username" required />
            <input type="password" placeholder="Password" {% if readonly %}readonly{% endif %} name="password" value="" required/>
            {% if redirect %}
            <input type="hidden" name="redirect" value="{{redirect}}"/>
            {% endif %}
            <input type="submit" {% if readonly %}readonly{% endif %} value="Login"/>
        </form>
        {% endif %}
    </div>
</div>

<script type="text/javascript">
    let el = document.querySelector('[name=redirect]');

    if(el && el.value == 'auto') {
        el.value = document.location.href;
    }

    let name = document.querySelector('[name="username"]');
    let pass = document.querySelector('[name="password"]');
    let submit = document.querySelector('[type="submit"]');
    let statusMessage = document.querySelector('#status-message');

    if(!name.hasAttribute('readonly')) {
        if(name.value) {
            pass.focus();
        } else {
            name.focus();
        }
    }

    {% if tryAgainMs %}
        setTimeout(function() {
            name.removeAttribute('readonly');
            pass.removeAttribute('readonly');
            submit.removeAttribute('readonly');
            statusMessage.style.display = 'none';
            name.focus();

        }, {{tryAgainMs}});

        // if you are going to do a brute force, wait {{tryAgainMs}} ms until the next try :)
    {% endif %}
</script>

{% endblock %}