{% props title: String, button_text: String, button_url: String, urgent: String = "", brand: Slot = Slot::default(), inner_block: Slot, small_print: Slot = Slot::default(), footer: Slot = Slot::default() %}
{#- The on-screen version of the email layout (a mailer renders the table-based copy from the same data). `urgent` adds the destructive bar; the link is always repeated as text. -#}
<div class="ui-email-bg">
<div class="ui-email">
{%- if !brand.to_html().trim().is_empty() %}
<div class="ui-email-brand">{{ brand }}</div>
{%- end %}
<div class="ui-email-card">
{%- if !urgent.is_empty() %}
<span class="ui-email-urgent">{{ urgent }}</span>
{%- end %}
<h1 class="ui-email-title">{{ title }}</h1>
{{ inner_block }}
<a class="ui-email-button" href="{{ button_url }}">{{ button_text }}</a>
<p class="ui-email-small">Or copy this link into your browser:<br><span class="ui-email-link">{{ button_url }}</span></p>
{%- if !small_print.to_html().trim().is_empty() %}
<p class="ui-email-small" style="margin:0">{{ small_print }}</p>
{%- end %}
</div>
{%- if !footer.to_html().trim().is_empty() %}
<div class="ui-email-footer">{{ footer }}</div>
{%- end %}
</div>
</div>