<section class="section docs-section" id="confirm-dialog">
	<h2 class="section-title">Confirm Dialog</h2>
	<p class="docs-section-description">
		Confirm Dialog использует существующий `confirmPopup` поверх Modal. Он нужен для коротких подтверждений перед
		опасными или необратимыми действиями.
	</p>

	<div class="block">
		<h3 class="block-title">Trigger</h3>

		<div class="demo-actions">
			<button class="btn btn-warning with-icon" type="button" onclick="demoConfirmDialog()">
				<i class="ph ph-warning"></i>
				Open confirm
			</button>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Confirm JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
<pre><code class="language-javascript">confirmPopup(
  "This action cannot be undone.",
  () =&gt; Toasts.createSuccess("Confirmed", "Action accepted").show(),
  () =&gt; Toasts.createInfo("Canceled", "Action skipped").show()
);</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Global Namespace</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
<pre><code class="language-javascript">GNexusUIKit.confirmPopup(
  "Apply this change?",
  () =&gt; console.log("confirmed"),
  () =&gt; console.log("canceled")
);</code></pre>
	</div>
</section>

<script>
	document.addEventListener("DOMContentLoaded", () => {
		window.demoConfirmDialog = function() {
			confirmPopup(
				"Apply this change? This action requires confirmation.",
				() => Toasts.createSuccess("Confirmed", "Action accepted").show(),
				() => Toasts.createInfo("Canceled", "Action skipped").show()
			);
		};
	});
</script>