{% if messages %}
  <div class="toast-container app-toast-container position-fixed top-0 end-0 p-3" aria-live="polite" aria-atomic="true">
    {% for message in messages %}
      {% if 'success' in message.tags %}
        {% with icon='bi-check-circle-fill' tone='success' %}
          <div class="toast app-toast app-toast--{{ tone }} show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="4200">
            <div class="toast-body d-flex align-items-start gap-2">
              <i class="bi {{ icon }} app-toast__icon" aria-hidden="true"></i>
              <div class="app-toast__text">{{ message }}</div>
              <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
        {% endwith %}
      {% elif 'error' in message.tags or 'danger' in message.tags %}
        {% with icon='bi-exclamation-triangle-fill' tone='danger' %}
          <div class="toast app-toast app-toast--{{ tone }} show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
            <div class="toast-body d-flex align-items-start gap-2">
              <i class="bi {{ icon }} app-toast__icon" aria-hidden="true"></i>
              <div class="app-toast__text">{{ message }}</div>
              <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
        {% endwith %}
      {% elif 'warning' in message.tags %}
        {% with icon='bi-exclamation-circle-fill' tone='warning' %}
          <div class="toast app-toast app-toast--{{ tone }} show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
            <div class="toast-body d-flex align-items-start gap-2">
              <i class="bi {{ icon }} app-toast__icon" aria-hidden="true"></i>
              <div class="app-toast__text">{{ message }}</div>
              <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
        {% endwith %}
      {% else %}
        {% with icon='bi-info-circle-fill' tone='info' %}
          <div class="toast app-toast app-toast--{{ tone }} show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="4200">
            <div class="toast-body d-flex align-items-start gap-2">
              <i class="bi {{ icon }} app-toast__icon" aria-hidden="true"></i>
              <div class="app-toast__text">{{ message }}</div>
              <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
        {% endwith %}
      {% endif %}
    {% endfor %}
  </div>
{% endif %}