{% load components %}
<div
    class="
        usa-alert
        usa-alert--{{ variant }}
        usx-alert usx-alert--{{ variant }}
        {% if slim %} usa-alert--slim usx-alert--slim{% endif %}
        {% if noIcon %} usa-alert--no-icon usx-alert--no-icon{% endif %}
    "
    {% if role %}
    role="{{ role }}"
    {% elif variant == 'error' or variant == 'emergency' %}
    role="alert"
    {% elif variant == 'success' %}
    role="status"
    {% else %}
    role="region"
    {% endif %}
    {% if ariaLabelledby %}
    aria-labelledby="{{ ariaLabelledby }}"
    {% elif ariaLabel %}
    aria-label="{{ ariaLabel }}"
    {% elif variant == 'info' or variant == 'warning' %}
    aria-label="{{ heading }}"
    {% endif %}
>
  <div class="usa-alert__body usx-alert__body">
    {% if heading and not slim %}
        <h4 class="usa-alert__heading usx-alert__heading">{{ heading }}</h4>
    {% endif %}
    {% if children %}
      <div class="usa-alert__text usx-alert__text">
        {{ children|safe }}
      </div>
    {% elif text %}
        <p class="usa-alert__text usx-alert__text">{{ text }}</p>
    {% endif %}
    {% if onDismiss %}
    <button class="usx-alert__dismiss" aria-label="Dismiss alert" onclick="{{ onDismiss }}">
      {% icon name='close' size='3' staticBaseUrl=staticBaseUrl aria-hidden="true" focusable="false" role="img" %}{% endicon %}
    </button>
    {% endif %}
  </div>
</div>