{# @description The form in one half of the screen and a brand pane in the other. Below the lg breakpoint the pane goes and the form has the page. #}
{# @prop title:text | default:"Welcome back" | description:"The heading. 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 divider:text | description:"The word between the provider buttons and the form. Left empty, it is a translated or." #}
{# @prop reverse:boolean | default:False | description:"Put the brand pane on the leading edge" #}
{# @prop surface:text | default:"dce:bg-neutral dce:text-neutral-content" | description:"Surface and text colour of the brand pane" #}
{# @prop class:text | description:"Extra classes on the outer section" #}
{# @slot:background — A background block, rendered into a layer behind the brand pane only #}
{# @slot:logo — The application's logo, at the top of the form column so it is still there when the pane is not #}
{# @slot:providers — Buttons that skip the form, one full-width button each: third-party providers, a passkey, an emailed code #}
{# @slot:footer — The foot of the form column. The link to the sign-up page, usually. #}
{# @slot:aside — What the brand pane says. A quotation, a release note, a picture. Decoration only: it is not shown on a narrow screen. #}
{# @slot The form — The application's own sign-in form, with its fields, its errors and its submit button. #}
<c-vars title lead level="1" divider reverse surface="dce:bg-neutral dce:text-neutral-content" class />
<section class="dce:grid dce:min-h-dvh dce:grid-cols-1 dce:bg-base-100 dce:text-base-content dce:lg:grid-cols-2
                {{ class }}"
         {{ attrs }}>
  <div class="dce:flex dce:flex-col dce:gap-8 dce:px-6 dce:py-8 dce:sm:px-10 dce:lg:px-16 {% if reverse %}dce:lg:order-2{% endif %}">
    {% if logo %}<div class="dce:flex dce:items-center">{{ logo }}</div>{% endif %}
    <div class="dce:mx-auto dce:flex dce:w-full dce:max-w-sm dce:flex-1 dce:flex-col dce:justify-center">
      <c-auth.panel :title="title" :lead="lead" :level="level" :divider="divider" size="lg" only>
        <c-slot name="providers">{{ providers }}</c-slot>
        {{ slot }}
      </c-auth.panel>
    </div>
    {% if footer %}<div class="dce:mx-auto dce:w-full dce:max-w-sm dce:text-sm">{{ footer }}</div>{% endif %}
  </div>
  <div class="dce:relative dce:isolate dce:hidden dce:overflow-clip dce:p-16 dce:lg:flex dce:lg:flex-col dce:lg:justify-end
              {{ surface }}
              {% if reverse %}dce:lg:order-1{% endif %}">
  {% if background %}
    <div aria-hidden="true" class="dce:pointer-events-none dce:absolute dce:inset-0 dce:-z-10">{{ background }}</div>
  {% endif %}
    {{ aside }}
  </div>
</section>