
<script src="{{ STATIC_URL }}bootstrap-notify.min.js"></script>

<script>
    (function ($) {
      if (typeof bootstrap !== 'undefined') {
        $.notifyDefaults({
          template: `
                <div data-notify="container" class="col-11 col-sm-4 alert alert-{0} alert-dismissible fade show" role="alert">
                  <button type="button" class="btn-close" aria-label="Close" data-notify="dismiss"></button>
                  <span data-notify="icon"></span>
                  <span data-notify="title">{1}</span>
                  <span data-notify="message">{2}</span>
                  <div class="progress" data-notify="progressbar">
                    <div class="progress-bar bg-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                  </div>
                  <a href="{3}" target="{4}" data-notify="url"></a>
                </div>
            `
        });
      }
    })(jQuery);
</script>

{% if messages %}
    <script>
        (function ($) {
            {% for message in messages %}
                $.notify({
                    message: '{{ message|linebreaksbr }}'
                }, {
                    type: '{% if message.tags == 'success' %}success{% else %}danger{% endif %}'
                });
            {% endfor %}
        })(jQuery);
    </script>
{% endif %}
