//- to be kept in sync with frontend/js/shared/components/notification.tsx
include ./material_symbol

mixin notificationIcon(type)
	if type === 'info'
		+material-symbol('info')
	else if type === 'success'
		+material-symbol('check_circle')
	else if type === 'error'
		+material-symbol('error')
	else if type === 'warning'
		+material-symbol('warning')

mixin notification(options)
	- var {ariaLive, id, type, title, content, disclaimer, className, dismissId, dismissCookiePaths} = options ?? {}
	- var classNames = `notification notification-type-${type} ${className ? className : ''} ${isActionBelowContent ? 'notification-cta-below-content' : ''}`

	if dismissId && dismissedNotifications.includes(dismissId)
		//- Notification has been dismissed, do not render
	else
		div(
			aria-live=ariaLive
			role='alert'
			id=id
			class=classNames
			data-ol-dismiss-id=dismissId
			data-ol-dismiss-cookie-paths=dismissCookiePaths && dismissCookiePaths.join(',')
		)
			.notification-icon
				+notificationIcon(type)
			.notification-content-and-cta
				.notification-content
					if title
						p
							b #{title}
					| !{content}
					block
				//- TODO: handle action
				//- if action
				//- 	.notification-cta
				if disclaimer
					.notification-disclaimer #{disclaimer}
			if dismissId
				.notification-close-btn
					button(aria-label=translate('close') data-ol-dismiss-button)
						+material-symbol('close')