{{define "wiki_head"}}
{{end}}

{{define "wiki_menu"}}
{{end}}

{{define "wiki_list"}}
<script>
function jumpto(url) {
	if (url == "..") {
		var ps = locaiton.href.split();
	}
	location.href=url;
}
function keyup(event) {
	console.log(event);
	if (typeof window.control == "function") {
		control(event);
	}
	if (event.key == "z") {
		var input = document.getElementsByClassName("query_input")[0];
		if (!window.query_show) {
			window.query_show = true;
			var query = document.getElementsByClassName("query_menu")[0];
			var input = query.getElementsByTagName("input")[0];
			input.style.visibility = "visible";
			input.style.width = "80px";
			input.focus();
		}
	return true
	}
	return true
}
document.onkeyup = keyup;

</script>
<style>
.container {
	height:100%;
	min-width:300px;
}
.head {
	color:white;
	font-size:20px;
	font-weight:bold;
	background-color:#222;
	text-align:center;
	vertical-align:middle;
	padding:10px;
	width:100%;
	height:27px;
}
.title {
	font-style:italic;
}
.toggle_menu {
	cursor:pointer;
	float:left;
}
.query_menu {
	cursor:pointer;
	margin-right:20px;
	float:right;
}
.query_button {
	cursor:pointer;
	float:right;
	margin-left:10px;
}
.query_input {
	visibility:hidden;
	width:0px;
	position:absolute;
	right:40px;
	top:12px;
}
.list {
	width:15%;
	min-width:140px;
	float:left;
	max-height:1000px;
	overflow:scroll;
}
.list_item {
	padding-top:10px;
	padding-left:30px;
	min-height:30px;
	margin-left:-30px;
}
.list_item:hover, .list_item:active {
	background-color:green;
}
</style>
<div class="container">
<div class="head">
	<div class="toggle_menu" onclick="toggle()">三</div>
	<div class="query_menu">
		<input class="query_input" type="text" onkeyup="return query(event)">
		<div class="query_button" onclick="return query()"> Q</div>
	</div>
	<div class="title" onclick="return jumpto('/wiki/')">shylinux</div>
</div>
<div class="list">
	{{$msg := .}}
	{{$ncol := append . |len}}
	{{$nrow := append . 0|append .|len}}
	<ul>
	<li>
	<div class="list_item" onclick="return jumpto('/wiki/{{option $msg "parent"|meta}}')">返回上一层</div>
	</li>
	{{range $row, $val := append . 0|append .}}
		<li>
		<div class="list_item" onclick="return jumpto('/wiki/{{option $msg "dir"|meta}}/{{append $msg "name" $row}}')">
		{{append $msg "name" $row}}
		</div>
		</li>
	{{end}}
	</ul>
</div>
{{end}}

{{define "wiki_body"}}
<script>
function toggle() {
	window.list_hide = !window.list_hide;
	var list = document.getElementsByClassName("list")[0];
	var content = document.getElementsByClassName("content")[0];
	if (list_hide) {
		list.style.visibility = "hidden";
		list.style.width="0px";
		list.style.height="0px";
		list.style["min-width"]="0px";
		content.style.width="100%";
	} else {
		list.style.visibility = "visible";
		list.style.width="15%";
		list.style.height="100%";
		list.style["min-width"]="180px";
		content.style.width="85%";
	}
}
function query(event) {
	if (event) {
		if (event.code == "Enter") {
			jumpto("/wiki/?query="+encodeURIComponent(event.target.value));
		}
		console.log("what")
		return true
	}
	window.query_show = !window.query_show;
	var query = document.getElementsByClassName("query_menu")[0];
	var input = query.getElementsByTagName("input")[0];
	if (window.query_show) {
		input.style.visibility = "visible";
		input.style.width = "80px";

	} else {
		input.style.visibility = "hidden";
		input.style.width = "0px";
	}
}
var tags_list = {};
ctx.GET("/wiki/define.json", undefined, function(msg){
	tags_list = msg["define"];
})
function tags(event) {
	console.log(event);

    if (event.srcElement.tagName == "CODE") {
        var tag = document.getSelection().toString();
        console.log(tag);
        if (tag && tag.length > 0 && tags_list[tag]) {
			var position = tags_list[tag].position;
			if (position.length == 1) {
				jumpto("/wiki"+position[0].file+"#hash_"+position[0].line);
			} else {
				jumpto("/wiki/?query="+encodeURIComponent(tag));
			}
        }
    }
}
document.onmouseup = tags;
toggle();
</script>
<style>
.content {
	width:85%;
	height:100%;
	float:left;
	min-width:400px;
}
.toggle {
	background-color:green;
	width:2%;
	height:100%;
	float:left;
}
.text {
	width:96%;
	float:left;
	margin-left:2%;
}
.link {
	font-size:18px;
}
.number {
	float:left;
	position:relative;
	left:-6px;
	top:18px;
	text-align:right;
}
.number div {
	margin:0px;
	padding:0px;
	height:16px;
}
</style>
<div class="content">
	<div class="toggle" title="点击，显示或隐藏目录" onclick="toggle()"></div>
	<div class="text">
		<div class="number">
			{{range option . "nline"|meta|list}}
			<div id="hash_{{.}}" style="margin-top:-1px"><code>{{.}}</code></div>
			{{end}}
		</div>
		{{$msg := .}}
		{{if append . "name"}}
            {{$l := append . "name"|len}}
            {{if eq $l 1}}
                <script>
                    location.replace("/wiki/{{option $msg "dir"|meta|unscaped}}/{{append . "name"|meta|unscaped}}");
                </script>
            {{else}}
                <ul>
                {{range $i, $v := append . "name"}}
                <li class="link">
				<div>
					<code>{{option $msg "time" $i}}&nbsp;&nbsp;&nbsp;</code>
					<a href="/wiki/{{option $msg "dir"|meta}}/{{$v}}{{option $msg "pend" $i}}">{{$v}}{{option $msg "pend" $i}}</a>
				</div>
                </li>
                {{end}}
                <ul>
            {{end}}
		{{else}}
			<p>{{append . "body"|meta|unscaped}}</p>
			<p><pre><code>{{append . "code"|meta}}</code></pre><p>
		{{end}}
	</div>
</div>

</div>
{{end}}