{% extends "default.html" %}
{% block pagetitle %}Ping Groups{% endblock %}
{% block content %}
{% if error %}{{macros.alert(error, true)}}{% endif %}
{% if msg %}{{macros.alert(msg, false)}}{% endif %}
<div class="px-3">
	<h3 class="my-3">Ping Groups</h3>
	<div class="overflow-x-auto">
		<table class="table table-striped mb-5">
			<thead class="bg-primary text-white">
				<tr>
					<th>#</th>
					<th>Name</th>
					<th>Members</th>
					<th>Created on</th>
					<th></th>
				</tr>
			</thead>

			{% for group in groups %}
				<tr>
					<td>{{loop.index}}</td>
					<td>{{group.name}}</td>
					<td>
						{% for user in group.members %}
							<span class="mr-2">
								{% include "user_in_table.html" %}
							</span>
						{% endfor %}
					</td>
					<td data-time="{{group.created_utc}}"></td>
					<td>
						{% if v.id in group.applied_ids %}
							<a class="btn btn-primary" href="/!{{group.name}}/applications">Application pending</a>
						{% elif v.id not in group.member_ids %}
							<form action="/!{{group}}/join" method="post" data-nonce="{{g.nonce}}">
								<input hidden name="formkey" value="{{v|formkey}}">
								<input autocomplete="off" class="btn btn-primary ml-auto" type="submit" data-nonce="{{g.nonce}}" data-onclick="disable(this)" value="Apply to Join">
							</form>
						{% else %}
							<a class="btn btn-primary" href="/!{{group.name}}/applications">Applications</a>
						{% endif %}
					</td>
				</tr>
			{% endfor %}
		</table>
	</div>

	<h3 class="mt-5 mb-3">Create Ping Group</h3>
	<form class="mt-3" action="/create_group" method="post">
		<div class="container">
			<div class="row mb-4 pb-6">
				<div class="col col-md-6 px-0 py-3 py-md-0">
					<div class="body">
						<input hidden name="formkey" value="{{v|formkey}}">
						<label for="title">Group Name</label>
						<input minlength="3" maxlength="25" pattern='[a-zA-Z0-9_\-]*' class="form-control" type="text" name="name" required>
						<small class="form-text text-muted">3-25 characters, including letters, numbers, _ , and -</small>
						<div class="footer">
							<div class="d-flex">
								{% if error %}
								<p class="mb-0">
									<span class="text-danger text-small" style="vertical-align: sub;">{{error}}</span>
								</p>
								{% endif %}
								<button type="submit" class="btn btn-primary ml-auto" {% if v.coins < cost %}disabled{% endif %}>Create Group</button>
							</div>
							<p class="mt-2 mr-1" style="float: right"><b>Cost</b>: {{cost}} coins</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}