{% extends "base.html" %}

{% block title %}
	Manage Ranks | Our World of Text
{% endblock %}

{% block header %}
	<h1>Manage Ranks</h1>
	<span><a href="/administrator/">« Back to Admin Panel</a></span>
	<style>
		.move_arrow {
			cursor: pointer;
			margin-left: 3px;
		}
	</style>
{% endblock %}

{% block content %}
	<div class="content_set">
		<div class="content_set_title">Ranks</div>
		<div class="content_set_content">
			<table>
				<tbody id="ranks">
					<tr>
						<th>
							ID
						</th>
						<th>
							Level
						</th>
						<th></th>
						<th>
							Name
						</th>
						<th>
							Chat Color
						</th>
					</tr>
					{% for rank in misc_ranks %}
						<tr id="rank_row_{{rank.id}}">
							<td>
								{{rank.id}}
							</td>
							<td style="text-align: right;">
								<span id="level_label_{{rank.id}}">{{rank.level}}</span>
							</td>
							<td>
								<img src="/static/up_arrow.png" class="move_arrow" onclick="moveUp({{rank.id}});" ondragstart="return false;">
								<img src="/static/down_arrow.png" class="move_arrow" onclick="moveDown({{rank.id}});" ondragstart="return false;">
							</td>
							<td>
								<input value="{{rank.name}}" id="rank_name_{{rank.id}}">
							</td>
							<td>
								<input value="{{rank.chat_color}}" id="rank_cc_{{rank.id}}">
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
			<button onclick="updVal();">Update</button>
			<br>
			<span style="display: none;" id="rank_upd_status"></span>
		</div>
	</div>
	<div class="content_set">
			<div class="content_set_title">Add Rank</div>
			<div class="content_set_content">
				<table style="table-layout: fixed; display: table-cell;">
					<tbody>
						<tr>
							<td style="width: auto;">
								<span>Name: </span>
							</td>
							<td>
								<input id="new_rank_name">
							</td>
						</tr>
						<tr>
							<td style="width: auto;">
								<span>Chat Color: </span>
							</td>
							<td>
								<input id="new_rank_cc">
							</td>
						</tr>
					</tbody>
				</table>
				<button onclick="rankAdd();">Add Rank</button>
				<br>
				<span style="display: none;" id="rank_add_status"></span>
			</div>
		</div>
	<script>
		var ordering = {{rank_order}};
	</script>
	<script>
		var csrftoken = "{{csrftoken}}";

		function moveUp(rankId) {
			var rankPos = ordering.indexOf(rankId);
			if(rankPos <= 0) return;
			var resA = ordering[rankPos];
			var resB = ordering[rankPos - 1];
			ordering[rankPos] = resB;
			ordering[rankPos - 1] = resA;
			changeOrder(ordering);
		}
		function moveDown(rankId) {
			var rankPos = ordering.indexOf(rankId);
			if(rankPos == -1 || rankPos == ordering.length - 1) return;
			var resA = ordering[rankPos];
			var resB = ordering[rankPos + 1];
			ordering[rankPos] = resB;
			ordering[rankPos + 1] = resA;
			changeOrder(ordering);
		}
		var isUpdating = false;
		var isAdding = false;
		function updVal() {
			if(isUpdating) return;
			isUpdating = true;
			rank_upd_status.style.display = "";
			rank_upd_status.style.color = "";
			rank_upd_status.innerText = "Updating ranks...";

			var ranks = {};
			for(var i = 0; i < ordering.length; i++) {
				var id = ordering[i];
				var name = document.getElementById("rank_name_" + id).value;
				var cc = document.getElementById("rank_cc_" + id).value;
				ranks[id] = {
					name: name,
					cc: cc
				}
			}
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/administrator/manage_ranks/", true);
			xhr.setRequestHeader("X-CSRF-Token", csrftoken);
			xhr.onload = function(res) {
				isUpdating = false;
				var stat = xhr.responseText;
				rank_upd_status.style.color = "red";
				if(stat == "PARAM") {
					rank_upd_status.innerText = "Invalid parameters.";
				} else if(stat == "ORDER_RACE") {
					rank_upd_status.innerText = "Ranks were added or deleted while modifying the ranks. Please try again.";
				} else if(stat == "ACTION") {
					rank_upd_status.innerText = "Invalid action type.";
				} else {
					rank_upd_status.style.color = "";
					rank_upd_status.innerText = "Updated ranks successfully.";
				}
			}
			xhr.send("action=update&order=" + encodeURIComponent(JSON.stringify(ordering)) + "&ranks=" + encodeURIComponent(JSON.stringify(ranks)));
		}
		function changeOrder(order) {
			var elms = {};
			for(var i = 0; i < order.length; i++) {
				elms[order[i]] = document.getElementById("rank_row_" + order[i]);
				var id = order[i];
				document.getElementById("level_label_" + id).innerText = i + 4;
			}
			for(var i in elms) {
				ranks.removeChild(elms[i]);
			}
			for(var i = 0; i < order.length; i++) {
				ranks.appendChild(elms[order[i]]);
			}
		}
		function rankAdd() {
			if(isAdding) return;
			isAdding = true;
			var newName = new_rank_name.value;
			var newCC = new_rank_cc.value;
			if(!newName) {
				isAdding = false;
				return;
			}
			rank_add_status.style.display = "";
			rank_add_status.style.color = "";
			rank_add_status.innerText = "Adding rank...";

			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/administrator/manage_ranks/", true);
			xhr.setRequestHeader("X-CSRF-Token", csrftoken);
			xhr.onload = function(res) {
				isAdding = false;
				var stat = xhr.responseText;
				new_rank_name.value = "";
				new_rank_cc.value = "";
				rank_add_status.style.color = "red";
				if(stat == "CRITICAL") {
					rank_add_status.innerText = "An internal server error occurred while trying to add this rank.";
				} else if(stat == "ACTION") {
					rank_add_status.innerText = "Invalid action type.";
				} else {
					rank_add_status.style.color = "";
					rank_add_status.innerText = "Added rank successfully.";
				}
			}
			xhr.send("action=add&name=" + encodeURIComponent(newName) + "&cc=" + encodeURIComponent(newCC));
		}
	</script>
{% endblock %}