{% extends '@PimcoreAdmin/admin/login/layout.html.twig' %}

{% block content %}
<div id="loginform" {% if not browserSupported %}style="display:none;"{% endif %}>
    <form id="form-element" method="post" action="{{ path('pimcore_admin_login_check', {'perspective' : app.request.get('perspective')|striptags}) }}">

        {% if error is defined %}
        <div class="text error">
            {{ error|trans([],'admin')|raw }}
        </div>
        {% endif %}
        {% if login_error is defined and login_error %}
        <div class="text error">
            {{ login_error.messageKey|trans(login_error.messageData, 'security') }}
        </div>
        {% endif %}

        <input type="text" name="username" autocomplete="username" placeholder="{{ 'username'|trans([], 'admin') }}" required autofocus>
        <input type="password" name="password" autocomplete="current-password" placeholder="{{ 'password'|trans([], 'admin') }}" required>
        <input type="hidden" name="csrfToken" id="csrfToken" value="{{ pimcore_csrf.getCsrfToken(app.request.session) }}">

        <button type="submit">{{ 'login'|trans([], 'admin') }}</button>
    </form>

    <a href="{{ path('pimcore_admin_login_lostpassword') }}" class="lostpassword">{{ 'Forgot your password'|trans([], 'admin') }}</a>
</div>

{% if not browserSupported %}
<div id="browserinfo">
    <div class="text">
        {{ 'Your browser is not supported. Please install the latest version of one of the following browsers.'|trans([], 'admin') }}
    </div>

    <div class="text browserinfo">
        <a href="https://www.google.com/chrome" target="_blank" rel="noopener noreferrer" title="Chrome"><img src="/bundles/pimcoreadmin/img/login/chrome.svg" alt="Chrome"></a>
        <a href="https://www.mozilla.org/firefox" target="_blank" rel="noopener noreferrer" title="Firefox"><img src="/bundles/pimcoreadmin/img/login/firefox.svg" alt="Firefox"></a>
        <a href="https://www.apple.com/safari" target="_blank" rel="noopener noreferrer" title="Safari"><img src="/bundles/pimcoreadmin/img/login/safari.svg" alt="Safari"></a>
        <a href="https://www.microsoft.com/edge" target="_blank" rel="noopener noreferrer" title="Edge"><img src="/bundles/pimcoreadmin/img/login/edge.svg" alt="Edge"></a>
    </div>

    <a id="proceed_with_unsupported_browser" href="#" >{{ 'Click here to proceed'|trans([], 'admin') }}</a>
</div>
{% endif %}
{% endblock %}

{% block below_footer %}
<script {{ pimcore_csp.getNonceHtmlAttribute()|raw }}>
    {% if deeplink is not defined %}
    // clear opened tabs store
    localStorage.removeItem("pimcore_opentabs");
    {% endif %}

    // hide symfony toolbar by default
    const symfonyToolbarKey = 'symfony/profiler/toolbar/displayState';
    if(!window.localStorage.getItem(symfonyToolbarKey)) {
        window.localStorage.setItem(symfonyToolbarKey, 'none');
    }


    // CSRF token refresh
    let formElement = document.getElementById('form-element');
    let csrfRefreshInProgress = false;
    function refreshCsrfToken() {
        csrfRefreshInProgress = true;
        formElement.style.opacity = '0.3';
        var request = new XMLHttpRequest();
        request.open('GET', '{{ path("pimcore_admin_login_csrf_token") }}');
        request.onload = function () {
            if (this.status >= 200 && this.status < 400) {
                var res = JSON.parse(this.response);
                document.getElementById('csrfToken').setAttribute('value', res['csrfToken']);
                formElement.style.opacity = '1';
                csrfRefreshInProgress = false;
            }
        };
        request.send();
    }
    document.addEventListener('visibilitychange', function(ev) {
        if(document.visibilityState === 'visible') {
            refreshCsrfToken();
        }
    });
    window.setInterval(refreshCsrfToken, {{ csrfTokenRefreshInterval }});
    formElement.addEventListener("submit", function(evt) {
        if(csrfRefreshInProgress) {
            evt.preventDefault();
        }
    }, true);

    {% if not browserSupported %}
        let unsupportedBrowser = document.getElementById('proceed_with_unsupported_browser');
        unsupportedBrowser.addEventListener('click', function(e) {
            document.getElementById('loginform').style.display = 'block';
            document.getElementById('browserinfo').style.display = 'none';
        });
    {% endif %}
</script>

{% for includeTemplate in includeTemplates %}
    {{ include(includeTemplate) }}
{% endfor %}

{{ pimcore_breach_attack_random_content() }}

{% endblock %}