<!DOCTYPE html>
<html>
  <head>
    {{template "header.html" .}}

    <title>Directory of AutoRollers</title>

  </head>
  <body>
<!--We must use is=custom-style here so the variables get piped through to the
    app properly. 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">
    app-sk {
      --app-sk-main: {
        background-color: #FFFFFF;
        font-family: sans-serif;
      };
      --app-sk-toolbar: {
        background-color: #1F78B4;
        color: #FFFFFF;
        font-size: 15px;
        font-family: sans-serif;
        text-align: center;
      };
    }
    .fit {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    </style>
    <app-sk id="app" class="fit">
      {{template "navbar.html" .}}
      <h1 toolbar>Directory of AutoRollers</h1>
      <arb-table-sk></arb-table-sk>
    </app-sk>
  </body>
  <script>
    var rollers = [
      {{range .Rollers}}
        "{{.}}",
      {{end}}
    ];
    var elem = document.getElementsByTagName("arb-table-sk")[0];
    elem.rollers = rollers;
  </script>
</html>