<div id="quick-notifications"
     x-init='$notifications.addMany([
             {%- for message in messages -%}
               {%- if not message.extra_tags -%}
                 { tag: "{{ message.tags }}", text: {{ message|string|tojson }} },
               {%- endif -%}
             {%- endfor -%}
             ])'
>
  <template x-for="(message, index) in $notifications.getAll()">
    <div class="alert" :class="`alert-${message.tag}`" x-transition>
      <span class="alert-main" x-text="message.text"></span>
      <span class="clickable" @click="$store.notifications = $store.notifications.filter((item, i) => i !== index)">
        <i class="fa fa-close"></i>
      </span>
    </div>
  </template>
</div>
