{% extends "base.html" %}

{% block title %}
	Tabular Worlds | Our World of Text
{% endblock %}

{% block header %}
	<h1>Tabular Worlds</h1>
{% endblock %}

{% block endhead %}
	<style>
		#world_table {
			border: solid 1px #9ba7ff;
			border-bottom: none;
			background-color: #0004a0;
			border-spacing: 1px;
		}
		#world_table th {
			background-color: #323498;
			color: #ffffff;
			white-space: nowrap;
		}
		#world_table td {
			background-color: #a8bbf1;
			white-space: nowrap;
		}
		.table_sort_arrows {
			cursor: pointer;
		}
	</style>
{% endblock %}

{% block content %}
	<table id="world_table">
		<tbody id="worlds">
			<tr>
				<th>
					Name
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_name">
				</th>
				<th>
					Write state
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_write">
				</th>
				<th>
					Read state
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_read">
				</th>
				<th>
					Members
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_members">
				</th>
				<th>
					Views
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_views">
				</th>
				<th>
					Creation Date
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_created">
				</th>
				<th>
					Claim Date
					<img src="/static/sort_arrows.png" class="table_sort_arrows" id="sort_claimed">
				</th>
			</tr>
		</tbody>
	</table>
{% endblock %}

{% block endbody %}
<script>
	var worlds = document.getElementById("worlds");
	var rowNum = 0;
	var rows = {};
	var sortData = [];
	function addRow(name, write, read, members, views, created, claimed) {
		var row = document.createElement("tr");
		var col_name = document.createElement("td");
		var col_write = document.createElement("td");
		var col_read = document.createElement("td");
		var col_members = document.createElement("td");
		var col_views = document.createElement("td");
		var col_created = document.createElement("td");
		var col_claimed = document.createElement("td");
		col_name.innerText = name;
		col_write.innerText = write;
		col_read.innerText = read;
		col_members.innerText = members;
		col_views.innerText = views;
		col_created.innerText = format_date(created);
		col_claimed.innerText = format_date(claimed);
		col_name.className = "table_worldname";
		row.id = "row_num_" + rowNum;
		rows[rowNum] = {
			row: row,
			name: name,
			write: write,
			read: read,
			members: members,
			views: views,
			created: created,
			claimed: claimed
		};
		sortData.push(rows[rowNum]);
		rowNum++;
		row.appendChild(col_name);
		row.appendChild(col_write);
		row.appendChild(col_read);
		row.appendChild(col_members);
		row.appendChild(col_views);
		row.appendChild(col_created);
		row.appendChild(col_claimed);
		worlds.appendChild(row);
	}

	var sortDir = {
		name: 1,
		write: 0,
		read: 0,
		members: 0,
		views: 0,
		created: 0,
		claimed: 0
	};

	function doSort(mode) {
		for(var i in rows) {
			var row = rows[i];
			row.row.remove();
		}
		var dir = sortDir[mode];
		sortDir[mode] = 1 - sortDir[mode];
		if(mode == "name") {
			sortData.sort(function(a, b) {
				var cmp = a.name.localeCompare(b.name, "en", {
					sensitivity: "base"
				});
				if(dir) {
					cmp = -cmp;
				}
				return cmp;
			});
		} else {
			sortData.sort(function(a, b) {
				if(dir) {
					return b[mode] - a[mode];
				} else {
					return a[mode] - b[mode];
				}
			});
		}
		for(var i = 0; i < sortData.length; i++) {
			var row = sortData[i];
			worlds.appendChild(row.row);
		}
	}

	var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	function format_date(time) {
		if(time == 0) return "N/A";
		var date = new Date(time);
		var offsetStr = date.getTimezoneOffset() / 60;
		if(offsetStr < 0) {
			offsetStr = "-" + -offsetStr;
		} else if(offsetStr > 0) {
			offsetStr = "+" + offsetStr;
		} else {
			offsetStr = "";
		}
		var str = "(GMT" + offsetStr + ") ";

		var month = date.getMonth();
		str += months[month] + " ";
		
		var day = date.getDate();
		str += day + ", ";
		
		var year = date.getFullYear();
		str += year + " ";
		
		var hour = date.getHours();
		var ampm = " AM";
		if(hour >= 12) {
			ampm = " PM";
		}
		if(hour > 12) {
			hour = hour - 12;
		}
		if(hour === 0) {
			hour = 12;
		}
		str += hour;
		
		var minute = date.getMinutes();
		minute = ("0" + minute).slice(-2);
		str += ":" + minute;
		
		var second = date.getSeconds();
		second = ("0" + second).slice(-2);
		str += ":" + second + ampm;
		
		return str;
	}

	sort_name.onclick = function() {
		doSort("name");
	}

	sort_write.onclick = function() {
		doSort("write");
	}

	sort_read.onclick = function() {
		doSort("read");
	}

	sort_members.onclick = function() {
		doSort("members");
	}

	sort_views.onclick = function() {
		doSort("views");
	}

	sort_created.onclick = function() {
		doSort("created");
	}

	sort_claimed.onclick = function() {
		doSort("claimed");
	}

	{% for world in worlds_owned %}addRow("{{world.name}}", {{world.writability}}, {{world.readability}}, {{world.members}}, {{world.views}}, {{world.created}}, {{world.claimed}});
	{% endfor %}
</script>
{% endblock %}