{# @description A wide card in two panes: the brand in the theme's primary colour, and beside it the one-press ways in. The form waits behind a disclosure. #}
{# @prop title:text | default:"Sign in" | description:"The heading, in the brand pane. Use the title slot instead when it contains markup." #}
{# @prop lead:text | description:"The sentence under the heading" #}
{# @prop level:select['1', '2', '3', '4', '5', '6'] | default:"1" | description:"Heading level. 1 is right when this is the whole page." #}
{# @prop disclosure:text | description:"The line that opens the form. Left empty, it is a translated Use your email and password." #}
{# @prop open:boolean | default:False | description:"Start with the form showing. Set it when the form comes back with errors." #}
{# @prop surface:text | default:"bg-primary text-primary-content" | description:"Surface and text colour of the brand pane" #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot:background — A background block, rendered into a layer behind the card #}
{# @slot:logo — The application's logo, at the top of the brand pane. It needs to read on the pane's colour. #}
{# @slot:aside — The foot of the brand pane. One line of reassurance. #}
{# @slot:providers — The buttons this layout is for: third-party providers, a passkey, an emailed code #}
{# @slot:footer — Under the disclosure. The link to the sign-up page, usually. #}
{# @slot The form — The application's own sign-in form. Folded away until asked for. #}
{% load i18n %}
<c-vars title lead level="1" disclosure open surface="bg-primary text-primary-content" class />
<section class="relative isolate flex min-h-dvh flex-col items-center justify-center overflow-clip px-4 py-12 text-base-content
                {{ class }}"
         {{ attrs }}>
  {% if background %}
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">{{ background }}</div>
  {% endif %}
  <div class="card w-full max-w-4xl overflow-clip bg-base-100 shadow-xl">
    <div class="grid grid-cols-1 md:grid-cols-5">
      <div class="flex flex-col gap-10 p-8 md:col-span-2 md:justify-between {{ surface }}">
        {% if logo %}<div class="flex items-center">{{ logo }}</div>{% endif %}
        <div>
          {# djlint:off #}
          {% if title %}<h{{ level }} class="text-3xl font-bold tracking-tight text-balance">{{ title }}</h{{ level }}>{% endif %}
          {# djlint:on #}
          {% if lead %}<p class="mt-3 text-pretty">{{ lead }}</p>{% endif %}
        </div>
        {% if aside %}<div class="hidden text-sm md:block">{{ aside }}</div>{% endif %}
      </div>
      <div class="flex flex-col justify-center gap-5 p-6 sm:p-8 md:col-span-3">
        {% if providers %}<div class="flex flex-col gap-3">{{ providers }}</div>{% endif %}
        {% if slot.strip %}
          {% comment %}
            A plain disclosure, styled with utilities. daisyUI's own disclosure class shares its
            name with a Tailwind utility, which this package's stylesheet would emit over it.
          {% endcomment %}
          <details class="rounded-xl border border-base-300" {% if open %}open{% endif %}>
            <summary class="cursor-pointer px-4 py-3 font-medium">{% if disclosure %}{{ disclosure }}{% else %}{% translate "Use your email and password" %}{% endif %}</summary>
            <div class="px-4 pt-2 pb-4">{{ slot }}</div>
          </details>
        {% endif %}
        {% if footer %}<div class="text-center text-sm">{{ footer }}</div>{% endif %}
      </div>
    </div>
  </div>
</section>