<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="common.css" rel="stylesheet">
<link href="proximity_auth.css" rel="stylesheet">
<script src="webui.js"></script>
<script src="logs.js"></script>
<script src="proximity_auth.js"></script>
<script src="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js">
</script>
<script src="chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js">
</script>
<script src="chrome://resources/mojo/chromeos/ash/components/multidevice/mojom/multidevice_types.mojom-lite.js">
</script>
<script src="chrome://resources/mojo/chromeos/ash/services/device_sync/public/mojom/device_sync.mojom-lite.js">
</script>
<script src="chrome://resources/mojo/chromeos/ash/services/multidevice_setup/public/mojom/multidevice_setup.mojom-lite.js">
</script>
</head>
<body>
<!-- Panel for debug controls. -->
<section id='controls'>
<header>
<div class='logo'>近</div>
<div class='title'>ProximityAuth</div>
</header>
<div id='controls-panel'>
<!-- Control for CryptAuth enrollment and sync -->
<div class='control'>
<div class='control-title'>CRYPTAUTH</div>
<table>
<tr>
<td>DEVICE ID (truncated)</td>
<td colspan="2" id='local-device-id'>----</td>
</tr>
<tr><td id='enrollment-title' state='synced'>ENROLLMENT</td></tr>
<tr class='subrow'>
<td>Last Success</td>
<td id='last-enrollment'>
</tr>
<tr class='subrow'>
<td>Next Refresh</td>
<td id='next-enrollment'>
</tr>
<tr class='subrow'>
<td><button id='force-enrollment'>Enroll</button></td>
</tr>
<tr><td id='device-sync-title' state='synced'>DEVICE SYNC</td></tr>
<tr class='subrow'>
<td>Last Success</td>
<td id='last-device-sync'>
</tr>
<tr class='subrow'>
<td>Next Refresh</td>
<td id='next-device-sync'>
</tr>
<tr class='subrow'>
<td><button id='force-device-sync'>Sync</button></td>
</tr>
<tr>
<td>MULTIDEVICE NOTIFICATIONS</td>
</tr>
<tr class='subrow'>
<td><button id='show-new-user-notif'>New User</button></td>
</tr>
<tr class='subrow'>
<td>
<button id='show-existing-user-new-host-notif'>
Existing User (new host)
</button>
</td>
</tr>
<tr class='subrow'>
<td>
<button id='show-existing-user-new-chromebook-notif'>
Existing User (new Chromebook)
</button>
</td>
</tr>
</table>
</div>
<!-- Control for showing synced remote devices. -->
<div class='control' id='remote-devices-control'>
<div class='control-title'>REMOTE DEVICES</div>
</div>
</div>
</section>
<!-- Panel for logs list. -->
<section id='logs-panel'>
<header>
<button id='clear-logs-button'>Clear</button>
<button id='save-logs-button'>Save Logs</button>
</header>
<div id='logs-list'> </div>
</section>
<!-- Template for a remote device entry. -->
<template id='remote-device-template'>
<div class='remote-device'>
<div class='status-name-container'>
<div class='device-connection-status' state='disconnected'>●</div>
<div class='device-name'>Google Pixel</div>
</div>
<table>
<tr>
<td>Device ID</td>
<td class='device-id'></td>
</tr>
<tr>
<td>PII-Free Name</td>
<td class='no-pii-name'></td>
</tr>
<tr>
<td>Supported/Enabled Features</td>
<td class='software-features'></td>
</tr>
<tr>
<td>Is Unlock Key</td>
<td class='is-unlock-key'></td>
</tr>
<tr>
<td>Supports Mobile Hotspot</td>
<td class='supports-mobile-hotspot'></td>
</tr>
<tr>
<td>Is ARC++ Enrollment</td>
<td class='is-arc-plus-plus-enrollment'></td>
</tr>
<tr>
<td>Is Pixel Phone</td>
<td class='is-pixel-phone'></td>
</tr>
<tr class='bluetooth-address-row' hidden>
<td>Bluetooth Address</td>
<td class='bluetooth-address'></td>
</tr>
</table>
</div>
</template>
<!-- Template for a log item. -->
<template id='item-template'>
<div class='log-item' severity='0'>
<div class="item-metadata">
<div class='item-time'></div>
<div class="flex"></div>
<div class='item-source'></div>
</div>
<pre class="item-text flex">This is an error.</pre>
</div>
</template>
</body>
</html>