{% extends '@Kiosk/layout.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block login_box_msg %}
    {{ title|trans }}
{% endblock %}

{% block kiosk_content %}
    <div class="row" id="kioskDetails">
        <div class="col-md-12">
            <div class="mb-4 text-center kioskUser">
                {{ widgets.user_avatar(user, false, 'avatar-xl mb-3') }}
                <h3>{{ widgets.username(user) }}</h3>
                <p class="text-body-secondary">{{ user.title }}</p>
            </div>

            {{ widgets.callout('danger', error|trans) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        setTimeout(function() {
            document.getElementsByClassName('login-box-body')[0].innerHTML = '<h3>{{ 'kiosk.reloading'|trans }}</h3><div class="overlay-wrapper"><div class="overlay"><div class="fas fa-sync fa-spin"></div></div></div>';
            location.replace('{{ path(returnTo, {'_locale': locale|default(app.request.locale)}) }}');
        }, {{ 10000 }});

        window.addEventListener('popstate', function (event) {
            history.pushState(null, document.title, location.href);
        });

    </script>
{% endblock %}