<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
<style>
	body {
		margin: 0px;
		font-family: sans-serif;
	}
	.app {
		--main-bg-color: white;
		--main-fg-color: black;
		--main-link-color: unset;
		--odd-row-bg-color: #d8d8d8;
		--grey-color: #555;
		--dark-mode-transition: all 1s ease;
		
		background-color: var(--main-bg-color);
		color: var(--main-fg-color);
		padding: 8px;
		
		transition: var(--dark-mode-transition);
	}
	.fine {
		color: #444;
		font-size: 12px;
	}
	.light_switch {
		display: none;
	}
	.light_switch_label {
		cursor: pointer;
		padding: 8px;
		
		background-color: var(--main-fg-color);
		color: var(--main-bg-color);
	}
	.light_switch_label::before {
		content: "[ ] ";
	}
	.app a {
		color: var(--main-link-color);
		transition: var(--dark-mode-transition);
	}
	th {
		color: var(--main-fg-color);
		transition: var(--dark-mode-transition);
	}
	td {
		padding: 0;
	}
	td > * {
		padding: 10px;
		display: block;
	}
	.entry {
		text-decoration: none;
	}
	.grey {
		color: var(--grey-color);
		text-align: right;
		transition: var(--dark-mode-transition);
	}
	.entry_list {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 1em;
	}
	tbody tr:nth-child(odd) {
		background-color: var(--odd-row-bg-color);
		transition: var(--dark-mode-transition);
	}
	
	/* Dark mode colors */
	[type="checkbox"]:checked + .app {
		--main-bg-color: black;
		--main-fg-color: white;
		--main-link-color: white;
		--odd-row-bg-color: #333;
		--grey-color: #aaa;
	}
	[type="checkbox"]:checked + .app .light_switch_label::before {
		content: "[X] ";
	}
</style>
<title>{{path}} {{server_name}}</title>
</head>
<body>
<input type="checkbox" class="light_switch" id="light_switch">

<div class="app">
<p>{{server_name}}</p>

<p>{{path}}</p>

<table class="entry_list">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>

<tr>
<td><a class="entry" href="../">📁 ../</a></td>
<td></td>
</tr>

{{#each entries}}
<tr>
<td><a class="entry" href="./{{this.encoded_file_name}}{{this.trailing_slash}}">
{{this.icon}} {{this.file_name}}{{this.trailing_slash}}</a></td>
<td><span class="grey">{{this.size}}</span></td>
</tr>
{{/each}}

</tbody>
</table>

<!-- Doesn't work perfectly yet -->
<!--<label for="light_switch" class="light_switch_label">Dark mode</label>-->

</div>

<p class="fine">
Rendered by PTTH end server.
Copyright 2020-2021 "Trish" ReactorScram. Licensed under the 
<a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPLv3.</a>
<a href="https://six-five-six-four.com/git/reactor/ptth">Download source code</a>
</p>

</body>
</html>