{% extends "base.html" %}

{% block title %}
	Admin Panel | Our World of Text
{% endblock %}

{% block endhead %}
	<script>
		function goto_config() {
			window.location.pathname = "/accounts/configure/" + worldname_config.value + "/";
			return false;
		}
		function goto_user() {
			window.location.pathname = "/administrator/user/" + username_config.value + "/";
			return false;
		}
		function goto_download() {
			window.location.pathname = "/accounts/download/" + worldname_download.value + "/";
			return false;
		}
		function goto_user_by_username() {
			window.location.pathname = "/administrator/users/by_username/" + user_info_by_username.value + "/";
			return false;
		}
		function goto_user_by_id() {
			window.location.pathname = "/administrator/users/by_id/" + user_info_by_id.value + "/";
			return false;
		}
		function goto_custom_rank_usr() {
			window.location.pathname = "/administrator/set_custom_rank/" + custom_rank_username_config.value + "/";
			return false;
		}

		var csrftoken = "{{csrftoken}}";

		function manageServerCommand(command, callback) {
			ajaxRequest({
				type: "POST",
				data: {
					manage_server: command,
					csrfmiddlewaretoken: csrftoken
				},
				url: "/administrator/",
				done: function(e) {
					if(callback) {
						callback(e);
					} else {
						alert("Command '" + command + "' has been sent to the server with the response '" + e + "'");
					}
				}
			});
		}

		onload = function() {
			autocomplete({
				element: document.getElementById("user_info_by_username"),
				url: "/accounts/member_autocomplete/",
				delay: 50
			});

			var mgr_restart = document.getElementById("mgr_restart");
			var mgr_close = document.getElementById("mgr_close");
			var mgr_maintenance = document.getElementById("mgr_maintenance");
			if(mgr_restart) {
				mgr_restart.onclick = function() {
					var conf = confirm("Are you sure you want to do this? (Restart)");
					if(!conf) return;
					manageServerCommand("restart");
				}
			}
			if(mgr_close) {
				mgr_close.onclick = function() {
					var conf = confirm("Are you sure you want to do this? (Close)");
					if(!conf) return;
					manageServerCommand("close");
				}
			}
			if(mgr_maintenance) {
				mgr_maintenance.onclick = function() {
					var conf = confirm("Are you sure you want to do this? (Maintenance)");
					if(!conf) return;
					manageServerCommand("maintenance");
				}
			}

			var action_staticreload = document.getElementById("action_staticreload");
			if(action_staticreload) {
				action_staticreload.onclick = function() {
					action_staticreload.disabled = true;
					manageServerCommand("staticreload", function() {
						action_staticreload.disabled = false;
					});
				}
			}
		}

		function ajaxRequest(settings) {
			var req = new XMLHttpRequest();

			var formData = "";
			var ampAppend = false;
			if(settings.data) {
				for(var i in settings.data) {
					if(ampAppend) formData += "&";
					ampAppend = true;
					formData += encodeURIComponent(i) + "=" + encodeURIComponent(settings.data[i]);
				}
			}
			// append form data to url if this is a GET
			if(settings.type == "GET" && formData) {
				settings.url += "?" + formData;
			}
			var async = !!settings.async;
			req.open(settings.type, settings.url, !async);
			req.onload = function() {
				if(req.status >= 200 && req.status < 400) {
					if(settings.done) {
						settings.done(req.responseText, req);
					}
				} else {
					if(settings.error) {
						settings.error(req);
					}
				}
			}
			req.onerror = function() {
				if(settings.error) {
					settings.error(req);
				}
			}
			if(settings.type == "POST") {
				if(formData) req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				req.send(formData);
			} else {
				req.send();
			}
		}
	</script>
	<link rel="stylesheet" type="text/css" href="/static/css/autocomplete.css">
	<style>
		.server_mgr {
			margin-top: 4px;
			width: 200px;
			height: 32px;
			text-align: left;
		}
		.server_mgr_txt {
			position: relative;
			left: 4px;
			top: -5px;
			font-size: 1.2em;
		}
		.page_link_opt {
			display: block;
		}
	</style>
{% endblock %}

{% block header %}
	<h1>Administrator Panel</h1>
{% endblock %}

