<section class="section" id="modals">
	<h2 class="section-title">Modals</h2>

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

		<button class="btn btn-primary" type="button" onclick="demoModal()">Open modal</button>
	</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.innerHTML = "Cancel";

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

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

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

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

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

		        <div class="form-group">
		          <label class="label" for="modal-device-name">
		            Device name
		            <input class="input" id="modal-device-name" type="text" placeholder="Kitchen Light">
		          </label>
		        </div>

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

</script>