{% set attributes = attributes.addClass('shoelace-alert') %}
{% set attributes = (variant and variant != 'default') ? attributes.setAttribute('variant', variant) : attributes %}

{% set attributes = id ? attributes.setAttribute('id', id|default('alert-' ~ random())) : attributes %}
{% set attributes = open ? attributes.setAttribute('open', '') : attributes %}
{% set attributes = closable ? attributes.setAttribute('closable', '') : attributes %}
{% set attributes = duration ? attributes.setAttribute('duration', duration) : attributes %}

{% if toast|default(false) and toast_stack_position %}
  {% set toast_stack_styles = {
    'bottom-right': 'top: auto; left: auto; bottom: 0; right: 0;',
    'bottom-left': 'top: auto; left: 0; bottom: 0; right: auto;',
    'top-right': 'left: auto; right: 0;',
    'top-left': 'left: 0; right: auto;',
  } %}
  {% if toast_stack_styles[toast_stack_position|default('bottom-right')] is defined %}
    <style>
      .sl-toast-stack {
        {{ toast_stack_styles[toast_stack_position|default('bottom-right')] }}
      }
    </style>
  {% endif %}
{% endif %}

<sl-alert{{ attributes }}>
  {% if icon %}
    <sl-icon slot="icon" name="{{ icon }}"></sl-icon>
  {% endif %}
  {{ content }}
  {% if debug %}
  <pre><code>{{ debug }}</code></pre>
  {% endif %}
</sl-alert>
