{% load tetra %}

<div class="alert alert-{{ message_level }}{% if dismissible %} alert-dismissible{% endif %}" role="alert">
  <div class="d-flex">
    {% if icon %}
      <div class="alert-icon">
        <i class='ti ti-{{icon}}'></i>
      </div>
    {% endif %}
    <div>
      {% if title %}
        <h4 class="alert-heading">{{title}}</h4>
      {% endif %}
      {% if text %}<div class="alert-description">
        {% if slot.default %}
          {% slot default %}{% endslot %}
        {% endif %}
      </div>
      {% elif text %}
        {{text}}
      {% endif %}
    </div>
  </div>
  {% if dismissible %}
    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
  {% endif %}
</div>