{# @description The case for signing up beside the form that does it. On a narrow screen the headline stays above the form and the rest of the case moves below it. #}
{# @prop eyebrow:text | description:"Short line above the headline" #}
{# @prop headline:text | default:"Know what shipped before your customers do" | description:"The page's heading: the reason to sign up. Use the headline slot instead when it contains markup." #}
{# @prop lead:text | description:"The sentence under the headline" #}
{# @prop title:text | default:"Create your account" | description:"The heading of the form card, one level below the headline" #}
{# @prop level:select['1', '2', '3', '4', '5'] | default:"1" | description:"Level of the headline. The card's heading is drawn one level down." #}
{# @prop divider:text | description:"The word between the provider buttons and the form. Left empty, it is a translated or." #}
{# @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 page #}
{# @slot:logo — The application's logo, at the leading end of the top bar #}
{# @slot:nav — The trailing end of the top bar. The link to the sign-in page. #}
{# @slot:points — The case, under the headline. A points component, a quote, a row of customer logos. #}
{# @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 card. The terms the reader is agreeing to. #}
{# @slot The form — The application's own sign-up form, with its fields, its errors and its submit button. #}
<c-vars eyebrow headline lead title level="1" divider class />
<section class="dce:relative dce:isolate dce:flex dce:min-h-dvh dce:flex-col dce:overflow-clip 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="dce:mx-auto dce:flex dce:w-full dce:max-w-7xl dce:items-center dce:justify-between dce:gap-4 dce:px-4 dce:py-5 dce:sm:px-6 dce:lg:px-8">
    <div class="dce:flex dce:items-center">{{ logo }}</div>
    {% if nav %}<div class="dce:text-sm">{{ nav }}</div>{% endif %}
  </div>
  {% comment %}
    Three cells in reading order, placed by column and row at width rather than
    reordered, so the order a keyboard meets them in is the order they are seen in.
  {% endcomment %}
  <div class="dce:mx-auto dce:grid dce:w-full dce:max-w-7xl dce:flex-1 dce:grid-cols-1 dce:content-center dce:gap-x-16 dce:gap-y-8 dce:px-4 dce:pt-6 dce:pb-12 dce:sm:px-6 dce:lg:grid-cols-2 dce:lg:grid-rows-[auto_auto] dce:lg:px-8">
    <div class="dce:flex dce:flex-col dce:gap-4 dce:lg:col-start-1 dce:lg:row-start-1 dce:lg:self-end">
      {% if eyebrow %}
        <p class="dce:text-sm dce:font-semibold dce:tracking-widest dce:text-base-content/80 dce:uppercase">{{ eyebrow }}</p>
      {% endif %}
      {# djlint:off #}
      {% if headline %}<h{{ level }} class="dce:text-4xl dce:font-bold dce:tracking-tight dce:text-balance dce:sm:text-5xl">{{ headline }}</h{{ level }}>{% endif %}
      {# djlint:on #}
      {% if lead %}<p class="dce:max-w-xl dce:text-lg dce:text-base-content/80 dce:text-pretty">{{ lead }}</p>{% endif %}
    </div>
    <div class="dce:lg:col-start-2 dce:lg:row-span-2 dce:lg:row-start-1 dce:lg:self-center">
      <c-auth.panel :title="title" :lead="lead" level="{{ level|add:'1' }}" :divider="divider" card class="dce:mx-auto dce:w-full dce:max-w-md" only>
        <c-slot name="providers">{{ providers }}</c-slot>
        {{ slot }}
        <c-slot name="footer">{{ footer }}</c-slot>
      </c-auth.panel>
    </div>
    {% if points %}
      <div class="dce:lg:col-start-1 dce:lg:row-start-2 dce:lg:self-start">{{ points }}</div>
    {% endif %}
  </div>
</section>