{% load i18n %}{% if items and toast %}<div class="toast-region" aria-live="polite">{% for message in items %}
  <div class="toast" data-status="{{ message.status }}"{% if message.status == 'danger' %} role="alert"{% endif %}><p class="toast__message">{{ message.text }}</p></div>{% endfor %}
</div>{% elif items %}<div class="flow" style="--flow-space: var(--space-xs);">{% for message in items %}
  <div class="alert" data-status="{{ message.status }}" role="{% if message.status == 'danger' %}alert{% else %}status{% endif %}">
    <div class="cluster" style="--cluster-justify: space-between; --cluster-align: flex-start;">
      <p>{{ message.text }}</p>
      <button class="alert__close" type="button" aria-label="{% translate 'Dismiss' %}"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg></button>
    </div>
  </div>{% endfor %}
</div>{% endif %}