<!doctype html>
<html>
	<head>
		<title>Tilde Friends</title>
		<link type="text/css" rel="stylesheet" href="/static/style.css" />
		<link type="text/css" rel="stylesheet" href="/static/w3.css" />
		<link type="image/png" rel="shortcut icon" href="/static/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script>
			function set_access_key_title(event) {
				if (!event.srcElement.title) {
					event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || '⌨️' + event.srcElement.accessKey).toUpperCase()}]`;
				}
			}
		</script>
	</head>
	<body
		style="
			display: flex;
			flex-flow: column;
			width: 100vw;
			height: 100vh;
			position: absolute;
			max-width: 100%;
			max-height: 100%;
		"
	>
		<tf-navigation></tf-navigation>
		<div id="content" class="hbox" style="flex: 1 0; overflow: auto">
			<div
				id="editPane"
				class="vbox"
				style="flex: 0 1 100%; display: none; overflow: auto"
			>
				<div class="navigation w3-bar" style="display: flex">
					<button
						class="w3-bar-item w3-button w3-blue"
						id="closeEditor"
						name="closeEditor"
						accesskey="c"
						onmouseover="set_access_key_title(event)"
						data-tip="Close the editor"
					>
						Close
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="save"
						name="save"
						accesskey="s"
						onmouseover="set_access_key_title(event)"
						data-tip="Save the app under the given path"
					>
						Save
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="icon"
						name="icon"
						accesskey="j"
						onmouseover="set_access_key_title(event)"
						data-tip="Set an icon/emoji for the app"
					>
						📦
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="export"
						name="export"
						accesskey="e"
						onmouseover="set_access_key_title(event)"
						data-tip="Export app to .zip file"
					>
						Export
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="import"
						name="import"
						accesskey="i"
						onmouseover="set_access_key_title(event)"
						data-tip="Import app from .zip file"
					>
						Import
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="pretty"
						name="pretty"
						accesskey="p"
						onmouseover="set_access_key_title(event)"
						data-tip="Clean up source formatting"
					>
						🧼
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="whitespace"
						name="whitespace"
						accesskey="w"
						onmouseover="set_access_key_title(event)"
						data-tip="Toggle visible whitespace"
					>
						✨
					</button>
					<input
						class="w3-bar-item w3-input w3-border w3-blue"
						type="text"
						id="name"
						name="name"
						style="flex: 1 1; min-width: 1em"
					/>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="delete"
						name="delete"
						accesskey="d"
						onmouseover="set_access_key_title(event)"
						data-tip="Delete the app"
					>
						Delete
					</button>
					<button
						class="w3-bar-item w3-button w3-blue"
						id="trace_button"
						accesskey="t"
						onmouseover="set_access_key_title(event)"
						data-tip="Open a performance trace for the server"
					>
						Trace
					</button>
				</div>
				<div class="hbox" style="flex: 1 1; overflow: auto">
					<div style="overflow: auto">
						<tf-files-pane style="overflow: auto"></tf-files-pane>
					</div>
					<div style="flex: 1 1; overflow: auto">
						<style id="editor_style"></style>
						<div id="editor" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</div>
			<div id="viewPane" class="vbox" style="flex: 0 1 100%; overflow: auto">
				<iframe
					id="document"
					sandbox="allow-forms allow-scripts allow-top-navigation allow-modals allow-popups allow-downloads"
					style="width: 100%; height: 100%; border: 0"
				></iframe>
			</div>
		</div>
		<script>
			window.litDisableBundleWarning = true;
		</script>
		<script src="/static/client.js" type="module"></script>
	</body>
</html>