{% props variant: String = "", title: String = "", inner_block: Slot %}
<div class="ui-alert"{% if !variant.is_empty() %} data-variant="{{ variant }}"{% end %}{% if variant == "destructive" %} role="alert"{% end %}>
{%- if variant == "destructive" || variant == "warning" %}
<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
{%- else %}
<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
{%- end %}
{%- if !title.is_empty() %}
<div class="ui-alert-title">{{ title }}</div>
{%- end %}
<div class="ui-alert-description">{{ inner_block }}</div>
</div>