<section class="section docs-section" id="modals">
	<h2 class="section-title">Modals</h2>
	<p class="docs-section-description">
		Modal создаётся из JS через `Modals.create`.
		Для обычного текста используй `bodyText`; HTML-контент передавай явно через `bodyHtml` или DOM-элемент.
	</p>

	<div class="block">
		<h3 class="block-title">Open triggers</h3>

		<button class="btn btn-primary" type="button" onclick="demoModal()">Open modal</button>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Modals JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
<pre><code class="language-javascript">Modals.create("demo-modal", {
  title: "Demo modal",
  bodyText: "Modal content",
  actions: modal =&gt; {
    const close = document.createElement("button");
    close.className = "btn btn-primary";
    close.textContent = "Close";
    close.addEventListener("click", () =&gt; modal.close());
    return [close];
  }
}).show();</code></pre>
	</div>
</section>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		window.demoModal = function() {
			Modals.create("demo-modals", {
				title: "Demo modal window",
				footer: "<p>Footer text</p>",
				actions: modal => {
					const buttonCancel = document.createElement("button");
					buttonCancel.classList.add("btn");
					buttonCancel.classList.add("btn-primary");
					buttonCancel.textContent = "Cancel";

					buttonCancel.addEventListener("click", e => {
						modal.close();
					});

					const buttonApply = document.createElement("button");
					buttonApply.classList.add("btn");
					buttonApply.classList.add("btn-success");
					buttonApply.textContent = "Apply";

					buttonApply.addEventListener("click", e => {
						modal.close();

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

					return [ buttonCancel, buttonApply ];
				},
				bodyHtml: `
						<p class="text">Любой контент: текст, формы, списки.</p>

		        <div class="form-group">
		          <label class="label" for="modal-project-name">
		            Project name
		            <input class="input" id="modal-project-name" type="text" placeholder="Launch Plan">
		          </label>
		        </div>

		        <div class="form-group">
		          <label class="label" for="modal-project-desc">
		            Description
		            <textarea class="input" id="modal-project-desc" rows="3" placeholder="Optional"></textarea>
		          </label>
		        </div>
					`
			}).show();
		}
	});

</script>