{# @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:"dce:bg-primary dce: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="dce:bg-primary dce:text-primary-content" class />
<section class="dce:relative dce:isolate dce:flex dce:min-h-dvh dce:flex-col dce:items-center dce:justify-center dce:overflow-clip dce:px-4 dce:py-12 dce:text-base-content
                {{ class }}"
         {{ attrs }}>
  {% if background %}
    <div aria-hidden="true" class="dce:pointer-events-none dce:absolute dce:inset-0 dce:-z-10">{{ background }}</div>
  {% endif %}
  <div class="card dce:w-full dce:max-w-4xl dce:overflow-clip dce:bg-base-100 dce:shadow-xl">
    <div class="dce:grid dce:grid-cols-1 dce:md:grid-cols-5">
      <div class="dce:flex dce:flex-col dce:gap-10 dce:p-8 dce:md:col-span-2 dce:md:justify-between {{ surface }}">
        {% if logo %}<div class="dce:flex dce:items-center">{{ logo }}</div>{% endif %}
        <div>
          {# djlint:off #}
          {% if title %}<h{{ level }} class="dce:text-3xl dce:font-bold dce:tracking-tight dce:text-balance">{{ title }}</h{{ level }}>{% endif %}
          {# djlint:on #}
          {% if lead %}<p class="dce:mt-3 dce:text-pretty">{{ lead }}</p>{% endif %}
        </div>
        {% if aside %}<div class="dce:hidden dce:text-sm dce:md:block">{{ aside }}</div>{% endif %}
      </div>
      <div class="dce:flex dce:flex-col dce:justify-center dce:gap-5 dce:p-6 dce:sm:p-8 dce:md:col-span-3">
        {% if providers %}<div class="dce:flex dce:flex-col dce: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="dce:rounded-xl dce:border dce:border-base-300" {% if open %}open{% endif %}>
            <summary class="dce:cursor-pointer dce:px-4 dce:py-3 dce:font-medium">{% if disclosure %}{{ disclosure }}{% else %}{% translate "Use your email and password" %}{% endif %}</summary>
            <div class="dce:px-4 dce:pt-2 dce:pb-4">{{ slot }}</div>
          </details>
        {% endif %}
        {% if footer %}<div class="dce:text-center dce:text-sm">{{ footer }}</div>{% endif %}
      </div>
    </div>
  </div>
</section>