{% props title: String, subtitle: String = "", layout: String = "", brand: Slot = Slot::default(), inner_block: Slot, footer: Slot = Slot::default(), aside: Slot = Slot::default() %}
{#- `brand`: logo and name. `inner_block`: providers, divider and form, under the title. `layout="split"` shows `aside` (a quote or product statement) beside it. -#}
<main class="ui-auth"{% if !layout.is_empty() %} data-layout="{{ layout }}"{% end %}>
<div class="ui-auth-inner">
{%- if !brand.to_html().trim().is_empty() %}
<div class="ui-auth-brand">{{ brand }}</div>
{%- end %}
<div class="ui-auth-card">
<div>
<h1 class="ui-auth-title">{{ title }}</h1>
{%- if !subtitle.is_empty() %}
<p class="ui-auth-sub">{{ subtitle }}</p>
{%- end %}
</div>
{{ inner_block }}
</div>
{%- if !footer.to_html().trim().is_empty() %}
<p class="ui-auth-foot">{{ footer }}</p>
{%- end %}
</div>
{%- if layout == "split" %}
<aside class="ui-auth-aside">{{ aside }}</aside>
{%- end %}
</main>