<!DOCTYPE html>
<html>
<head>
    <title>Skia Debugger - Admin</title>
    <meta charset="utf-8">
    <meta name="theme-color" content="#526E9C">
    <link rel="shortcut icon" href="/res/img/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/res/js/core.js" type="text/javascript" charset="utf-8"></script>
    <link href="/res/vul/elements.html" rel="import" />
    <!--We must use is=custom-style here so styles don't get leaked into local DOM.
    Note that using custom-style inside <dom-module> can lead to
    unintended consequences, such as CSS mixins not being visible.
    https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style -->
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style is="custom-style" type="text/css" media="screen">
      body {
        margin: 0;
        padding: 0;
        transition: none;
        font-family: sans-serif;
      }

      header {
        background: #1f78b4;
        color: white;
        padding: 0.5em;
        margin: 0;
      }

      header > * {
        display: inline-block;
      }

      header h2 {
        margin: 0;
      }

      #main {
        padding: 1em;
      }

      td {
        padding: 0.5em;
        background: #eee;
        border: 0.1em white solid;
      }
    </style>
</head>
<body>
  <header class="horizontal layout center">
    <h2>Skia Debugger - Admin</h2>
    <div class="flex"></div>
    <login-sk></login-sk>
  </header>
  <section id=main>
    <table>
      <tr><th>ID</th><th>Uptime</th><th>Port</th></tr>
      {{range .}}
      <tr><td>{{.ID}}</td><td>{{.Uptime}}</td><td>{{.Port}}</td></tr>
      {{end}}
    </table>
  </section>
</body>
</html>