{% load ext_theme_tags %}

{% comment %}
  This template is used by the base template to provide a list of messages on
  the top of the page. Django default level notifications are treated as
  temporary messages, using SUI toast messages instead of block elements in the
  page content pane.
{% endcomment %}

{% if messages %}
  {% for message in messages %}
    {% comment %}
      This is a little bit of a hack, as toasts are purely JS and don't
      require an underlying element. Django messages uses "tags" to specify
      info/success/error classes on the messages, which just happen to align
      with SUI classes too.
    {% endcomment %}
    {# fmt:off #}
    {% spaceless %}
      <div style="display: none;"
           data-bind="
semanticui: {
  toast: {
    {% comment %}
      SECURITY: We need to HTML escape the message before escaping it for JS,
      since the content will be inserted via JS (decoded), not from a template.
      If the message was intenationally marked as safe, it won't be escaped
      (the escape filter handles this).
    {% endcomment %}
    message: '{{ message|escape|escapejs }}',
    showProgress: 'bottom',
    classProgress: 'primary',
    class: '{{ message.tags }}',
    displayTime: 7500,
  }
}">
        </div>
    {% endspaceless %}
    {# fmt:on #}
  {% endfor %}
{% endif %}