{% set page_title = "login.title" | trans %}
{% extends 'security/layout.html.twig' %}

{% block content %}

    <div class="peers ai-s fxw-nw h-100vh" id="loginPageWrapper">
        <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv"
             style='background-image:  url("{{ asset('assets/images/bcgk.jpg') }}")'>

            <div class="col-12 col-md-6 col-lg-6 col-xl-3 pos-a centerXY peer pX-40 pY-60 h-70 bgc-white scrollable login-form-wrapper">

                <div class="d-flex justify-content-around mb-2">
                    {% include "page-elements/components/logo.twig" with {
                        size: 65
                    } %}
                </div>

                <h3 class="text-center login-header">{{ 'login.header.pageName' | trans }}</h3>
                <h4 class="fw-300 c-grey-900 mB-20 text">{{ 'login.header.login' | trans }}</h4>
                {% if error_message is defined and error_message is not empty %}
                    <div class="alert alert-danger">{{ error_message }}</div>
                {% endif %}
                <form method="post">
                    <div class="form-group">
                        <label class="text-normal text-dark">{{ 'login.labels.username' | trans }}</label>

                        {% set usernamePlaceholder = (isDemo() ? constant("App\\Entity\\User::DEMO_LOGIN") : 'login.placeholders.username'|trans )%}
                        <input type="text" class="form-control" placeholder="{{ usernamePlaceholder }}"
                               id="inputUsername" name="username" value="" required="required">
                    </div>
                    <div class="form-group">
                        <label class="text-normal text-dark">{{ 'login.labels.password' | trans }}</label>

                        {% set passwordPlaceholder = (isDemo() ? constant("App\\Entity\\User::DEMO_PASSWORD") : 'login.placeholders.password'|trans )%}
                        <input type="password" class="form-control" placeholder="{{ passwordPlaceholder }}"
                               id="inputPassword" name="password" required="required">
                    </div>

                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >

                    <div class="form-group">
                        <div class="peers ai-c jc-sb fxw-nw">
                            <div class="peer">
                                <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                                    <input type="checkbox" name="_remember_me" class="peer" id="inputCall1">
                                    <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
                                        <span class="peer peer-greed">{{ 'login.labels.remember' | trans }}</span>
                                    </label>
                                </div>
                            </div>
                            <div class="peer">
                                <button class="btn btn-primary" id="_submit" type="submit" >{{ 'login.submit'|trans }}</button>

                                {% if canRegisterUser() %}
                                    <a href="{{ path('register') }}">
                                        <button class="btn btn-primary" type="button">{{ 'login.buttons.register'|trans }}</button>
                                    </a>
                                {% endif %}

                            </div>
                        </div>
                    </div>

                    {# Links #}
                    <div class="row link-row-login-page">
                        <p>
                            <i class="fab fa-github" aria-hidden="true"></i>
                            <a href="https://github.com/Volmarg/personal-management-system" class="link-login-page" target="_blank">{{ 'page.login.loginForm.githubProject' | trans }}</a>
                        </p>
                    </div>
                    <div class="row link-row-login-page">
                        <p>
                            <i class="fas fa-book" aria-hidden="true"></i>
                            <a href="https://volmarg.github.io/" class="link-login-page" target="_blank">{{ 'page.login.loginForm.documentation' | trans }}</a>
                        </p>
                    </div>

                </form>

            </div>
        </div>
    </div>

{% endblock content%}