<link rel=import href=catsite-status.html>

<polymer-element name="catsite-app">
  <template>
    <core-ajax auto url=/status handleAs=json on-core-response="{{onStatus}}"></core-ajax>
    <core-header-panel>
      <core-toolbar>
        <paper-tabs id=tabs selected="{{selected}}" self-end>
          <paper-tab name=status>Status</paper-tab>
          <paper-tab name=calendar>Calendar</paper-tab>
        </paper-tabs>
      </core-toolbar>
      <core-pages selected="{{selected}}">
        <catsite-status name=status switches="{{switches}}">
        </catsite-status>
        <div name=calendar>TODO: Calendar</div>
      </core-pages>
      <!-- main page content will go here -->
    </core-header-panel>
  </template>
  <style shim-shadowdom>
    html,body {
      height: 100%;
      margin: 0;
      font-family: 'RobotoDraft', sans-serif;
    }
    catsite-app::shadow core-header-panel {
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    catsite-app::shadow core-toolbar {
      margin-top: 0px;
      background: #aa55bb;
      color: white;
    }
    catsite-app::shadow #tabs {
      width: 100%;
      margin: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-transform: uppercase;
    }
    catsite-app::shadow core-pages {
      margin: 20px 40px;
    }
  </style>
  <script>
    Polymer({
      selected: 'status',
      switches: {},
      onStatus: function(e) {
        this.switches = _.sortBy(_.map(e.detail.response, function(val, key) {
          val.name = key
          return val
        }), 'idx')
      }
    })
  </script>
</polymer-element>
