<!-- =========================
		 LISTS
========================= -->
<section class="section docs-section" id="lists">
	<h2 class="section-title">Lists</h2>
	<p class="docs-section-description">
		Списки покрывают обычные перечни, навигацию, definition list и строки с действиями.
		Для интерактивных пунктов используй `.list-nav`, `.list-action`, `.list-label` и `.list-meta`.
	</p>

	<!-- Basic unordered list -->
	<div class="block">
		<h3 class="block-title">Unordered list</h3>

		<ul class="list">
			<li class="list-item">Dashboard</li>
			<li class="list-item">Projects</li>
			<li class="list-item">Reports</li>
			<li class="list-item">Automations</li>
			<li class="list-item">Settings</li>
		</ul>
	</div>

	<!-- Ordered list -->
	<div class="block">
		<h3 class="block-title">Ordered list</h3>

		<ol class="list list-ordered">
			<li class="list-item">Create workspace</li>
			<li class="list-item">Invite team</li>
			<li class="list-item">Configure permissions</li>
			<li class="list-item">Verify status</li>
		</ol>
	</div>

	<!-- List with icons / markers -->
	<div class="block">
		<h3 class="block-title">List with icons</h3>

		<ul class="list with-icons">
			<li class="list-item">
				<i class="ph ph-bathtub"></i>
				Bathroom
			</li>
			<li class="list-item">
				<i class="ph ph-toilet"></i>
				Toilet
			</li>
			<li class="list-item">
				<i class="ph ph-planet"></i>
				Workspace
			</li>
		</ul>
	</div>

	<!-- Definition list -->
	<div class="block">
		<h3 class="block-title">Definition list</h3>

		<dl class="list list-definition">
			<div class="list-row">
				<dt class="list-term">Item</dt>
				<dd class="list-desc">Базовая сущность интерфейса</dd>
			</div>

			<div class="list-row">
				<dt class="list-term">Group</dt>
				<dd class="list-desc">Логическая группа элементов</dd>
			</div>

			<div class="list-row">
				<dt class="list-term">Flow</dt>
				<dd class="list-desc">Набор действий, выполняемых последовательно</dd>
			</div>
		</dl>
	</div>

	<!-- Interactive / navigation list -->
	<div class="block">
		<h3 class="block-title">Navigation / interactive list</h3>

		<ul class="list list-nav">
			<li class="list-item list-item-active">
				<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"><i class="ph ph-stack"></i> Projects</span>
					<span class="list-meta">12</span>
				</button>
			</li>

			<li class="list-item">
				<button class="list-action" type="button">
					<span class="list-label">Logs</span>
				</button>
			</li>

			<li class="list-item list-item-disabled">
				<button class="list-action" type="button" disabled>
					<span class="list-label">Advanced</span>
				</button>
			</li>
		</ul>
	</div>

	<!-- List with actions -->
	<div class="block">
		<h3 class="block-title">List with actions</h3>

		<ul class="list list-actions">
			<li class="list-item">
				<div class="list-content">
					<div class="list-title">Release Plan</div>
					<div class="list-subtitle">
						<span class="text-color-success">•</span>
						192.168.2.21
					</div>
				</div>
				<div class="list-controls">
					<button class="btn btn-small btn-secondary" type="button">Open</button>
					<button class="btn btn-small btn-accent" type="button">Toggle</button>
				</div>
			</li>

			<li class="list-item">
				<div class="list-content">
					<div class="list-title">Analytics Sync</div>
					<div class="list-subtitle">
						<span class="text-color-success">•</span>
						192.168.2.34
					</div>
				</div>
				<div class="list-controls">
					<button class="btn btn-small btn-secondary" type="button">Open</button>
					<button class="btn btn-small btn-danger with-icon" type="button">
						<i class="ph ph-arrow-clockwise"></i>
						Restart
					</button>
				</div>
			</li>

			<li class="list-item list-item-muted">
				<div class="list-content">
					<div class="list-title">Archive Job</div>
					<div class="list-subtitle">
						<span class="text-color-warning">•</span> Offline
					</div>
				</div>
				<div class="list-controls">
					<button class="btn btn-small btn-secondary" type="button" disabled>Open</button>
					<button class="btn btn-small btn-accent" type="button" disabled>Toggle</button>
				</div>
			</li>
		</ul>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Navigation List HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;ul class="list list-nav"&gt;
  &lt;li class="list-item list-item-active"&gt;
    &lt;button class="list-action" type="button"&gt;
      &lt;span class="list-label"&gt;
        &lt;i class="ph ph-lightbulb"&gt;&lt;/i&gt;
        Projects
      &lt;/span&gt;
      &lt;span class="list-meta"&gt;12&lt;/span&gt;
    &lt;/button&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
	</div>
</section>