<!--
 ~ 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="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:ezy="http://www.ezyplatform.com/thymeleaf/layout">
<body>
<th:block th:fragment="content">
	<th:block th:if="${commonFragments != null && commonFragments.get('toast') != null && commonFragments.get('toast').content != 'toast'}">
        <ezy:block ezy:utext="${commonFragments.get('toast').content}" />
    </th:block>
    <th:block th:if="${commonFragments == null || commonFragments.get('toast') == null || commonFragments.get('toast').content == 'toast'}">
		<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>
</th:block>
<th:block th:fragment="scripts">
	<th:block th:if="${commonFragments != null && commonFragments.get('toast') != null && !#strings.isEmpty(commonFragments.get('toast').additionalFoot)}">
        <ezy:block ezy:utext="${commonFragments.get('toast').additionalFoot}" />
    </th:block>
    <th:block th:if="${commonFragments == null || commonFragments.get('toast') == null || #strings.isEmpty(commonFragments.get('toast').additionalFoot)}">
		<script>
			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>
	</th:block>
</th:block>
</body>
</html>
