{# @description One question to a screen, in large type, with the logo in a bar across the top. For asking who somebody is before asking how they want to prove it. #}
{# @prop eyebrow:text | description:"Short line above the question. Where the reader is: Step 1 of 2." #}
{# @prop title:text | default:"What is your email address?" | description:"The question. Use the title slot when it contains markup, which it does when it is the label of the field below it." #}
{# @prop lead:text | description:"The sentence under the question" #}
{# @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 answer and the provider buttons. Left empty, it is a translated or." #}
{# @prop class:text | description:"Extra classes on the outer section" #}
{# @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-up page, or the way back a step. #}
{# @slot:providers — Buttons that skip the question: third-party providers, a passkey. Drawn under the answer. #}
{# @slot:footer — Small print under everything #}
{# @slot The answer — One field and its button, or the list of ways to continue. #}
{% load i18n %}
<c-vars eyebrow title lead level="1" divider class />
<section class="dce:relative dce:isolate dce:flex dce:min-h-dvh dce:flex-col dce:overflow-clip dce:bg-base-100 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:flex dce:items-center dce:justify-between dce:gap-4 dce:px-6 dce:py-5 dce:sm:px-10">
    <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-xl dce:flex-1 dce:flex-col dce:justify-center dce:gap-8 dce:px-6 dce:pt-8 dce:pb-24">
    <div class="dce:flex dce:flex-col dce:gap-4">
      {% 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 title %}<h{{ level }} class="dce:text-4xl dce:font-bold dce:tracking-tight dce:text-balance dce:sm:text-5xl">{{ title }}</h{{ level }}>{% endif %}
      {# djlint:on #}
      {% if lead %}<p class="dce:text-lg dce:text-base-content/80 dce:text-pretty">{{ lead }}</p>{% endif %}
    </div>
    {{ slot }}
    {% if providers %}
      <c-divider class="dce:my-0 dce:text-sm dce:text-base-content/80" only>{% if divider %}{{ divider }}{% else %}{% translate "or" %}{% endif %}</c-divider>
      <div class="dce:flex dce:flex-col dce:gap-3 dce:sm:flex-row">{{ providers }}</div>
    {% endif %}
    {% if footer %}<div class="dce:text-sm dce:text-base-content/80">{{ footer }}</div>{% endif %}
  </div>
</section>