{{define "list"}}
<fieldset><legend><input type="text" id="dir" value="{{meta .dir}}" onkeydown="return Change(event)"></legend>
	<table>
		<colgroup>{{range .append}}<col class="{{.}}">{{end}}</colgroup>

		<tr>
		{{$sort := meta .sort}}
		{{$reverse := meta .reverse}}
		{{range .append}}
			{{if eq $sort .}}
				<th class="{{.}} sort" onclick="list('{{.}}')">{{.}}</th>
			{{else if eq $reverse .}}
				<th class="{{.}} reverse" onclick="list('{{.}}')">{{.}}</th>
			{{else if eq . "path"}}
			{{else}}
				<th class="{{.}}" onclick="list('{{.}}')">{{.}}</th>
			{{end}}
		{{end}}
		</tr>

		{{if .append}}
		{{$meta := .}}
		{{$first := index .append 0}}
		{{range $i, $k := index . $first}}
		<tr>
			{{range $key := index $meta "append"}}
				{{if eq $key "name"}}
					{{$type := index $meta "type" $i}}
					<td class="{{$key}}">
						<a {{if eq $type "file"}} download="{{index $meta $key $i}}" {{end}}
							href="/upload?dir={{index $meta "path" $i}}"><code>{{index $meta $key $i}}</code></a>
					</td>
				{{else if eq $key "path"}}
				{{else}}
					<td class="{{$key}}">
						<code>{{index $meta $key $i}}</code>
					</td>
				{{end}}
			{{end}}
		</tr>
		{{end}}
		{{end}}
	</table>
</fieldset>
<style>
	.time {
		padding-right:20px;
	}
	.size {
		text-align:right;
		padding-right:20px;
	}
	.name {
		padding-left:10px;
		text-align:left;
	}
	.sort {
		color:red;
	}
	.reverse {
		color:green;
	}
</style>
<script>
	function Change(event) {
		if (event.keyCode == 13) {
			ctx.Search("dir", event.target.value);
		}
	}

	function list(what) {
		ctx.Cookie("list_order", ctx.Cookie("list_order")*1 + 1);
		ctx.Cookie("list", what);
		ctx.Refresh();
	}
</script>
{{end}}

{{define "git"}}
<fieldset><legend>branch</legend>
	<pre>{{index . "result"}}</pre>
</fieldset>
<fieldset><legend>status</legend>
	<pre>{{index . "result"}}</pre>
</fieldset>
{{end}}

{{define "tmux"}}
{{$meta := .}}
{{range $index, $value := index $meta "append"}}
<fieldset><legend>{{$value}}</legend>
	{{if eq $value "buffer"}}
		<button onclick="copy_tmux_buffer('copy')">copy</button>
		<button onclick="send_tmux_buffer('paste')">send</button>
		<textarea rows="5" cols="60" name="tmux_buffer">{{meta . "buffer" 0}}</textarea>
		<script>
			var buffer = document.getElementsByName("tmux_buffer")[0];
			function copy_tmux_buffer(action) {
				buffer.select();
				document.execCommand(action);
			}
			function send_tmux_buffer(action) {
				var xhr = new XMLHttpRequest();
				xhr.open("POST", "/paste?content="+encodeURIComponent(buffer.value));
				xhr.send()
			}
		</script>
	{{else}}
		<pre>{{meta $meta $value}}</pre>
	{{end}}
</fieldset>
{{end}}
{{end}}

{{define "upload"}}
<fieldset><legend>upload</legend>
	<form method="POST" action="/create?dir={{option . "dir"|meta|unscaped}}" enctype="multipart/form-data">
		<input type="file" name="file"><input type="submit">
	</form>
</fieldset>
{{end}}

{{define "create"}}
<fieldset><legend>create</legend>
	<form method="POST" action="/create?dir={{option . "dir"|meta|unscaped}}">
		<table>
			<tr><td>filename:</td><td><input type="text" name="filename" required><input type="submit"></td></tr>
			<tr><td>content:</td><td><textarea rows="5" cols="60" name="content"></textarea></td></tr>
		</table>
	</form>
</fieldset>
{{end}}

{{define "main"}}
{{$msg := .}}
{{$meta := .Meta}}
{{$sess := .Sessions}}
{{range .Meta.tmpl}}
	{{$tmpl := index $sess .}}

	{{if eq . "login"}}
		{{template "login" $meta}}
	{{else if eq . "userinfo"}}
		{{template "userinfo" $msg}}
	{{else if eq . "share"}}
		{{template "share" $sess.share}}
	{{else if eq . "list"}}
		{{template "list" $msg.Sessions.list.Meta}}
	{{else if eq . "tmux"}}
		{{template "tmux" $msg.Sessions.tmux.Meta}}
	{{else if eq . "git"}}
		{{if $msg.Sessions.git}}
			{{template "git" $msg.Sessions.git.Meta}}
		{{end}}
	{{else if eq . "upload"}}
		{{template "upload" $msg}}
	{{else if eq . "create"}}
		{{template "create" $msg}}
	{{else}}
	{{end}}
{{end}}
{{end}}