<%#
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
 Licensed to the public under the Apache License 2.0.
-%>

<html>
	<head>
		<title><%=luci.sys.hostname()%> - <%= title or translate("Rebooting...") %></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body {
				width: 100%;
				height: 100%;
				background: #6a7893;
				color: #e5e5e5;
			}
			.page-content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
			.container {
				width: 620px;
				display: block;
				background: #272727;
				padding: 40px;
				border-radius: 8px;
				box-sizing: border-box;
				box-shadow: 0 0 10px rgba(0, 0, 0, .2);
			}
			
			h1 {
				text-align: center;
				font-size: 24px;
			}
			
			h3 {
				text-align: center;
			}
			
			p {
				margin: 0 0 14px;
				font-size: 16px;
				line-height: 1.5;
			}
			
			.logo {
				text-align: center;
				margin: 0 0 20px;
			}
			
			a {
				color: #0078d4bd;
				text-decoration: none;
			}
			
			@media only screen and (max-width: 767px) {
				.page-content {
					padding: 20px
				}
			
				.container {
					width: auto;
					padding: 30px;
				}
			}
		</style>
		<script type="text/javascript">//<![CDATA[
			var interval = window.setInterval(function() {
				var img = new Image();
				var target = ('https:' == document.location.protocol ? 'https://' : 'http://') + <%=addr and "'%s'" % addr or "window.location.host"%>;

				img.onload = function() {
					window.clearInterval(interval);
					window.location.replace(target);
				};

				img.src = target + '<%=resource%>/icons/loading.gif?' + Math.random();

			}, 20000);
		//]]></script>
	</head>
	<body>
	<div class="page-content">
		<div class="container">
			<div class="logo">
				<img width="130" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjAuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iJiMxMDU3OyYjMTA4MzsmIzEwODY7JiMxMDgxO18xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2NCA2NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfXzUyNTM5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMwLjk5ODkiIHkxPSIxNiIgeDI9IjMwLjk5ODkiIHkyPSI1NS4zNDIyIiBzcHJlYWRNZXRob2Q9InJlZmxlY3QiPgoJPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojNkRDN0ZGIi8+Cgk8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFNkFCRkYiLz4KPC9saW5lYXJHcmFkaWVudD4KPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8xX181MjUzOSk7IiBkPSJNMjUuMDA4LDU2LjAwN2MtMC4wMDMtMC4zNjgtMC4wMDYtMS45NjItMC4wMDktMy40NTRsLTAuMDAzLTEuNTUgIGMtNi43MjksMC45MTUtOC4zNTgtMy43OC04LjM3Ni0zLjgzYy0wLjkzNC0yLjM2OC0yLjIxMS0zLjA0NS0yLjI2Ni0zLjA3M2wtMC4xMjQtMC4wNzJjLTAuNDYzLTAuMzE2LTEuNjkxLTEuMTU3LTEuMzQyLTIuMjYzICBjMC4zMTUtMC45OTcsMS41MzYtMS4xLDIuMDkxLTEuMDgyYzMuMDc0LDAuMjE1LDQuNjMsMi45NzgsNC42OTQsMy4wOTVjMS41NjksMi42ODksMy45NjQsMi40MTEsNS41MDksMS44NDQgIGMwLjE0NC0wLjY4OCwwLjM2Ny0xLjMyLDAuNjU5LTEuODc4QzIwLjg4NSw0Mi44NjUsMTUuMjcsNDAuMjI5LDE1LjI3LDMwLjY0YzAtMi42MzMsMC44Mi00Ljk2LDIuNDQxLTYuOTI5ICBjLTAuMzYyLTEuMjA2LTAuNzc0LTMuNjY2LDAuNDQ2LTYuNzY1bDAuMTc0LTAuNDQybDAuNDUyLTAuMTQ0YzAuNDE2LTAuMTM3LDIuNjg4LTAuNjI0LDcuMzU5LDIuNDMzICBjMS45MjgtMC40OTQsMy45NjktMC43NDksNi4wNzQtMC43NTljMi4xMTUsMC4wMSw0LjE1OCwwLjI2NSw2LjA5LDAuNzU5YzQuNjY3LTMuMDU4LDYuOTM0LTIuNTY1LDcuMzUxLTIuNDMzbDAuNDUxLDAuMTQ1ICBsMC4xNzQsMC40NGMxLjIyNSwzLjA5OCwwLjgxMyw1LjU1OSwwLjQ1MSw2Ljc2NmMxLjYxOCwxLjk2MywyLjQzOCw0LjI5MSwyLjQzOCw2LjkyOWMwLDkuNTkxLTUuNjIxLDEyLjIxOS0xMC41ODgsMTMuMDg3ICBjMC41NjMsMS4wNjUsMC44NjgsMi40MDIsMC44NjgsMy44NzhjMCwxLjY4My0wLjAwNyw3LjIwNC0wLjAxNSw4LjQwMmwtMi0wLjAxNGMwLjAwOC0xLjE5NiwwLjAxNS02LjcwOCwwLjAxNS04LjM4OSAgYzAtMi40NDItMC45NDMtMy41MjItMS4zNS0zLjg3NGwtMS43My0xLjQ5N2wyLjI3NC0wLjI1M2M1LjIwNS0wLjU3OCwxMC41MjUtMi4zNzksMTAuNTI1LTExLjM0MWMwLTIuMzMtMC43NzctNC4zNjEtMi4zMS02LjAzNiAgbC0wLjQzLTAuNDY5bDAuMjQyLTAuNTg3YzAuMTY2LTAuNDAxLDAuODk0LTIuNDQyLTAuMDQzLTUuMjkxYy0wLjc1OCwwLjA0NS0yLjU2OCwwLjQwMi01LjU4NCwyLjQ0N2wtMC4zODQsMC4yNTlsLTAuNDQ1LTAuMTIzICBjLTEuODYzLTAuNTE4LTMuOTM4LTAuNzk2LTYuMDAxLTAuODA2Yy0yLjA1MiwwLjAxLTQuMTI0LDAuMjg4LTUuOTg0LDAuODA2bC0wLjQ0NSwwLjEyM2wtMC4zODMtMC4yNTkgIGMtMy4wMTktMi4wNDQtNC44MzMtMi40MDQtNS41OTQtMi40NDljLTAuOTM1LDIuODUxLTAuMjA2LDQuODkyLTAuMDQsNS4yOTNsMC4yNDIsMC41ODdsLTAuNDI5LDAuNDY5ICBjLTEuNTM2LDEuNjgxLTIuMzE0LDMuNzEyLTIuMzE0LDYuMDM2YzAsOC45NTgsNS4zMSwxMC43NywxMC41MDQsMTEuMzYxbDIuMjUyLDAuMjU2bC0xLjcwOCwxLjQ5ICBjLTAuMzcyLDAuMzI1LTEuMDMsMS4xMTItMS4yNTQsMi43MjdsLTAuMDc1LDAuNTQ5bC0wLjUwNiwwLjIyN2MtMS4zMjEsMC41OTItNS44MzksMi4xNjItOC41NDgtMi40ODUgIGMtMC4wMTUtMC4wMjUtMC41NDQtMC45NDUtMS41MDItMS41NTdjMC42NDYsMC42MzksMS40MzMsMS42NzMsMi4wNjgsMy4yODdjMC4wNjYsMC4xOSwxLjM1NywzLjYyMiw3LjI4LDIuMzM5bDEuMjA2LTAuMjYyICBsMC4wMTIsMy45NzhjMC4wMDMsMS40ODcsMC4wMDYsMy4wNzYsMC4wMDksMy40NDRMMjUuMDA4LDU2LjAwN3oiLz4KPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8yX181MjUzOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIzMiIgeTE9IjUiIHgyPSIzMiIgeTI9IjU5LjE2NjkiIHNwcmVhZE1ldGhvZD0icmVmbGVjdCI+Cgk8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMxQTZERkYiLz4KCTxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0M4MjJGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzJfXzUyNTM5KTsiIGQ9Ik0zMiw1OEMxNy42NjMsNTgsNiw0Ni4zMzcsNiwzMlMxNy42NjMsNiwzMiw2czI2LDExLjY2MywyNiwyNlM0Ni4zMzcsNTgsMzIsNTh6IE0zMiw4ICBDMTguNzY3LDgsOCwxOC43NjcsOCwzMnMxMC43NjcsMjQsMjQsMjRzMjQtMTAuNzY3LDI0LTI0UzQ1LjIzMyw4LDMyLDh6Ii8+Cjwvc3ZnPgo="/>
			</div>
            <div class="content">
				<h1><%:System%> - <%= title or translate("Rebooting...") %></h1>
				<p></p>
				<div>
					<p><%= msg or translate("Changes applied.") %></p>
				</div>
				<div>
					<img width="30" src="data:image/svg+xml;base64,[encoded data, 7720 characters]" alt="<%:Loading%>" style="vertical-align:middle" />
					<%:Waiting for device...%>
				</div>
			</div>
		</div>
	</body>
</html>
