{% trans_default_domain 'portal_engine_frontend' %}

{% extends "@PimcorePortalEngine/layout/login.html.twig" %}

{% block navbar %}
{% endblock %}

{% block footer %}
{% endblock %}

{% block content %}
    <div class="login">
        {% block login_background %}
            <div class="login__bg" style="background-image: url('{{ portalEngine_images_background(constant('Pimcore\\Bundle\\PortalEngineBundle\\Enum\\ImageThumbnails::DETAIL_PAGE')) }}')"></div>
        {% endblock %}

        {% block login_content %}
            <div class="login__content">
                {% block logo %}
                    <img class="img-fluid" src="{{ portalEngine_images_logo(constant('Pimcore\\Bundle\\PortalEngineBundle\\Enum\\ImageThumbnails::LOGO')) }}">
                {% endblock %}

                {% block form %}
                    <div class="mt-5">
                        {{ form_start(form, {attr:{class:'', action: path('pimcore_portalengine_auth_login')}}) }}
                            {% block headline %}
                                <h1 class="login__content__title mb-4">{{ "portal-engine.auth.login-form.headline"|trans({'%name%': portalName}) }}</h1>
                            {% endblock %}

                            {% block error_message %}
                                {% if loginFailed %}
                                    <div class="alert alert-danger">{{ 'portal-engine.auth.login-failed'|trans}}</div>
                                {% endif %}
                            {% endblock %}

                            {% block form_content %}
                                <div class="form-group">
                                    {{ form_row(form.username, {attr: {class: "form-control form-control--dark"}}) }}
                                </div>

                                <div class="form-group">
                                    {{ form_row(form.password, {attr: {class: "form-control form-control--dark"}}) }}
                                </div>

                                <div class="form-check">
                                    {{ form_widget(form._remember_me, {attr: {class: "form-check-input"}}) }}
                                    {{ form_label(form._remember_me, null, {label_attr: {class: "form-check-label"}}) }}
                                </div>

                                <div class="form-group mt-2">
                                    {{ form_row(form.submit, {'attr': {'class': 'btn btn-block btn-primary text-uppercase'}}) }}
                                </div>
                            {% endblock %}
                        {{ form_end(form) }}

                        {% block password_recover %}
                            {% if showRecoverPassword %}
                                <a href="{{ path('pimcore_portalengine_auth_recover_password') }}">{{ 'portal-engine.auth.password-recover'|trans}}</a>
                            {% endif %}
                        {% endblock %}

                        <div class="mt-3">
                            {% block guestlogin %}
                                {% if guestUserActivated %}
                                    <a class="btn btn-block btn-primary" href="{{ path('pimcore_portalengine_auth_guest_login') }}">{{ ('portal-engine.auth.continue-as-guest') | trans}}</a>
                                {% endif %}
                            {% endblock %}

                            {% block oidc %}
                                {% if oidcProviderNames %}
                                    {% for providerName in oidcProviderNames %}
                                        <a class="btn btn-block btn-primary" href="{{ path('pimcore_portalengine_auth_oidc', {provider: providerName}) }}">{{ ('portal-engine.auth.login-with-' ~ providerName) | trans}}</a>
                                    {% endfor %}
                                {% endif %}
                            {% endblock %}

                        </div>



                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}