{% extends "CHRISTMAS/default.html" %}

{% block title %}
<title>Banned Domains</title>
{% endblock %}

{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700 sub-header"></div>
	<div class="relative col-span-full flex items-center">
		<div>
			<h1 class="font-bold text-xl font-heading leading-normal mb-0">
				Banned Domains
			</h1>
			<ul class="flex space-x-2 text-xs text-gray-500 dark:text-gray-400 leading-normal mb-0">
				<li>
					<a href="/admin" class="text-gray-500 hover:underline">Admin Dashboard</a>
				</li>
				<li>
					<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
				</li>
				<li>
					<a href="#" class="text-gray-700 dark:text-gray-500 hover:underline">Banned Domains</a>
				</li>
			</ul>
		</div>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="col-span-full my-4 px-2.5 md:px-0">

	<form action="/admin/banned_domains" method="post" class="p-5 flex flex-col rounded-md bg-gray-300 dark:bg-gray-700 shadow-inset-t-white-10 border border-gray-400 dark:border-gray-900">
		<label class="label">
			Manage a domain
		</label>
		<input type="hidden" name="formkey" value="{{v.formkey}}">
		<div class="w-full flex space-x-2 items-center">
			<input name="domain" placeholder="Enter domain here.." class="form-input" required>
			<input name="reason" placeholder="Enter ban reason here..." oninput="document.getElementById('ban-submit').disabled=false" class="form-input" required>
			<input id="ban-submit" type="submit" class="btn btn-red" value="Toggle ban" disabled>
		</div>
	</form>

	{% if banned_domains %}
	<table class="w-full table mt-6">
		<thead class="bg-primary text-white">
			<tr>
				<th scope="col" class="p-2.5">Domain</th>
				<th scope="col" class="p-2.5">Ban reason</th>
			</tr>
		</thead>
		<tbody>
			{% for domain in banned_domains %}
			<tr class="h-16 odd:bg-gray-300 dark:odd:bg-white/[.05] hover:bg-gray-400 dark:hover:bg-white/10">
				<td class="px-2.5 font-bold">
					{{domain.domain}}
				</td>
				<td class="px-2.5">{{domain.reason}}</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	{% else %}
	<div class="flex flex-col items-center justify-center py-24 md:py-48">
		<img loading="lazy" src="https://c.tenor.com/NhDy-AkelhQAAAAM/marsey-drama.gif" class="w-20 h-20 mb-4 rounded-md object-cover">
		<h2 class="text-xl font-bold leading-normal font-heading">No banned domains</h2>
		<p class="text-gray-500 text-sm">
			When a domain is banned, it will show up here.
		</p>
		<a href="/admin" class="mt-3 btn btn-gray">
			Go to admin dashboard
		</a>
	</div>
	{% endif %}
</div>
{% endblock %}