<!DOCTYPE html>
<html>
	<head>
		<title>Tilde Friends</title>
		<link type="text/css" rel="stylesheet" href="/static/style.css">
		<link type="image/png" rel="shortcut icon" href="/static/favicon.png">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body style="display: flex; flex-flow: column">
		<div class="navigation">
			<span>๐Ÿ˜Ž</span>
			<a accesskey="h" data-tip="Open home app." href="/" style="color: #fff">Tilde Friends</a>
			<a accesskey="a" data-tip="Open apps list." href="/~core/apps/">apps</a>
			<a accesskey="e" data-tip="Toggle the app editor." href="#" onclick="event.preventDefault(); toggleEdit()">edit</a>
			<a accesskey="p" data-tip="View and change permissions." href="#" onclick="showPermissions()">๐ŸŽ›๏ธ</a>
			<span id="status"></span>
			<span id="requests"></span>
			<span id="permissions_settings"></span>
			<span id="permissions"></span>
			<span id="login"></span>
		</div>
		<div id="content" class="hbox" style="flex: 1 1; width: 100%">
			<div id="statsPane" class="vbox" style="display: none; flex 1 1">
				<div class="hbox">
					<input type="button" id="closeStats" name="closeStats" value="Close" onclick="closeStats()">
				</div>
				<div id="graphs" class="vbox" style="height: 100%"></div>
			</div>
			<div id="editPane" class="vbox" style="display: none">
				<div class="navigation hbox">
					<input type="button" id="closeEditor" name="closeEditor" value="Close" onclick="closeEditor()">
					<input type="button" id="save" name="save" value="Save" onclick="save()">
					<input type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
					<input type="button" id="push_to_parent" value="Push to Parent" onclick="pushToParent()">
					<input type="button" id="pull_from_parent" value="Pull from Parent" onclick="pullFromParent()">
					<input type="button" id="revert" name="revert" value="Revert" onclick="revert()">
					<input type="button" id="delete" name="delete" value="Delete" onclick="deleteApp()">
					<input type="button" onclick="event.preventDefault(); trace()" value="Trace">
					<input type="button" onclick="event.preventDefault(); toggleStats()" value="Stats">
				</div>
				<div class="hbox" style="height: 100%">
					<div id="filesPane">
						<div class="hbox">
							<span id="files_header">Files</span>
							<span id="files_hide" onclick="hideFiles()">ยซ</span>
							<span id="files_show" onclick="showFiles()">ยป</span>
						</div>
						<div id="files_content">
							<ul id="files"></ul>
							<br>
							<div><button onclick="newFile()">New File</button></div>
							<div><button onclick="removeFile()">Remove File</button></div>
						</div>
					</div>
					<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
						<div style="flex: 1 1 50%; position: relative">
							<textarea id="editor" class="main"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div id="viewPane" class="vbox" style="flex: 1 0; overflow: auto">
				<iframe id="document" sandbox="allow-forms allow-scripts allow-top-navigation allow-modals" allow="serial" style="width: 100%; height: 100%; border: 0"></iframe>
			</div>
		</div>
		<script src="/split/split.min.js"></script>
		<script src="/smoothie/smoothie.js"></script>
		<script src="/static/client.js"></script>
	</body>
</html>