{% extends "base.html" %}

{% block body %}
<div class="container my-6">
	<h1 class="text-lg mb-6">
		Diffs for the article at
		<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
	</h1>

	<div class="card">
		<ul class="md:hidden list-none p-0">
			{% for diff in diffs %}
			<div class="px-4 py-3 border-b">
				<p class="text-caption mb-2">{{ diff.diff_time }}</p>
				<div class="mb-2">
					<p class="text-caption mb-2">Before</p>
					<p class="diff-before">{{ diff.diff_html|safe }}</p>
				</div>
				<div>
					<p class="text-caption mb-2">After</p>
					<p class="diff-after">{{ diff.diff_html|safe }}</p>
				</div>
			</div>
			{% endfor %}
		</ul>

		<table class="hidden md:display-table table-styled">
			{% for diff in diffs %}
			<tr>
				<th class="text-caption">{{ diff.diff_time }}</th>
				<td class="p-0 w-full">
					<table class="table-styled">
						<tr>
							<th class="text-caption">Before</th>
							<td class="diff-before w-full">{{ diff.diff_html|safe }}</td>
						</tr>
						<tr>
							<th class="text-caption">After</th>
							<td class="diff-after w-full">{{ diff.diff_html|safe }}</td>
						</tr>
					</table>
				</td>
			</tr>
			{% endfor %}
		</table>
	</div>
</div>
{% endblock body %}