<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`.
		Если текст не передан — toast отображается в компактном однострочном виде.
	</p>

	<div class="block demo-actions">
		<h3 class="block-title">With text</h3>

		<button class="btn btn-primary" type="button" onclick="demoToastInfo()">Show info</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 demo-actions">
		<h3 class="block-title">Title only</h3>

		<button class="btn btn-primary" type="button" onclick="demoToastInfoTitleOnly()">Info</button>
		<button class="btn btn-success" type="button" onclick="demoToastSuccessTitleOnly()">Success</button>
		<button class="btn btn-warning" type="button" onclick="demoToastWarningTitleOnly()">Warning</button>
		<button class="btn btn-danger" type="button" onclick="demoToastDangerTitleOnly()">Danger</button>
	</div>

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

Toasts.createDanger("Error", "Произошла ошибка").show();

// Title only — compact single-line toast
Toasts.createInfo("Saved").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();
		}

		window.demoToastInfoTitleOnly = function () {
			Toasts.createInfo("Document saved").show();
		}

		window.demoToastSuccessTitleOnly = function () {
			Toasts.createSuccess("Synced").show();
		}

		window.demoToastWarningTitleOnly = function () {
			Toasts.createWarning("Offline mode").show();
		}

		window.demoToastDangerTitleOnly = function () {
			Toasts.createDanger("Connection lost").show();
		}
	});
</script>