{% extends '@OroUser/layout.html.twig' %}
{% block head %}
    {{ parent() }}
    {# since some browsers (like FF) show html content before css and other resources are completely loaded follow loading animation was added #}
    <style type="text/css">
        #login-page-loader {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 800;
            background: white url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iOC4wNDIlIiB5MT0iMCUiIHgyPSI2NS42ODIlIiB5Mj0iMjMuODY1JSIgaWQ9ImEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODg4IiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzg4OCIgc3RvcC1vcGFjaXR5PSIuNjMxIiBvZmZzZXQ9IjYzLjE0NiUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzg4OCIgb2Zmc2V0PSIxMDAlIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCIgaWQ9Ik92YWwtMiIgc3Ryb2tlPSJ1cmwoI2EpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgICAgICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICAgICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgICAgICAgICAgIGZyb209IjAgMTggMTgiCiAgICAgICAgICAgICAgICAgICAgdG89IjM2MCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICBkdXI9IjAuOXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvcGF0aD4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjZmZmIiBjeD0iMzYiIGN5PSIxOCIgcj0iMSI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMC45cyIKICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K') center center no-repeat;
        }
        .form-wrapper {
            margin:auto;
            background: none;
            justify-content: center;
        }
        .form_container {
            background: hsla(0,0%,100%,.8);
            display: flex;
            flex-grow: .2;
            flex-direction: column;
        }
        .login-copyright{
            padding: 16px;
        }
    </style>
{% endblock %}
{% block bodyClass %}login-page{% endblock %}
{% block messages %}
{% endblock %}
{% block content %}
<div id="login-page-loader"></div>
<div class="container">
    <div class="form-wrapper">
        <div class="form_container">
            <div class="form-wrapper__inner">
                <div id="login-form" class="form-signin form-row-layout">
                    <div class="form-description">
                        {% if oro_theme_logo() %}
                            <div class="form-description__logo">
                                <img src="{{ asset(oro_theme_logo()) }}"
                                     alt="{{ 'oro.auth.description.logo'|trans }}"
                                     class="form-description__logo-img">
                            </div>
                        {% endif %}
                    </div>
                    <div class="title-box">
                        <h2 class="title">{{ 'oro.oauth2server.auth_code.authorize_message'|trans({'%app_name%': appName}) }}</h2>
                        <p></p>
                        {{ 'oro.oauth2server.auth_code.authorize_description'|trans({'%app_name%': appName|oro_html_sanitize})|raw }}
                    </div>
                    <div class="form-signin__footer">
                        <button type="submit" id="grantBtn" class="btn extra-submit btn-uppercase btn-primary" >{{ 'oro.oauth2server.auth_code.grant'|trans }}</button>
                        <button type="submit" id="cancelBtn" class="btn extra-submit btn-uppercase btn-outline-primary" >{{ 'oro.oauth2server.auth_code.cancel'|trans }}</button>
                    </div>
                    <form id="form" method="post">
                        <input type="hidden" name="grantAccess" id="grantAccess">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authorize_client') }}">
                    </form>
                </div>
            </div>
            <div class="login-copyright">{{ 'oro.copyright'|trans({ '{{year}}': 'now'|date('Y') }) }}</div>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('grantBtn').addEventListener('click', function () {
            sendForm(true);
        });
        document.getElementById('cancelBtn').addEventListener('click', function () {
            sendForm(false);
        });
        window.addEventListener('load', function() {
            let loader = document.getElementById('login-page-loader');
            if (loader) {
                loader.parentNode.removeChild(loader);
            }
        });
        function sendForm(isAuthorized) {
            document.getElementById('grantAccess').value = isAuthorized;
            document.getElementById('grantBtn').setAttribute('disabled', 'disabled');
            document.getElementById('cancelBtn').setAttribute('disabled', 'disabled');
            document.getElementById("form").submit();
        }
    </script>
</div>
{% endblock content %}