<section class="section docs-section" id="drawer">
	<h2 class="section-title">Drawer</h2>
	<p class="docs-section-description">
		Drawer подходит для контекстных деталей, quick edit и длинных вторичных сценариев без ухода со страницы.
		По API он близок к Modal, но панель закреплена у края экрана.
	</p>

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

		<div class="drawer-preview">
			<div class="drawer-preview-content">
				<p class="text">
					Используй Drawer, когда нужно сохранить контекст основного экрана и раскрыть боковую область с формой,
					метаданными или журналом.
				</p>

				<div class="demo-actions">
					<button class="btn btn-secondary with-icon" type="button" onclick="demoDrawer()">
						<i class="ph ph-sidebar"></i>
						Open drawer
					</button>

					<button class="btn btn-primary with-icon" type="button" onclick="demoLeftDrawer()">
						<i class="ph ph-sidebar-simple"></i>
						Left drawer
					</button>
				</div>
			</div>

			<div class="drawer-preview-panel" aria-hidden="true">
				<h3 class="drawer-preview-title">Panel shape</h3>
				<p class="drawer-preview-text">Fixed edge, hard border, focused action footer.</p>
				<span class="chip chip-secondary">Context</span>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Drawer JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
<pre><code class="language-javascript">Drawer.create("details-drawer", {
  title: "Details",
  bodyHtml: `
    &lt;p class="text"&gt;Context content, forms, logs, metadata.&lt;/p&gt;
  `,
  actions: drawer =&gt; {
    const close = document.createElement("button");
    close.className = "btn btn-primary";
    close.textContent = "Close";
    close.addEventListener("click", () =&gt; drawer.close());
    return [close];
  }
}).show();</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Left Position</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
<pre><code class="language-javascript">Drawer.create("navigation-drawer", {
  title: "Navigation",
  position: "left",
  bodyText: "Left drawer content"
}).show();</code></pre>
	</div>
</section>

<script>
	document.addEventListener("DOMContentLoaded", () => {
		window.demoDrawer = function() {
			Drawer.create("demo-drawer", {
				title: "Details",
				bodyHtml: `
					<p class="text">Context panel for quick edits, metadata, and secondary flows.</p>

					<dl class="description-list description-list-compact">
						<div class="description-list-row">
							<dt>Status</dt>
							<dd><span class="chip chip-success">Active</span></dd>
						</div>
						<div class="description-list-row">
							<dt>Owner</dt>
							<dd>Design System</dd>
						</div>
						<div class="description-list-row">
							<dt>Updated</dt>
							<dd>Today</dd>
						</div>
					</dl>
				`,
				actions: drawer => {
					const cancel = document.createElement("button");
					cancel.className = "btn btn-primary";
					cancel.textContent = "Close";
					cancel.addEventListener("click", () => drawer.close());

					const apply = document.createElement("button");
					apply.className = "btn btn-success";
					apply.textContent = "Apply";
					apply.addEventListener("click", () => {
						drawer.close();
						Toasts.createSuccess("Saved", "Drawer action completed").show();
					});

					return [cancel, apply];
				}
			}).show();
		};

		window.demoLeftDrawer = function() {
			Drawer.create("demo-left-drawer", {
				title: "Navigation",
				position: "left",
				bodyHtml: `
					<ul class="list-menu">
						<li class="list-item"><button class="list-action" type="button"><span class="list-label">Overview</span></button></li>
						<li class="list-item"><button class="list-action" type="button"><span class="list-label">Activity</span></button></li>
						<li class="list-item"><button class="list-action" type="button"><span class="list-label">Settings</span></button></li>
					</ul>
				`
			}).show();
		};
	});
</script>