<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>
		<!-- <button class="btn btn-accent" type="button">Open confirm modal</button> -->
	</div>

	<!-- <div class="block">
		<h3 class="block-title">Basic modal (structure)</h3>

		<div class="modal" aria-hidden="true">
			<div class="modal-backdrop"></div>

			<div
				class="modal-panel"
				role="dialog"
				aria-modal="true"
				aria-labelledby="modal-title-basic"
			>
				<header class="modal-header">
					<h4 class="modal-title" id="modal-title-basic">Basic modal</h4>
					<button class="btn-icon" type="button" aria-label="Close">✕</button>
				</header>

				<div class="modal-body">
					<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>
				</div>

				<footer class="modal-footer">
					<div class="actions">
						<button class="btn btn-primary" type="button">Cancel</button>
						<button class="btn btn-success" type="button">Save</button>
					</div>
				</footer>
			</div>
		</div>
	</div> -->
</section>