<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<body>
<th:block th:fragment="content">
	<div id="toasts" aria-live="polite" aria-atomic="true"
		 class="fixed-top pt-3 top-0 end-0 pr-4 pe-4 global-toast"
		 style="z-index: 32768;">
	</div>
</th:block>
<script th:fragment="scripts">
var toastCount = 0;
var shortToast = function(title, content, titleColor) {
	toastCount += 1;
	var toastId = `toast${toastCount}`;
	var titleColorActual = titleColor || '';
	var html = `
		<div id="${toastId}" class="toast ms-auto w-250px" role="alert"
			data-delay="2500" data-bs-delay="2500" data-autohide="true" data-bs-autohide="true" aria-atomic="true">
			<div class="toast-header">
				<strong class="me-auto text-primary ${titleColorActual}">${title}</strong>
				<small class="text-muted">${ezyweb.messages.just_now}</small>
				<a class="ms-2 mb-1 close" data-dismiss="toast" data-bs-dismiss="toast" aria-label="Close" style="cursor: pointer;">
					<span aria-hidden="true">&times;</span>
				</a>
			</div>
			<div class="toast-body">${content}</div>
		</div>
	`;

	$('#toasts').append(html);
	$(`#${toastId}`).toast('show');
	$(`#${toastId}`).on('hidden.bs.toast', () => {
		$(`#${toastId}`).remove();
	});
};
</script>
</body>
</html>
