{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}

    <div class="relative bg-white dark:bg-gray-900">
        <div class="absolute inset-0">
            <div class="absolute inset-y-0 left-0 w-1/2 bg-gray-50 dark:bg-gray-950"></div>
        </div>
        <div class="relative max-w-7xl mx-auto lg:grid lg:grid-cols-5">
            <div class="bg-gray-50 dark:bg-gray-950 py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12">
                <div class="max-w-lg mx-auto">

                    <div class="text-lg text-gray-500 dark:text-gray-300">
                        <h1 class="mb-3">{{ 'resetPassword.base.title'|trans({}, 'cms') }}</h1>
                        {% if form.email is defined %}
                            <p>
                                {{ 'resetPassword.base.requestText'|trans({}, 'cms') }}
                            </p>
                        {% elseif form.password is defined %}
                            <p>
                                {{ 'resetPassword.base.resetText'|trans({}, 'cms') }}
                                <a class="underline hover:no-underline"
                                   href="https://www.bsi.bund.de/DE/Themen/Verbraucherinnen-und-Verbraucher/Informationen-und-Empfehlungen/Cyber-Sicherheitsempfehlungen/Accountschutz/Sichere-Passwoerter-erstellen/sichere-passwoerter-erstellen_node.html"
                                   target="_blank">{{ 'resetPassword.base.securePasswordLink'|trans({}, 'cms') }}</a>
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 py-16 px-4 sm:px-6 lg:col-span-3 lg:py-24 lg:px-8 xl:pl-12">
                <div class="max-w-lg mx-auto lg:max-w-none">
                    <div class="max-w-sm">

                        {% block content %}
                        {% endblock %}

                    </div>
                </div>
            </div>

        </div>
    </div>

{% endblock %}
