{% extends "default.html" %}
{% block pagetitle %}/h/{{sub}} Mods{% endblock %}
{% block content %}

<script nonce="{{g.nonce}}">
	function removeMod(e) {
		sendFormXHR(e,
			() => {
				e.target.parentElement.parentElement.remove();
			}
		)
	}
</script>

<h5 class="mt-2">/h/{{sub}} Mods</h5>
<div class="overflow-x-auto mt-1"><table class="table table-striped mb-5">
<thead class="bg-primary text-white">
	<tr>
		<th>#</th>
		<th>Name</th>
		<th>Mod since</th>
		<th></th>
	</tr>
</thead>
{% for user, mod in users %}
	<tr>
		<td>{{loop.index}}</td>
		<td>{% include "user_in_table.html" %}</td>
		<td data-time="{{mod.created_utc}}"></td>
		<td>
			{% if v.id == user.id or v.mod_date(sub.name) and v.mod_date(sub.name) < mod.created_utc %}
				<form action="/h/{{sub}}/remove_mod" method="post" onsubmit="removeMod(event)">
					<input type="hidden" name="formkey" value="{{v|formkey}}">
					<input type="hidden" name="uid" value="{{user.id}}">
					<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" onclick="disable(this)" value="{% if v.id == user.id %}Resign{% else %}Remove Mod{% endif %}">
				</form>
			{% endif %}
		</td>
	</tr>
{% endfor %}

</table>

{% if v.mods(sub.name) %}
	<form action="/h/{{sub}}/add_mod" method="post">
		<input type="hidden" name="formkey" value="{{v|formkey}}">
		<input class="form-control" style="display:inline;width:250px" autocomplete="off" type="text" name="user" class="form-control" placeholder="Enter username..">
		<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" onclick="disable(this)" value="Add Mod" style="margin-bottom: 5px">
	</form>
{% endif %}

{% endblock %}