{% extends 'base.html.twig' %}

{% block title %}
    {{ 'lang.Login'|trans }}
{% endblock %}

{% block footer %} {% endblock %}


{% block styles %}
    <style>
        .navbar-container {
            padding: 50px 20px;
        }
        #openMenu {
            rect {
                fill: var(--orange-color);
            }
        }
        .auth-container .auth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 18px 0;
            color: #8a8a8a;
            font-size: 13px;
            text-transform: lowercase;
        }
        .auth-container .auth-divider::before,
        .auth-container .auth-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e3e3e3;
        }
        .auth-container .google-auth-btn {
            width: 100%;
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 38px;
            border: 1px solid #dadce0;
            background: #fff;
            color: #3c4043 !important;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.2;
        }
        .auth-container .google-auth-btn:hover {
            background: #f8f9fa;
            color: #202124 !important;
        }
    </style>
    {% if user_settings.backgroundLogin is defined and user_settings.backgroundLogin is not empty %}
        <style>
            #background {
                background-image: url('{{ asset('images/' ~ user_settings.backgroundLogin) }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
            .background-gradient, .back-circle {
                display: none;
            }
        </style>
    {% else %}
        <style>
            #background {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
        </style>
    {% endif %}
{% endblock %}

{% block body %}
    <div class="container pt-sm-4 pb-sm-4 h-100">
        <div class="row h-100">
            <div class="col-sm-12 col-lg-6 p-0 mb-sm-3 display-flex-center h-100 position-relative">
                <div class="auth-container container z-index-1 pt-5 pt-sm-0">
                    {% if app.user %}
                        <h1 class="mb-4 h3 mt-5">
                            {{ 'lang.loggedInAs'|trans }}
                            {{ app.user.userIdentifier }},
                            <a href="{{ path('app_logout') }}">{{ 'lang.Logout'|trans }}</a>
                        </h1>
                        <div class="icon-circle m-auto mt-5 mb-3">
                            <i class="text-primary icofont icofont-ui-user"></i>
                        </div>
                    {% else %}
                        <form method="post" class="z-index-1">
                            <h1 class="mb-5 mt-5">{{ 'lang.Login'|trans }}</h1>
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                            {% if error %}
                                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>

                                {% if error.messageKey == 'Your user account is not verified.' %}
                                    <span class="text-white">{{ 'lang.dontGetConfirmationLink'|trans }} <a class="link-color"
                                                                                             href="{{ path('app_confirmation_new') }}">{{ 'lang.sendAgain'|trans }}</a></span>
                                {% endif %}
                            {% endif %}
                            <div class="input-wrap">
                                <input type="email" id="email" class="input-underline form-control" name="email"
                                       required="required" placeholder="{{ 'lang.email' | trans }}">
                                {#                                <label for="email" class="form-label required">{{ 'lang.email'|trans }}</label> #}
                            </div>
                            <div class="input-wrap">
                                <input type="password" id="password" class="input-underline form-control"
                                       name="password" required="required" placeholder="{{ 'lang.password' | trans }}">
                                {#                                <label for="password" #}
                                {#                                       class="form-label required">{{ 'lang.password'|trans }}</label> #}

                                {% if account_options.show %}
                                    <div class="mt-3">
                                        <p class="text-white mb-2">{{ 'lang.loginChooseAccount'|trans }}</p>
                                        <div class="form-check">
                                            <input type="radio" id="account_main" name="account_type"
                                                   class="form-check-input" value="main"
                                                   {% if account_options.selected == 'main' %}checked{% endif %}>
                                            <label class="form-check-label required a-medium-blue"
                                                   for="account_main">{{ 'lang.loginAsMain'|trans }}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" id="account_guest" name="account_type"
                                                   class="form-check-input" value="guest"
                                                   {% if account_options.selected == 'guest' %}checked{% endif %}>
                                            <label class="form-check-label required a-medium-blue"
                                                   for="account_guest">{{ 'lang.loginAsGuest'|trans }}</label>
                                        </div>
                                    </div>
                                {% endif %}
                                <a class="a-medium-blue" href="{{ path('app_forgot_password_request') }}">{{ 'lang.forgotPassword'|trans }}</a>

                            </div>



                            <button type="submit"
                                    class="button button-blue m-top-120">{{ 'lang.signIn'|trans }}</button>

                            <div class="auth-divider">{{ 'lang.or'|trans }}</div>

                            {% include 'security/_google_auth_button.html.twig' %}

                            <a class="a-medium-blue display-flex-center mt-3"
                               href="{{ path('app_register') }}">{{ 'lang.accountNoExist'|trans }}</a>
                        </form>
                    {% endif %}

                    {% if user_settings %}
                        <div class="text-center mt-5">
                            {% if user_settings.urlInstagram %}

                                <a href="{{ user_settings.urlInstagram }}"
                                   class="text-primary link-decoration-none me-2" target="_blank">
                                    <i class="icofont-instagram icofont-2x"></i>
                                </a>

                            {% endif %}

                            {% if user_settings.urlLinkedin %}

                                <a href="{{ user_settings.urlLinkedin }}" class="text-primary link-decoration-none"
                                   target="_blank">
                                    <i class="icofont-linkedin icofont-2x"></i>
                                </a>

                            {% endif %}

                            {% if user_settings.urlFacebook %}

                                <a href="{{ user_settings.urlFacebook }}" class="text-primary link-decoration-none"
                                   target="_blank">
                                    <i class="icofont-facebook icofont-2x"></i>
                                </a>

                            {% endif %}

                            {% if user_settings.urlWebsite %}

                                <a href="{{ user_settings.urlWebsite }}" class="text-primary link-decoration-none"
                                   target="_blank">
                                    <i class="icofont-web icofont-2x"></i>
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6 ">
                {% if user_settings %}

                {% else %}
                    {% include 'pro_version/_versions.html.twig' %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('login') }}
{% endblock %}