{% block content %}
	<div class="content_set">
		<div class="content_set_title">Edit World Config</div>
		<div class="content_set_content">
			<form onsubmit="return goto_config();">
				World name: 
				<input type="text" name="worldname" id="worldname_config" value="">
				<input type="submit" value="Edit">
			</form>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Download a World</div>
		<div class="content_set_content">
			<form onsubmit="return goto_download();">
				World name: 
				<input type="text" name="worldname" id="worldname_download" value="">
				<input type="submit" value="Download">
			</form>
		</div>
	</div>

	{% if user.operator %}
	<div class="content_set">
		<div class="content_set_title">Edit Users</div>
		<div class="content_set_content">
			<form onsubmit="return goto_user();">
				User name: 
				<input type="text" name="username" id="username_config" value="">
				<input type="submit" value="Edit">
			</form>
		</div>
	</div>
	{% endif %}
	<div class="content_set">
		<div class="content_set_title">User Ranks</div>
		<div class="content_set_content">
			<ul>
				{% for user_rank in user_ranks %}
				<li>
					<span>{{ user_rank.username }}</span>
					
					{% if user_rank.level == 1%}
						(staff)
					{% endif %}
					{% if user_rank.level == 2%}
						(superuser)
					{% endif %}
					{% if user_rank.level == 3%}
						(operator)
					{% endif %}

					{% if user.operator %}
						<a href="/administrator/user/{{ user_rank.username }}/">configure</a>
					{% endif %}
				</li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="content_set">
		<div class="content_set_title">Set Custom Rank</div>
		<div class="content_set_content">
			<form onsubmit="return goto_custom_rank_usr();">
				User name: 
				<input type="text" name="username" id="custom_rank_username_config" value="">
				<input type="submit" value="Modify">
			</form>
		</div>
	</div>
	<div class="content_set">
		<div class="content_set_title">All Ranks</div>
		<div class="content_set_content">
			{% if user.operator %}
			<a href="/administrator/manage_ranks">Manage Ranks</a><br>
			{% endif %}
			<table style="table-layout: fixed; display: table-cell;">
				<tbody>
					{% for rank in custom_ranks %}
					<tr>
						<td style="font-weight: bold; width: auto;">
							{{rank.level}}:
						</td>
						<td>
							{{rank.name}}
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Set Announcement</div>
		<div class="content_set_content">
			{% if announcement_update_msg %}
				<span style="font-size:80%"><i>{{ announcement_update_msg }}</i></span>
			{% endif %}
			<form method="POST" action=".">
				<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}" />
				Text: 
				<input type="text" name="announcement" id="announcement" value="{{ announcement }}" style="width: 100%;">
				<input type="submit" value="Set">
			</form>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">View User Info</div>
		<div class="content_set_content">
			<form onsubmit="return goto_user_by_username();">
				User name: 
				<input type="text" name="username" id="user_info_by_username" value="">
				<input type="submit" value="Enter">
			</form>
			<form onsubmit="return goto_user_by_id();">
				User id: 
				<input type="text" name="username" id="user_info_by_id" value="">
				<input type="submit" value="Enter">
			</form>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Settings</div>
		<div class="content_set_content">
			{% if cons_update_msg %}
			<span style="font-size:80%"><i>{{ cons_update_msg }}</i></span>
			{% endif %}
			<form method="POST" action=".">
				<input type="hidden" name="settings_form" value="1">
				<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrftoken }}" />
				<div>
					Client version:
					<input type="text" name="set_cli_version" id="set_cli_version" value="{{ client_version }}" style="width: 100%;">
				</div>
				<div>
					Global chat enabled:
					<input type="checkbox" name="set_chat_global_enabled" id="set_chat_global_enabled"{%if global_chat_enabled%} checked{%endif%}>
				</div>
				<div>
					Global chat: prevent anonymous users:
					<input type="checkbox" name="set_chat_global_no_anon" id="set_chat_global_no_anon"{%if global_chat_no_anon%} checked{%endif%}>
				</div>
				<div>
					Required account age for chat (hours):
					<input type="number" name="set_chat_age_restriction" id="set_chat_age_restriction" value="{{ chat_age_restriction }}" min="0" style="width: 60px;">
				</div>
				<input type="submit" value="Set">
			</form>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Page Links</div>
		<div class="content_set_content">
			<a href="/administrator/backgrounds/" class="page_link_opt">Upload page backgrounds</a>
			<a href="/administrator/restrictions/" class="page_link_opt">Manage restrictions</a>
			{% if user.operator %}
			<a href="/administrator/user_list/" class="page_link_opt">User list</a>{% endif %}
			<a href="/administrator/shell/" class="page_link_opt">Execute shell script</a>
			<a href="/administrator/whitelist/" class="page_link_opt">Manage whitelist</a>
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Server Uptime</div>
		<div class="content_set_content">
			<span>{{ uptime }}</span>
			<br>
			<b>Machine Uptime: </b>{{ machine_uptime }}
		</div>
	</div>

	<div class="content_set">
		<div class="content_set_title">Actions</div>
		<div class="content_set_content">
			<button id="action_staticreload">Reload static shortcuts</button>
		</div>
	</div>

	{% if user.operator %}
	<div class="content_set">
		<div class="content_set_title">Manage Server</div>
		<div class="content_set_content">
			<button class="server_mgr" id="mgr_restart"><img src="/static/restart.svg" width="24px"><span class="server_mgr_txt">Restart</span></button>
			<br>
			<button class="server_mgr" id="mgr_close"><img src="/static/close.svg" width="24px"><span class="server_mgr_txt">Close</span></button>
			<br>
			<button class="server_mgr" id="mgr_maintenance"><img src="/static/maintenance.svg" width="24px"><span class="server_mgr_txt">Maintenance</span></button>
		</div>
	</div>
	{% endif %}

	<div class="content_set">
		<div class="content_set_title">Connected Clients</div>
		<div class="content_set_content">
			<span>{{ client_num }} client(s)</span>
		</div>
	</div>
{% endblock %}

{% block endbody %}
<script type="text/javascript" src="/static/autocomplete.js"></script>
{% endblock %}