{% extends "default.html" %}
{% block pagetitle %}Ping Groups{% endblock %}
{% block content %}
	<div class="px-3">
		<h3 class="mt-3">Create Ping Group</h3>
		<form class="mt-3" action="/create_group" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHRReload(this)">
			<div class="container pb-0" style="background-color: transparent !important">
				<div class="row">
					<div class="col col-md-6 px-0 pt-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">
									<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 ml-3" style="float: right"><b>Cost</b>: {{cost}} coins or marseybux</p>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</form>

		<p id="group-warning" class="text-danger">
			Warning: ping groups can get usurped from their owners if they spend more than a month not reviewing membership applications.
		</p>

		<h3 class="mt-5 mb-3">Ping Groups</h3>
		<div class="overflow-x-auto">
			<table class="ping-groups">
				<thead>
					<tr>
						<th>#</th>
						<th>Name</th>
						<th class="members">Members</th>
						<th>Description</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 or group.name == 'verifiedrich' -%}
										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')">{% if group.name != 'verifiedrich' %}Apply to {% endif %}Join</button>
							{% endif %}
						</td>
						<td>
							{% if group.description_html %}
								{{group.description_html | safe}}
							{% endif %}
						</td>
						<td data-time="{{group.created_utc}}"></td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
{% endblock %}