{% 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>

	<section class="mb-6" id="filters" hx-preserve>
		<label class="checkbox">
			<input type="checkbox" x-model="expandDiffs" x-bind:checked="expandDiffs" />
			<p>Expand diffs</p>
		</label>
	</section>

	<section 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>
				<p x-bind:class="{ hidden: expandDiffs }">{{ diff.diff_html|safe }}</p>
				<div x-bind:class="{ hidden: !expandDiffs }">
					<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>
			</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">
					<p x-bind:class="{ hidden: expandDiffs }">
						{{ diff.diff_html|safe }}
					</p>
					<table class="table-styled" x-bind:class="{ hidden: !expandDiffs }">
						<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>
	</section>
</div>
{% endblock body %}