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

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



{% block styles %}
    <style>
        header {
            display: none;
        }
    </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;
            }
        </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">
        <a href="{{ path('app_home') }}" class="logo-absolute">
            <div class="logo-wrap">
                <img src="/images/cumas_logo.svg" alt="Cumas Logo"/>
                <div class="d-flex"
                     style="color: white">
                    {#                        because letter space #}
                    <span>Filetransfe</span>r
                </div>
            </div>
        </a>


        <a href="{{ path('app_home') }}" class="return-link">
            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30 52.5C27.0453 52.5 24.1194 51.918 21.3896 50.7873C18.6598 49.6566 16.1794 47.9992 14.0901 45.9099C12.0008 43.8206 10.3434 41.3402 9.21271 38.6104C8.08198 35.8805 7.5 32.9547 7.5 30C7.5 27.0453 8.08198 24.1194 9.21271 21.3896C10.3434 18.6598 12.0008 16.1794 14.0901 14.0901C16.1794 12.0008 18.6598 10.3434 21.3896 9.21271C24.1195 8.08198 27.0453 7.5 30 7.5C32.9547 7.5 35.8806 8.08198 38.6104 9.21271C41.3402 10.3434 43.8206 12.0008 45.9099 14.0901C47.9992 16.1794 49.6566 18.6598 50.7873 21.3896C51.918 24.1195 52.5 27.0453 52.5 30C52.5 32.9547 51.918 35.8806 50.7873 38.6104C49.6566 41.3402 47.9992 43.8206 45.9099 45.9099C43.8206 47.9992 41.3402 49.6566 38.6104 50.7873C35.8805 51.918 32.9547 52.5 30 52.5L30 52.5Z"
                      stroke="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M22.5 22.5L37.5 37.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M37.5 22.5L22.5 37.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </a>

        <div class="row h-100">
            <div class="col-md-6 ">
                {% if user_settings %}

                {% else %}
                    {#                    {% include 'pro_version/_versions.html.twig' %} #}
                {% endif %}
            </div>
            <div class="col-sm-12 col-lg-6 p-0 mb-sm-3 display-flex-center h-100 position-relative">
                <img
                        class="bumble-img"
                        src="/images/bumble.png"
                        alt=""
                        {% if user_settings.backgroundLogin is defined and user_settings.backgroundLogin is not empty %}
                            style="display: none"
                        {% endif %}
                />
                <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" >Don't get confirmation link? <a class="link-color" href="{{ path('app_confirmation_new') }}" >Send again!</a></span>
                                {% endif %}
                            {% endif %}
                            <div class="input-wrap">
                                <input type="email" id="email" class="input-underline form-control" name="email"
                                       required="required">
                                <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">
                                <label for="password"
                                       class="form-label required">{{ 'lang.password'|trans }}</label>

                                <div class="form-check mb-3">
                                    <input type="checkbox" id="is_guest" name="is_guest"
                                           class="form-check-input" value="1">
                                    <label class="form-check-label required"
                                           for="is_guest">{{ 'lang.loginAsGuest'|trans }}</label>
                                </div>

{#                                <div class="form-check mb-3">#}
{#                                    <input type="checkbox" id="_remember_me" name="_remember_me"#}
{#                                           class="form-check-input" value="1">#}
{#                                    <label class="form-check-label required"#}
{#                                           for="_remember_me">{{ 'lang.rememberMe'|trans }}</label>#}
{#                                </div>#}

                                <a class="a-medium-white display-flex-start"
                                   href="{{ path('app_forgot_password_request') }}">{{ 'lang.forgotPassword'|trans }}</a>
                            </div>
                            <button type="submit"
                                    class="button button-gradient m-top-120">{{ 'lang.signIn'|trans }}</button>
                            <a class="a-medium-white display-flex-center"
                               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>
    </div>
{% endblock %}

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