{% load static %}
{% load custom_filters %}  



<link href="{% static 'css/jquery.toast.css' %}" rel="stylesheet">

<script>
    var script = document.createElement('script');
    script.src = "{% static '/js/jquery.toast.js' %}";
    script.type = 'text/javascript';
    script.async = true;
    script.onload = function() {
      
      var toastConfig = {
          'error': {
            heading: '',
            icon: 'error',
          },
          'success': {
            heading: '',
            icon: 'success',
          },
          'warning': {
            heading: '',
            icon: 'warning',
          },
          'info': {
            heading: '',
            icon: 'info',
          },
        };

      {% for message in messages %}              
        
        var toast = $.toast({
          heading: toastConfig['{{ message.tags }}']['heading'],
          text: `
                  {% if message.message|is_list %}
                    {% for m in message.message %} 
                      {{m}} 
                    {% endfor %}
                  {% else %}
                    {{ message.message }}
                  {% endif %}
                `,
          showHideTransition: 'slide',
          icon: toastConfig['{{ message.tags }}']['icon'],
          position: 'top-right',
          loader: false,
          hideAfter: 5000, 
          allowToastClose: false,
          textColor: '#676767',
        });            
    {% endfor %}

    };
    document.head.appendChild(script);
</script>
