<html>
<head>
  <title>app-sk demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="/res/common/js/common.js"></script>
  <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="text/javascript">
    sk.get = function(url) {
      return new Promise(function (resolve, reject) {
        if (url == "/loginstatus/") {
          resolve('{"Email":"user@google.com","LoginURL":"https://accounts.google.com/"}');
        } else {
          reject("no such URL: " + url);
        }
      });
    };
  </script>
  <style>
    body {
      margin: 0px;
    }
  </style>
  <link rel=import href="app-sk.html">
</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">
    :root{
      --app-sk-drawer: {
        background-color: #CDCDCD;
      };
      --app-sk-main: {
        background-color: #AAAAAA;
      };
      --app-sk-toolbar: {
        background-color: #AB1234;
      };
    }
  </style>
  <app-sk mode="standard" responsive_width="600px" drawer_width="230px">
    <h1 header>Title goes here</h1>
    <div navigation>Nav goes here</div>
    <div>Content goes here</div>
  </app-sk>

</body>
</html>