{% extends "base.html" %}

{% block head %}
<style>
.page-heading {
	font-size: var(--font-size-l);
	margin-bottom: 2rem;
}

.diffs-list {
	list-style-type: none;
	padding: 0;
}

.diff-table th, .diff-table td {
	padding: 0.5rem 0.75rem;
}

.diff-table th {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	font-weight: 500;
}

.diff-table tr:not(:last-of-type) {
	border-bottom: 1px solid var(--border-color);
}
</style>
{% endblock head %}

{% block body %}
<div class="container">
	<h1>Diffs for the article at <a href="{{ article_url }}">{{ article_url|truncate(50) }}</a></h1>
	<br>

	<div class="card">
		<table class="diff-table">
			{% for diff in diffs %}
			<tr>
				<th>{{ diff.diff_time }}</th>
				<td>{{ diff.diff_html|safe }}</td>
			</tr>
			{% endfor %}
		</table>
	</div>
</div>
{% endblock body %}