{% extends "guild_settings.html" %}

{% block pagetitle %}Badmins{% endblock %}

{% block scripts %}
		<script>
		// Invite user to mod
			function invite_mod_to_guild(boardid) {

				var inviteForm = document.getElementById("invite-form");

				var inviteError = document.getElementById("toast-error-message");

				var usernameField = document.getElementById("invite-username");

				var isValidUsername = usernameField.checkValidity();

				username = usernameField.value;

				if (isValidUsername) {

					var xhr = new XMLHttpRequest();
					xhr.open("post", "/mod/invite_mod/"+boardid);
					xhr.withCredentials=true;
					f=new FormData();
					f.append("username", username);
					f.append("formkey", formkey());
					xhr.onload=function(){
						if (xhr.status==204) {
							window.location.reload(true);
						}
						else {
							$('#toast-invite-error').toast('dispose');
							$('#toast-invite-error').toast('show');
							inviteError.textContent = JSON.parse(xhr.response)["error"];
						}
					}
					xhr.send(f)
				}

			}
			// Badmin Step Down Function
			step_downModal = function(mod) {
				document.getElementById("stepDownButton").onclick = function() {
					this.innerHTML='<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Stepping down';
					this.disabled = true;
					post('/mod/{{b.base36id}}/remove/' + mod,
						callback = function() {
							location.reload();
						}
						)
				}
			};
		</script>

		{% if b.has_invite(v) %}
		<script>
		// Badmin Invitation Modal
		$(window).on('load', function(){
			$('#gmInvitationModal').modal('show');
		});
	 </script>
	 {% endif %}

	 {% endblock %}

	 <!-- tabs container -->

	 {% block content %}
	 
	 <div class="row justify-content-around">

		<div class="col h-100">

			{% if request.args.get('error') or error %}
			<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
				<i class="fas fa-exclamation-circle my-auto"></i>
				<span>
					{{error if error else request.args.get('error')}}
				</span>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			{% endif %}

			{% if request.args.get('msg') or msg %}
			<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
				<i class="fas fa-check-circle my-auto" aria-hidden="true"></i>
				<span>
					{{msg if msg else request.args.get('msg')}}
				</span>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			{% endif %}

			<div class="row">

				<div class="col" style="padding:0">

					<div class="settings">

					 <div class="d-md-flex justify-content-between mb-3">

				<div>
				 <h1>Badmins</h1>
			 </div>

			 <div class="mt-auto">
				{% if me %}
				<a href="javascript:void(0)" class="btn btn-outline-primary mr-2" data-toggle="modal" data-target="#stepDownModal" onclick="step_downModal('{{v.username}}')">Resign</a>
				{% endif %}
				{% if me and me.perm_full %}
				<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" data-target="#badminInviteModal"><i class="fas fa-plus mr-2"></i>Add badmin</a>
				{% endif %}
			</div>

		</div>

		<div class="card mb-5">
			<table class="table table-hover rounded mb-0">
				<thead class="thead-dark">
					<tr>
						<th scope="col">User</th>
						<th scope="col">Badmin Since</th>
						<th scope="col"></th>
					</tr>
				</thead>
				<tbody class="text-muted">

					{% for mod in b.mods_list %}
					<tr style="font-size:12.5px">
						<td>
							<a href="{{mod.user.permalink}}">
								<img src="{{mod.user.profile_url}}" class="profile-pic-20 align-top mr-2">@{{mod.user.username}}</a>
							</td>
							<td>{{mod.created_date}}</td>

							<td>
								{% if me and me.id < mod.id %}
								<div class="dropdown float-right dropdown-actions">
									<a href="#" role="button" id="dropdownMoreLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="line-height: 0;">
										<i class="fas fa-ellipsis-h text-muted"></i>
									</a>
									<div class="dropdown-menu border-0 shadow dropdown-menu-right mt-2" aria-labelledby="dropdownMoreLink" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(21px, 18px, 0px);">
										<a class="dropdown-item" href="javascript:void(0)" onclick="post('/mod/{{b.base36id}}/remove/{{mod.user.username}}', callback=function(){window.location.reload(true)})"><i class="fas fa-trash-alt"></i>Remove badmin</a>
									</div>
								</div>
								{% endif %}


							</td>
						</tr>
						{% else %}
						<td>There are no badmins.</td>
						{% endfor %}

					</tbody>
				</table>
			</div>



			<h2 class="h5" name="guild_name">Pending</h2>

			<p class="text-small text-muted">These users have been invited to be badmins.</p>

			<div class="card mb-5">
				<table class="table table-hover rounded mb-0">
					<thead class="thead-dark">
						<tr>
							<th scope="col">User</th>
							<th scope="col">Invited On</th>
							<th scope="col"></th>
						</tr>
					</thead>
					<tbody class="text-muted">

						{% for m in b.mod_invites %}
						<tr>
							<td>
								<a href="{{m.user.permalink}}">
									<img src="{{m.user.profile_url}}" class="profile-pic-20 align-top mr-2">@{{m.user.username}}</a>
								</td>
								<td>{{m.created_date}}</td>
								<td>
									<div class="dropdown float-right dropdown-actions">
										<a href="#" role="button" id="dropdownMoreLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="line-height: 0;">
											<i class="fas fa-ellipsis-h text-muted"></i>
										</a>
										<div class="dropdown-menu border-0 shadow dropdown-menu-right mt-2" aria-labelledby="dropdownMoreLink" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(21px, 18px, 0px);">
											<a class="dropdown-item text-danger" href="javascript:void(0)" onclick="post('/mod/{{b.base36id}}/rescind/{{m.user.username}}', callback=function(){window.location.reload(true)})"><i class="fas fa-times text-danger fa-fw"></i>Cancel invite</a>
										</div>
									</div>
								</td>
							</tr>
							{% else %}
								<td>There are no badmin invitations.</td>
							{% endfor %}

						</tbody>
					</table>
				</div>


			</div>

		</div>

	</div>

