{% 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="ping-groups table table-striped mb-5">
			<thead class="bg-primary text-white">
				<tr>
					<th>#</th>
					<th>Name</th>
					<th class="members">Members</th>
					<th>Created on</th>
				</tr>
			</thead>

			<tbody>
			{% for group in groups %}
				<tr>
					<td>{{loop.index}}</td>
					<td>{{group.name}}</td>
					<td class="unbreakable">
						<a href="/!{{group}}">{{group.member_ids | length}}</a>
						{% if v.id != group.owner.id %}
							<button id="leave-{{group}}" type="button" class="ml-3 ml-md-5 btn btn-primary {% if v.id not in group.membership_user_ids %}d-none{% endif %}" data-nonce="{{g.nonce}}" data-onclick="postToastSwitch(this,'/!{{group}}/leave','leave-{{group}}','apply-{{group}}','d-none')">
								{%- if v.id in group.member_ids -%}
									Leave
								{%- else -%}
									Cancel Application
								{%- endif -%}
							</button>
							
							<button id="apply-{{group}}" type="button" class="ml-3 ml-md-5 {% if v.id in group.membership_user_ids %}d-none{% endif %} btn btn-primary" data-nonce="{{g.nonce}}" data-onclick="postToastSwitch(this,'/!{{group}}/apply','leave-{{group}}','apply-{{group}}','d-none')">Apply to Join</button>
						{% endif %}
					</td>
					<td data-time="{{group.created_utc}}"></td>
				</tr>
			{% endfor %}
			</tbody>
		</table>
	</div>

	<h3 class="my-3">Create Ping Group</h3>
	<form class="mt-3" action="/create_group" method="post">
		<div class="container pb-0" style="background-color: transparent !important">
			<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" style="vertical-align: sub;">{{error}}</span>
								</p>
								{% endif %}
								<button type="submit" class="btn btn-primary ml-auto" {% if v.marseybux + v.coins < cost %}disabled{% endif %}>Create Group</button>
							</div>
							<p class="mt-2 mr-1" style="float: right"><b>Cost</b>: {{cost}} coins or marseybux</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

{% endblock %}