{# @description Signing up as a short run of steps, with the run drawn across the top so the reader can see how far there is to go. One card, one step at a time. #}
{# @prop title:text | default:"Create your account" | description:"The heading of the current step. 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 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, centred above the steps #}
{# @slot:steps — The run of steps, drawn between the logo and the card. A steps component from daisy-cotton, or any ordered list. #}
{# @slot:providers — Buttons that skip the form, one full-width button each: third-party providers, a passkey, an emailed code #}
{# @slot:footer — Under the card. The link to the sign-in page, or the way back a step. #}
{# @slot The form — The current step's form, with its fields, its errors and its submit button. #}
<c-vars title lead level="1" divider class />
<section class="relative isolate flex min-h-dvh flex-col items-center justify-center overflow-clip px-4 py-10 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="flex w-full max-w-lg flex-col gap-8">
    {% if logo %}<div class="flex justify-center">{{ logo }}</div>{% endif %}
    {{ steps }}
    <c-auth.panel :title="title" :lead="lead" :level="level" :divider="divider" card only>
      <c-slot name="providers">{{ providers }}</c-slot>
      {{ slot }}
    </c-auth.panel>
    {% if footer %}<div class="text-center text-sm">{{ footer }}</div>{% endif %}
  </div>
</section>