<section class="section" id="tables">
	<h2 class="section-title">Tables</h2>

	<div class="block">
		<h3 class="block-title">Basic table</h3>

		<table class="table">
			<caption class="table-caption">Devices list</caption>

			<thead class="table-head">
				<tr class="table-row">
					<th scope="col">Device</th>
					<th scope="col">Status</th>
					<th scope="col">IP</th>
					<th scope="col">Ping</th>
					<th scope="col">Actions</th>
				</tr>
			</thead>

			<tbody class="table-body">
				<tr class="table-row">
					<td>Kitchen Light</td>
					<td>
						<span class="badge badge-success">Online</span>
					</td>
					<td>
						<code class="code">192.168.1.21</code>
					</td>
					<td>12 ms</td>
					<td>
						<button class="btn btn-secondary btn-small" type="button">Open</button>
						<button class="btn btn-accent btn-small" type="button">Toggle</button>
					</td>
				</tr>

				<tr class="table-row">
					<td>Hall Sensor</td>
					<td>
						<span class="badge badge-warning">Degraded</span>
					</td>
					<td>
						<code class="code">192.168.1.34</code>
					</td>
					<td>88 ms</td>
					<td>
						<button class="btn btn-secondary btn-small" type="button">Open</button>
						<button class="btn btn-danger btn-small" type="button">Restart</button>
					</td>
				</tr>

				<tr class="table-row table-row-muted">
					<td>Garage Relay</td>
					<td>
						<span class="badge badge-error">Offline</span>
					</td>
					<td>
						<code class="code">—</code>
					</td>
					<td>—</td>
					<td>
						<button class="btn btn-secondary btn-small" type="button" disabled>Open</button>
						<button class="btn btn-accent btn-small" type="button" disabled>Toggle</button>
					</td>
				</tr>
			</tbody>

			<tfoot class="table-foot">
				<tr class="table-row">
					<td colspan="5">
						<span class="table-meta">Total: 3 devices</span>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
</section>