<!-- =========================
		 LISTS
========================= -->
<section class="section" id="lists">
	<h2 class="section-title">Lists</h2>

	<!-- 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">Devices</li>
			<li class="list-item">Scenes</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">Connect device to Wi-Fi</li>
			<li class="list-item">Register device on server</li>
			<li class="list-item">Assign device to area</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">Device</dt>
				<dd class="list-desc">Физическое устройство в системе</dd>
			</div>

			<div class="list-row">
				<dt class="list-term">Area</dt>
				<dd class="list-desc">Логическая зона размещения устройств</dd>
			</div>

			<div class="list-row">
				<dt class="list-term">Scene</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-lightbulb"></i> Devices</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">Kitchen Light</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">Hall Sensor</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">Garage Relay</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>
</section>