<div class="card">
	<div class="card-header">
		<h3 class="card-title">Most Visited Pages</h3>
	</div>
	<div class="card-table table-responsive">
		<table class="table table-vcenter">

			<thead>
			<tr>
				<th>Page name</th>
				<th>Visitors</th>
				<th>Unique</th>
				<th colspan="2">Bounce rate</th>
			</tr>
			</thead>

			{% for page in site.data.pages limit: 6 %}
			{% assign data = page.data | join: ',' %}
			{% assign id = "bounce-rate-" | append: forloop.index %}
			<tr>
				<td>
					{{ page.uri }}
					<a href="#" class="ms-1" aria-label="Open website">{% include ui/icon.html icon="link" %}</a>
				</td>
				<td class="text-muted">{{ page.visitors | format_number }}</td>
				<td class="text-muted">{{ page.unique | format_number }}</td>
				<td class="text-muted">{{ page.bounce }}</td>
				<td class="text-end w-1">
					{% include ui/chart-sparkline.html type="line" data=data id=id small=true color="primary" %}
				</td>
			</tr>
			{% endfor %}

		</table>
	</div>
</div>