{% if messages %}
  <div class="amq-flash-stack">
    {% for message in messages %}
      {% set level = message.level %}
      {% if level == "success" %}
        {% set tone = "success" %}
      {% elif level == "error" %}
        {% set tone = "danger" %}
      {% elif level == "warning" %}
        {% set tone = "warning" %}
      {% else %}
        {% set tone = "neutral" %}
      {% endif %}

      <div id="flash-{{ loop.index }}"
           data-flash-message
           x-data="asyncmqDismissible"
           x-show="visible"
           x-transition.opacity.duration.200ms
           class="amq-flash amq-flash--{{ tone }}"
           role="status">
        <span class="amq-flash-dot" aria-hidden="true"></span>
        <div class="amq-flash-text">{{ message.text }}</div>
        <button type="button"
                x-on:click="dismiss"
                class="amq-flash-close"
                aria-label="Dismiss message">
          ×
        </button>
      </div>
    {% endfor %}
  </div>
{% endif %}