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

{% block title %}{{ 'login.forgotPassword'|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: 30% auto auto;">
                <h1 style="font-size: 40px; font-weight: 600; font-family: Poppins,sans-serif">{{ 'forgotPassword.forgotPassword'|trans({}, 'admin') }}</h1>

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

                    {{ form_widget(form.email, {
                        'attr': {
                            'class': 'form-control',
                            'autofocus': true,
                            'placeholder': 'login.email'|trans({}, 'admin')
                        }
                    }) }}
                </div>

                {{ form_row(form._token) }}

                <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"
                >{{ 'forgotPassword.submit'|trans({}, 'admin') }}</button>
            </div>
        </form>

        {{ form_end(form) }}
    </div>
{% endblock %}