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

{% block title %}{{ 'login.title'|trans({}, 'admin') }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ app.request.getSchemeAndHttpHost()  ~ '/css/login.css' }}"/>
    <link rel="stylesheet" type="text/css" href="{{ app.request.getSchemeAndHttpHost()  ~ '/css/main.css' }}"/>
{% endblock %}

{% block body %}
    <div style="display: flex; height: 100vh;">
        <div style="background: #E0EEFF; flex: 1; text-align: center; padding: 25px;">
            <img src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/logo.png' }}" alt="logo"
                 style="display: block;"/>

            <h2 style="margin-top: 15%; font-size: 22px; font-weight: 600; font-family: Poppins,sans-serif">{{ 'login.welcome'|trans({}, 'admin') }}</h2>
            <p style="font-size: 14px; font-weight: 500; font-family: Poppins,sans-serif;">{{ 'login.effortlessly'|trans({}, 'admin') }}</p>

            <img
                    src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/guard.png' }}"
                    alt="logo"
                    style="width: 60%; margin-top: 10%;"
            />
        </div>

        <form style="flex: 1; text-align: center" method="post">
            <div style="display: flex; flex-direction: column; width: 65%; margin: 20% auto auto;">
                <h1 style="font-size: 40px; font-weight: 600; font-family: Poppins,sans-serif">{{ 'login.signIn'|trans({}, 'admin') }}</h1>

                <div class="input-container">
                    <img src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/person.png' }}" alt="person"/>

                    <input
                            value="{{ last_username }}"
                            type="email"
                            name="email"
                            class="form-control"
                            placeholder="{{ 'login.email'|trans({}, 'admin') }}"
                            autofocus
                            required
                    />
                </div>

                <div class="input-container" style="margin-top: 15px;">
                    <img src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/lock.png' }}" alt="lock"/>
                    <input
                            type="password"
                            name="password"
                            placeholder="{{ 'login.password'|trans({}, 'admin') }}"
                            class="form-control"
                            required
                            id="inputPassword"
                    />
                    <img
                            src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/visible.png' }}"
                            alt="visible"
                            class="right-icon"
                            id="togglePassword"
                    />
                </div>

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

                <a
                        href="/admin/{{ _locale }}/forgot-password"
                        style="
                            font-family: Poppins,sans-serif;
                            font-size: 14px;
                            font-weight: 600;
                            text-align: right;
                            color: #016DFF;
                            text-decoration: none;
                            margin-top: 20px;
                            margin-bottom: 20px;
                        "
                >
                    {{ 'login.forgotPassword'|trans({}, 'admin') }}</a>

                {% if error %}
                    <div class="alert alert-danger mb-3">{{ error.messageKey|trans(error.messageData, 'admin') }}</div>
                {% endif %}

                <button
                        style="
                            background: #016DFF;
                            border-radius: 14px;
                            height: 56px;
                             font-family: Poppins,sans-serif;
                            font-size: 17px;
                            font-weight: 500;
                            color: white;
                            border: none;
                        "
                        type="submit"
                >{{ 'login.login'|trans({}, 'admin') }}</button>
            </div>
        </form>
    </div>

    <script>
        document.getElementById('togglePassword').addEventListener('click', function (e) {
            const passwordInput = document.getElementById('inputPassword');
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.src = type === 'password' ? this.src.replace('hide', 'visible') : this.src.replace('visible', 'hide');
        });
    </script>
{% endblock %}