{# @description The form on one side and the product itself on the other, running off the edge of the screen. For when the best argument is a look at what is behind the door. #}
{# @prop title:text | default:"Create your account" | description:"The heading. Use the title slot instead when it contains markup." #}
{# @prop lead:text | description:"The sentence under the heading" #}
{# @prop caption:text | description:"The line above the picture, in the media pane" #}
{# @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 surface:text | default:"dce:bg-base-200" | description:"Surface and text colour of the media pane" #}
{# @prop class:text | description:"Extra classes on the outer section" #}
{# @slot:background — A background block, rendered into a layer behind the media 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:nav — Opposite the logo. The link to the sign-in page. #}
{# @slot:providers — Buttons that skip the form, one full-width button each: third-party providers, a passkey, an emailed code #}
{# @slot:footer — Under the form. The terms the reader is agreeing to. #}
{# @slot:media — The picture: a screenshot or a mockup of the application. Decoration only, hidden below the lg breakpoint, and it is cropped at the trailing edge and the foot. #}
{# @slot The form — The application's own sign-up form, with its fields, its errors and its submit button. #}
<c-vars title lead caption level="1" divider surface="dce:bg-base-200" 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-12
                {{ class }}"
         {{ attrs }}>
  <div class="dce:flex dce:flex-col dce:gap-8 dce:px-6 dce:py-6 dce:sm:px-10 dce:lg:col-span-5 dce:lg:px-12">
    <div class="dce:flex dce:items-center dce:justify-between dce:gap-4">
      <div class="dce:flex dce:items-center">{{ logo }}</div>
      {% if nav %}<div class="dce:text-sm">{{ nav }}</div>{% endif %}
    </div>
    <div class="dce:mx-auto dce:flex dce:w-full dce:max-w-sm dce:flex-1 dce:flex-col dce:justify-center dce:pb-8">
      <c-auth.panel :title="title" :lead="lead" :level="level" :divider="divider" size="lg" only>
        <c-slot name="providers">{{ providers }}</c-slot>
        {{ slot }}
        <c-slot name="footer">{{ footer }}</c-slot>
      </c-auth.panel>
    </div>
  </div>
  <div class="dce:relative dce:isolate dce:hidden dce:overflow-clip dce:pt-16 dce:pl-16 dce:lg:col-span-7 dce:lg:flex dce:lg:flex-col dce:lg:justify-between dce:lg:gap-10
              {{ surface }}">
  {% if background %}
    <div aria-hidden="true" class="dce:pointer-events-none dce:absolute dce:inset-0 dce:-z-10">{{ background }}</div>
  {% endif %}
    {% if caption %}
      <p class="dce:max-w-lg dce:pr-16 dce:text-3xl dce:font-bold dce:tracking-tight dce:text-balance">{{ caption }}</p>
    {% endif %}
    <div aria-hidden="true" class="dce:-mr-40 dce:-mb-10 dce:overflow-clip dce:rounded-tl-2xl dce:shadow-2xl">{{ media }}</div>
  </div>
</section>