</div>

</div>

</div>

<!-- Badmin Invite User Modal -->
<div class="modal fade" id="badminInviteModal" tabindex="-1" role="dialog" aria-labelledby="badminInviteModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<form action="/mod/invite_mod/{{b.base36id}}" id="invite-form" method="post" onsubmit="return false;">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Invite user to be badmin</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="far fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body">
					<p style="padding-left:15px"> Users invited will need to accept their invite. They will receive a notification shortly after you invite them.</p>
					<input type="hidden" name="formkey" value="{{v.formkey}}">
					<input type="text" name="username" placeholder="enter username" id="invite-username" class="form-control" maxlength=25 required>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="inviteUserButton" onclick="invite_mod_to_guild('{{b.base36id}}')">Invite user</button>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- Badmin Step Down Modal -->
<div class="modal fade" id="stepDownModal" tabindex="-1" role="dialog" aria-labelledby="stepDownModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Step down as badmin</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="modal-body">
				<p>If you step down as badmin, you will lose full permissions to moderate this guild. This action cannot be undone.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
				<button class="btn btn-danger" onclick="post('/mod/{{b.base36id}}/step_down', callback=function(){window.location.reload(true)})">Step down</button>
			</div>

		</div>
	</div>
</div>

<!-- Badmin Perms Edit Modal -->
<div class="modal fade" id="editPermsModal" tabindex="-1" role="dialog" aria-labelledby="stepDownModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<form action="/+{{b.name}}/mod/edit_perms" method="post">
			<div class="modal-header">
				<h5 class="modal-title">Edit badmin permissions on @<span id="permedit-user"></span></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="modal-body">
				<input name="formkey" type="hidden" value="{{v.formkey}}">
				<input id="edit-perm-username" name="username" type="hidden" value="">

				<div class="form-group">
					<label class="custom-control custom-checkbox" for="check-perm-full">
						<input type="checkbox" id="check-perm-full" class="custom-control-input perm-box" onchange="permfull()" data-perm="full" name="perm_full" value="full">
						<span class="custom-control-label">full</span>
					</label>
				</div>
				<div class="form-group">
					<label class="custom-control custom-checkbox" for="check-perm-access">
						<input type="checkbox" id="check-perm-access" class="custom-control-input perm-box" onchange="permother()" data-perm="access" name="perm_access" value="access">
						<span class="custom-control-label">access</span>
					</label>
				</div>
				<div class="form-group">
					<label class="custom-control custom-checkbox" for="check-perm-appearance">
						<input type="checkbox" id="check-perm-appearance" class="custom-control-input perm-box" onchange="permother()" data-perm="appearance" name="perm_appearance" value="appearance">
						<span class="custom-control-label">appearance</span>
					</label>
				</div>
				<div class="form-group">
					<label class="custom-control custom-checkbox" for="check-perm-config">
						<input type="checkbox" id="check-perm-config" class="custom-control-input perm-box" onchange="permother()" data-perm="config" name="perm_config" value="config">
						<span class="custom-control-label">config</span>
					</label>
				</div>
				<div class="form-group">
					<label class="custom-control custom-checkbox" for="check-perm-content">
						<input type="checkbox" id="check-perm-content" class="custom-control-input perm-box" onchange="permother()" data-perm="content" name="perm_content" value="content">
						<span class="custom-control-label">content</span>
					</label>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
				<input type="submit" class="btn btn-danger" value="Save Changes">
			</div>
			</form>
		</div>
	</div>
</div>

{% endblock %}

{% block errorToasts %}

<div class="toast error" id="toast-invite-error" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-autohide="true" data-delay="5000">
	<div class="toast-body text-center">
		<i class="fas fa-exclamation-circle text-danger mr-2"></i><span id="toast-error-message">Error. Please try again.</span>
	</div>
</div>

{% endblock %}

{% block invitationModal %}
{% if b.has_invite(v) %}
{% include "gm_invitation_modal.html" %}
{% endif %}
{% endblock %}