{% load fragments %}
{% spaceless %}
<div id="hq" {% if messages %}hx-swap-oob="true"{% endif %} role="alert">
  {% for message in messages %}
    <div id="msg-{{forloop.counter}}" class="{{message.tags}}" data-level="{{message.level_tag|lower}}"
        _="on load show me ">
      {{message}}
      <button id="msg-close-{{forloop.counter}}" type="button" _="on click remove #msg-{{forloop.counter}} end">
        {% icon name='x_mark_mini' css="h-5 w-5 " pre_text="Close" pre_class="sr-only" aria_hidden="true" %}
      </button>
    </div>
  {% endfor %}
</div>
{% endspaceless %}
