<!DOCTYPE html>
<html lang="en">
<head>
	<?php
		$config = require_once("config.php");
	?>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SHServ Web Client</title>
	<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
	<link rel="stylesheet" href="/assets/libs/highlight/styles/base16/summerfruit-dark.min.css">
	<link rel="stylesheet" href="/dist/css/main.css?t=<?= time() ?>">

	<script src="/assets/libs/highlight/highlight.min.js"></script>

	<script>
		const API_BASEURL = document.location.origin;
		<?php
			$raw = @file_get_contents("{$config['server']}/text-msgs");
			$decoded = $raw ? json_decode($raw, true) : null;
			$text_msgs = $decoded['data']['text_msgs'] ?? [];
		?>
		const TEXTMSGS = <?= json_encode($text_msgs, JSON_UNESCAPED_UNICODE) ?>;

		function tmsg(key) {
			return TEXTMSGS[key] ?? "";
		}

		function clientVersion() {
			return "<?= $config["version"] ?>";
		}
	</script>

	<link rel="icon" type="image/png" href="/assets/imgs/sh-icon.png">
	<meta name="theme-color" content="#0A0A0D">

</head>
<body class="app">
	<div class="hud">
		<div class="row">
			<h1 class="app-title contrast">SHServ Web Client</h1>
			<div class="hud-btns">
				<button class="btn-icon reload-screen">
					<i class="ph ph-arrow-clockwise"></i>
				</button>
				<button class="btn-icon nav-toggle state-off">
					<i class="ph ph-squares-four icon-state-off"></i>
					<i class="ph ph-x icon-state-on"></i>
				</button>
			</div>
		</div>

		<div class="navigation">
			<div class="container">
				<div class="nav-items">
					<!-- <a href="#!/" class="nav-link">
						<div class="nav-item">
							<div class="nav-icon">
								<i class="ph ph-house-line"></i>
							</div>
							<div class="nav-text">Dashboard</div>
						</div>
					</a> -->

					<a href="#!/areas/tree" data-route="/areas/tree" class="nav-link">
						<div class="nav-item">
							<div class="nav-icon">
								<i class="ph ph-map-trifold"></i>
							</div>
							<div class="nav-text">Areas</div>
						</div>
					</a>
					
					<a href="#!/scripts/scopes" data-route="/scripts/scopes" class="nav-link">
						<div class="nav-item">
							<div class="nav-icon">
								<i class="ph ph-brackets-curly"></i>
							</div>
							<div class="nav-text">Scripts</div>
						</div>
					</a>

					<a href="#!/devices" data-route="/devices" class="nav-link">
						<div class="nav-item">
							<div class="nav-icon">
								<i class="ph ph-cpu"></i>
							</div>
							<div class="nav-text">Devices</div>
						</div>
					</a>
				</div>
			</div>
		</div>	
	</div>

	<div class="screens"></div>

	<div class="load-screen">
		<div class="loader"></div>
	</div>

	<div class="error-screen">
		<div class="container">
			<div class="icon-container">
				<i class="ph ph-warning"></i>
			</div>
			<h3 class="error-title contrast bg-error">Error</h3>
			<div class="error-text">
				Описание ошибки, а может ещё и с ссылками какими-то
			</div>
			<div class="reload-btn">
				<button class="btn btn-primary btn-icon">
					<i class="ph ph-arrow-clockwise"></i>
					Reload
				</button>
			</div>
		</div>
	</div>

	<script src="/dist/js/main.js?t=<?= time() ?>"></script>
</body>
</html>