<section class="section docs-section" id="toasts">
	<h2 class="section-title">Toasts</h2>
	<p class="docs-section-description">
		Toasts создаются из JS и добавляются в `body` вызовом `.show()`.
		Для коротких уведомлений доступны методы `createInfo`, `createSuccess`, `createWarning`, `createDanger`.
	</p>

	<div class="block demo-actions">
		<h3 class="block-title">Triggers (demo buttons)</h3>

		<button class="btn btn-primary" type="button" onclick="demoToastInfo()">Show info (default)</button>
		<button class="btn btn-success" type="button" onclick="demoToastSuccess()">Show success</button>
		<button class="btn btn-warning" type="button" onclick="demoToastWarning()">Show warning</button>
		<button class="btn btn-danger" type="button" onclick="demoToastDanger()">Show danger</button>
	</div>

	<!-- <div class="block">
		<h3 class="block-title">Toast stack (container)</h3>

		<div class="toast-stack" aria-live="polite" aria-relevant="additions">
			<article class="toast toast-info" role="status">
				<div class="toast-content">
					<h4 class="toast-title"><i class="ph ph-info"></i> Info</h4>
					<p class="toast-text">Обычное уведомление для пользователя.</p>
				</div>
				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
			</article>

			<article class="toast toast-success" role="status">
				<div class="toast-content">
					<h4 class="toast-title"><i class="ph ph-check-circle"></i> Success</h4>
					<p class="toast-text">Операция выполнена успешно.</p>
				</div>
				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
			</article>

			<article class="toast toast-warning" role="status">
				<div class="toast-content">
					<h4 class="toast-title"><i class="ph ph-check-circle"></i> Warning</h4>
					<p class="toast-text">Нужна проверка параметров.</p>
				</div>
				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
			</article>

			<article class="toast toast-danger" role="alert">
				<div class="toast-content">
					<h4 class="toast-title"><i class="ph ph-warning-octagon"></i> Danger</h4>
					<p class="toast-text">Произошла ошибка. Повтори позже.</p>
				</div>
				<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
			</article>
		</div>

		<p class="hint">
			<b>Hint Example.</b>
			.toast-stack — фиксируй в углу через CSS (например bottom/right), либо размещай как блок в контенте.
		</p>
	</div> -->

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Toasts JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-javascript">Toasts.createSuccess(
  "Success",
  "Операция выполнена успешно",
  { lifetime: 4000, alone: true }
).show();

Toasts.createDanger("Error", "Произошла ошибка").show();</code></pre>
	</div>
</section>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		window.demoToastInfo = function () {
			Toasts.createInfo(
				"Title",
				"Произошла ошибка. Повтори позже."
			).show();
		}

		window.demoToastSuccess = function () {
			Toasts.createSuccess(
				"Success",
				"Всё отлично, всё работает, это успех тостера"
			).show();
		}

		window.demoToastWarning = function () {
			Toasts.createWarning(
				"Warning",
				"Произошла ошибка. Повтори позже."
			).show();
		}

		window.demoToastDanger = function () {
			Toasts.createDanger(
				"Danger",
				"Произошла ошибка. Повтори позже."
			).show();
		}
	});
</script>