include ./material_symbol

mixin formMessages
	div(data-ol-form-messages='' role='alert')

mixin formMessagesNewStyle(extraClass = 'form-messages-bottom-margin')
	- const attrs = extraClass ? {class: extraClass} : {}
	div(data-ol-form-messages-new-style='' role='alert')&attributes(attrs)

mixin customFormMessage(key, kind)
	if kind === 'success'
		.alert.alert-success(
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='polite'
		)
			block
	else if kind === 'danger'
		.alert.alert-danger(
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='assertive'
		)
			block
	else
		.alert.alert-warning(
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='polite'
		)
			block

mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
	- extraClass = extraClass ? ' ' + extraClass : ''
	if kind === 'success'
		div(
			class='notification notification-type-success' + extraClass
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='polite'
		)
			.notification-icon
				+material-symbol('check_circle')
			.notification-content.text-left
				block
	else if kind === 'danger'
		div(
			class='notification notification-type-error' + extraClass
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='polite'
		)
			.notification-icon
				+material-symbol('error')
			.notification-content.text-left
				block
	else
		div(
			class='notification notification-type-warning' + extraClass
			hidden
			data-ol-custom-form-message=key
			role='alert'
			aria-live='polite'
		)
			.notification-icon
				+material-symbol('warning')
			.notification-content.text-left
				block

mixin customValidationMessage(key)
	.invalid-feedback.mt-2(hidden data-ol-custom-form-message=key)
		i.fa.fa-fw.fa-warning.me-1(aria-hidden='true')
		div
			block

mixin customValidationMessageNewStyle(key)
	.notification.notification-type-error(hidden data-ol-custom-form-message=key)
		.notification-icon
			+material-symbol('error')
		.notification-content.text-left.small
			block