{#
  htmx.trigger("body", "notification", {
    title: "My title",
    level: "error"
    message: "A bad error occured",
    duration: 3000
  })
  # ...or...
  trigger notification(title: 'A title', level: 'success', message: 'A message', duration: 3000)
#}

<div id="notification-container"
  _="
  init
    set $notificationColorMapping to {
      'error': 'notification-error',
      'validationError': 'notification-warning',
      'warning': 'notification-warning',
      'success': 'notification-success',
      'user': 'notification-user',
      'system': 'notification-system'
    }
  end

  on notification from body
    set notificationData to event.detail
    set locations to notificationData.locations or []
  
    if notificationData.level == 'validationError'
      set notificationData.title to 'Data validation failed'
      if length of locations > 0
        if (closest <form/> to event's target)
          repeat for loc in locations
            set list_data to loc.match('(.*)\\.([0-9]+)')
            if list_data
              set list_idx to list_data[2]
              set list_name to list_data[1]
              add [@aria-invalid=true] to (<[name=`${list_name}`]/> in closest <form/> to event's target as Array)[list_idx]
            else
              add [@aria-invalid=true] to <[name=`${loc}`]/> in closest <form/> to event's target
            end
          end
        end
      end
    end

    render #notification-template with (
      title: notificationData.title,
      message: notificationData.message,
      colorClass: $notificationColorMapping[notificationData.level],
      duration: notificationData.duration or 7000,
      level: notificationData.level
    )

    put it at end of me

  end
"></div>

<template id="notification-template">
  <div class="notification ${colorClass}" _="
    init
      wait ${duration}ms
      transition my opacity to 0 over 200ms
      remove me
    end
    on dblclick or removeNotification
      transition my opacity to 0 over 100ms
      remove me
    end
  ">
    <span class="notification-title">${title}</span><br>
    @if level is in ['error', 'warning', 'validationError'] set bullet to '&#10071;' end
    @if message is a Array
      @repeat for m in message
      <span class="notification-text">${bullet} ${m}</span><br>
      @end
    @else
      <span class="notification-text">${bullet} ${message}</span><br>
    @end
  </div>
</template>