{#
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2012 David Menting <david@nut-bolt.nl>
 Copyright 2008-2022 Jo-Philipp Wich <jo@mein.io>
 Licensed to the public under the Apache License 2.0.
-#}

{%
	import { getuid, getspnam } from 'luci.core';

	const boardinfo = ubus.call('system', 'board');
	const darkpref = 'false';
	let themepref = null;
	switch (theme) {
		case 'material3-blue': themepref = 'blue'; break;
		case 'material3-green': themepref = 'green'; break;
		case 'material3-red': themepref = 'red'; break;
	}

	http.prepare_content('text/html; charset=UTF-8');
-%}

<!DOCTYPE html>
<html lang="{{ dispatcher.lang }}" {{ darkpref ? `data-darkmode="${darkpref}"` : '' }} {{ themepref ? `data-theme="${themepref}"` : '' }}>
	<head>
		<meta charset="utf-8">
		<title>{{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - LuCI</title>
		{% if (!darkpref): %}
			<script>
				var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'),
				    rootElement = document.querySelector(':root'),
				    setDarkMode = function(match) { rootElement.setAttribute('data-darkmode', match.matches) };

				mediaQuery.addEventListener('change', setDarkMode);
				setDarkMode(mediaQuery);
			</script>
		{% endif %}
		<meta name="viewport" content="initial-scale=1.0">
		<link rel="stylesheet" href="{{ media }}/cascade.css">
		<link rel="stylesheet" media="screen and (max-width: 854px)" href="{{ media }}/mobile.css" />
		<link rel="icon" href="{{ media }}/logo.svg" sizes="any">
		{% if (node?.css): %}
		<link rel="stylesheet" href="{{ resource }}/{{ node.css }}">
		{% endif %}
		{% if (css): %}
		<style title="text/css">{{ css }}</style>
		{% endif %}
		<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script>
		<script src="{{ resource }}/cbi.js"></script>
	</head>

	<body class="lang_{{ dispatcher.lang }} {{ entityencode(striptags(node?.title ?? ''), true) }}" data-page="{{ entityencode(join('-', ctx.request_path), true) }}">
		{% if (!blank_page): %}
		<header>
			<div class="menu-btn">
				<span aria-label="{{ _('Toggle navigation menu') }}"></span>
			</div>
			
			<a class="brand" href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a>
			<div id="indicators" class="pull-right"></div>
		</header>

		<aside class="sidebar">
			<ul class="nav" id="topmenu" style="display:none"></ul>
		</aside>

		<div id="maincontent" class="container">
			{% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %}
				<div class="alert-message warning">
					<h4>{{ _('No password set!') }}</h4>
					<p>{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}</p>
					{% if (dispatcher.lookup("admin/system/admin")): %}
					  <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/admin") }}">{{ _('Go to password configuration...') }}</a></div>
					{% endif %}
				</div>
			{% endif %}

			{% if (boardinfo.rootfs_type == "initramfs"): %}
				<div class="alert-message warning">
					<h4>{{ _('System running in recovery (initramfs) mode.') }}</h4>
					<p>{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}</p>
					{% if (dispatcher.lookup("admin/system/flash")): %}
					  <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div>
					{% endif %}
				</div>
			{% endif %}

			<noscript>
				<div class="alert-message warning">
					<h4>{{ _('JavaScript required!') }}</h4>
					<p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p>
				</div>
			</noscript>

			<div id="tabmenu" style="display:none"></div>
		{% endif %}
