{% extends '@theme/security/login.html.twig' %}

{% block logo_login %}
    {% if hideLogo|default(false) is same as (false) %}
    {% include 'partials/logo_login.html.twig' %}
    {% endif %}
{% endblock %}

{% block title %}{{- get_title() -}}{% endblock %}

{% block login_actions %}{% endblock %}
{% block login_social_auth %}{% endblock %}

{% block after_body_start %}{% endblock %}

{% block login_box_error %}
    {% include '@theme/includes/flash_messages.html.twig' %}
{% endblock %}

{% block head %}
    {% include 'partials/head.html.twig' %}
{% endblock %}

{% block login_form %}
    <div class="kiosk-login login-box-body {% block kiosk_class %}{% endblock %}">
        {% block kiosk_content %}
        {{ parent() }}
        {% endblock %}
        <div class="login-box">
            {% block login_box_after %}{% endblock %}
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {% if tabler_bundle.isRightToLeft() %}
        {{ encore_entry_link_tags('app-rtl') }}
    {% else %}
        {{ encore_entry_link_tags('app') }}
    {% endif %}
    <style>
        @media (max-width: 768px) {
            .login-logo { display: none; }
        }
        .login-box {
            margin: auto;
            width: 100%;
            height: 100%;
            max-width: 740px;
        }
        .kiosk-users {
            line-height: 45px;
        }
    </style>
    {% set event = trigger(constant('App\\Event\\ThemeEvent::STYLESHEET')) %}
    {{ event.content|raw }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {% set event = trigger(constant('App\\Event\\ThemeEvent::JAVASCRIPT')) %}
    {{ event.content|raw }}
    {% block kiosk_javascripts %}
    <script type="text/javascript">
        setTimeout(() =>{
            [].slice.call(document.querySelectorAll('.card-body .alert')).map((element) => {
                element.style.opacity = 1;
                element.style.transition = "opacity 1.5s";
                element.style.opacity = 0;
                setTimeout(() => {element.style.display = 'none';}, 1500);
            });
        }, 2000);
    </script>
    {% endblock %}
{% endblock %}