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

{% block title %}{{ 'setPassword.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">{{ 'setPassword.title'|trans({}, 'admin') }}</h1>
                <div class="input-container" style="margin-top: 15px;">
                    <img src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/lock.png' }}" alt="lock"/>
                    {{ form_widget(form.plainPassword.first, {
                        'attr': {
                            'class': 'form-control',
                            'autofocus': true,
                            'placeholder': 'setPassword.password'|trans({}, 'admin')
                        }
                    }) }}

                    <img
                            src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/visible.png' }}"
                            alt="visible"
                            class="right-icon"
                            id="togglePassword"
                    />
                </div>

                <div class="input-container" style="margin-top: 15px;">
                    <img src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/lock.png' }}" alt="lock"/>
                    {{ form_widget(form.plainPassword.second, {
                        'attr': {
                            'class': 'form-control',
                            'placeholder': 'setPassword.repeated'|trans({}, 'admin')
                        }
                    }) }}

                    <img
                            src="{{ app.request.getSchemeAndHttpHost()  ~ '/images/visible.png' }}"
                            alt="visible"
                            class="right-icon"
                            id="toggleRepeated"
                    />
                </div>

                {{ form_row(form._token) }}

                {% if form_errors(form.plainPassword) %}
                    <div class="alert alert-danger mt-3">
                        {{ form_errors(form.plainPassword) }}
                    </div>
                {% endif %}

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

    <script>
        document.getElementById('togglePassword').addEventListener('click', function (e) {
            const passwordInput = document.getElementById('change_password_form_plainPassword_first');
            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');
        });

        document.getElementById('toggleRepeated').addEventListener('click', function (e) {
            const passwordInput = document.getElementById('change_password_form_plainPassword_second');
            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 %}