{% extends '@SerenityAdmin/layout/base_blank.html.twig' %}
{% form_theme form with admin_form_themes() only %}
{% block main %}
<div
  id="login-area"
  class="dark:bg-opacity-40 relative flex h-full grow flex-col bg-gray-100 py-12 dark:bg-gray-900">
  <div class="container mx-auto px-4 xl:max-w-6xl">
    <div class="-mx-4 flex flex-row flex-wrap justify-center">
      <div class="w-full max-w-full px-6 sm:px-12 md:w-2/3 lg:w-1/2">
        <div class="rounded-lg bg-white p-6 shadow-xl sm:px-12 sm:py-8 dark:bg-gray-800">
          {{ form_start(form) }}
          <h1 class="mb-6 text-center text-2xl leading-normal font-bold text-gray-800 dark:text-gray-300">
            {{ "login.form.title"|trans([], "serenity_admin_messages") }}
          </h1>
          <hr class="mx-auto my-5 block h-0.5 w-12 border-gray-700 bg-gray-700">
          <div class="mb-6">
            {{ form_row(form._username) }}
          </div>
          <div class="mb-6">
            {{ form_row(form._password) }}
          </div>
          <div class="mb-6">
            {{ form_row(form._remember) }}
          </div>
          <div class="grid">
            {{ form_widget(form.login) }}
          </div>
          {{ form_rest(form) }}
          {{ form_end(form) }}
          <div class="mt-6 dark:text-gray-300">
            <p class="mb-6 text-center">
              <span>{{ "login.link.or"|trans([], "serenity_admin_messages") }}</span>
            </p>
            <p class="text-center">
              <a class="hover:text-indigo-500" href="forgot-password.html" data-turbo-prefetch="false">
                {{- "login.link.lost_password"|trans([], "serenity_admin_messages") -}}
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
