<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- popup-and-sidebar -->
		<link rel="stylesheet" href="common.css">
		<link rel="stylesheet" href="common.gui.css">
		<!-- sidebar -->
		<link rel="stylesheet" href="sidebar.css">
		<!-- /sidebar -->
		<!-- /popup-and-sidebar -->
		<!-- devtools -->
		<link rel="stylesheet" href="devtoolsPanel.css">
		<!-- /devtools -->
	</head>  <!-- TODO: this gets aligned wrongly after the replace -->
	<body>
		<!-- devtools -->
		<div id="connection-error" class="warning" hidden>
			<p data-message="devToolsConnectionError"></p>
		</div>

		<details class="department" id="page-warnings-container" open hidden>
			<summary><h1 data-message="lintPageWarnings"></h1></summary>
			<div id="page-warnings"></div>
		</details>
		<!-- /devtools -->

		<div id="content">
			<!-- popup-and-sidebar -->
			<!-- sidebar -->
			<div id="note-ui" class="warning" hidden>
				<p data-message="hintSidebarIsNotPrimary"></p>
				<button id="note-ui-cta" data-message="hintSidebarIsNotPrimaryCTA"></button>
				<button id="note-ui-dismiss" data-message="hintSidebarIsNotPrimaryDismiss"></button>
			</div>
			<!-- /sidebar -->
			<div id="note-update" class="warning" hidden>
				<p><span data-message="hintWhatIsNew"></span> <span id="version"></span>.</p>
				<button id="note-update-cta" data-message="hintWhatIsNewCTA"></button>
				<button id="note-update-dismiss" data-message="hintWhatIsNewDismiss"></button>
			</div>
			<!-- /popup-and-sidebar -->

			<!-- devtools -->
			<details class="department" open>
				<summary><h1 data-message="extensionShortName"></h1></summary>
				<div id="landmarks"></div>

				<label id="show-all-label" data-message="popupShowAllLandmarks">
					<input type="checkbox" id="show-all">
				</label>
			</details>
			<!-- /devtools -->
			<!-- popup-and-sidebar -->
			<div id="landmarks"></div>

			<label id="show-all-label" data-message="popupShowAllLandmarks">
				<input type="checkbox" id="show-all">
			</label>
			<!-- /popup-and-sidebar -->
		</div>

		<!-- popup-and-sidebar -->
		<div id="links">
			<button id="help" data-message="popupHelpButton"></button>
			<button id="settings" data-message="popupPreferencesButton"></button>
		</div>
		<!-- /popup-and-sidebar -->

		<!-- devtools -->
		<details class="department">
			<summary><h1 data-message="lintAbout"></h1></summary>
			<p data-message="lintAboutNature"></p>
			<p><a href="http://matatk.agrip.org.uk/talks/2020/landmarks/" data-message="lintAboutLinkText"></a>
		</details>

		<details class="department" id="mutation-observation-station">
			<summary><h1 data-message="statsHeading"></h1></summary>
			<dl>
				<dt id="statsMutationsTerm" data-message="statsMutationsTerm"></dt>
				<dd>
					<span id="mutations">0</span>
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsMutationsTerm statsMutationsTerm">
							<span id="define-statsMutationsTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsMutationsDefinition"></p>
					</details>
				</dd>

				<dt id="statsCheckedMutationsTerm" data-message="statsCheckedMutationsTerm"></dt>
				<dd>
					<span id="checks">0</span>
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsCheckedMutationsTerm statsCheckedMutationsTerm">
							<span id="define-statsCheckedMutationsTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsCheckedMutationsDefinition"></p>
					</details>
				</dd>

				<dt id="statsMutationScansTerm" data-message="statsMutationScansTerm"></dt>
				<dd>
					<span id="mutationScans">0</span>
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsMutationScansTerm statsMutationScansTerm">
							<span id="define-statsMutationScansTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsMutationScansDefinition"></p>
					</details>
				</dd>

				<dt id="statsNonMutationScansTerm" data-message="statsNonMutationScansTerm"></dt>
				<dd>
					<span id="nonMutationScans">0</span>
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsNonMutationScansTerm statsNonMutationScansTerm">
							<span id="define-statsNonMutationScansTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsNonMutationScansDefinition"></p>
					</details>
				</dd>

				<dt id="statsPauseTerm" data-message="statsPauseTerm"></dt>
				<dd>
					<span id="pause">&mdash;</span>ms
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsPauseTerm statsPauseTerm">
							<span id="define-statsPauseTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsPauseDefinition"></p>
					</details>
				</dd>

				<dt id="statsDurationTerm" data-message="statsDurationTerm"></dt>
				<dd>
					<span id="duration">&mdash;</span>ms
					<details class="tooltip">
						<summary class="definition" aria-labelledby="define-statsDurationTerm statsDurationTerm">
							<span id="define-statsDurationTerm" data-message="statsDefine" class="visually-hidden"></span>
						</summary>
						<p data-message="statsDurationDefinition"></p>
					</details>
				</dd>
			</dl>
			<p data-message="statsInfo"></p>
		</details>
		<!-- /devtools -->

		<script src="GUIJS"></script>
	</body>
</html>
