{{#if ready}}
  <div id="navigation" class="row">
    <div class="col-sm-10 col-sm-offset-1 col-xs-12">
      {{#each tabData as |tab|}}
        <span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
      {{/each}}
      {{#paper-menu as |menu|}}
        {{#menu.trigger}}
          {{#paper-button iconButton=true}}
            {{paper-icon "settings-icon" class=dimmerOnClass size=28}}
          {{/paper-button}}
        {{/menu.trigger}}
        {{#menu.content width=3 as |content|}}
          {{#content.menu-item onClick="toggleDimmer"}}
            {{paper-icon "highlight" class=dimmerOnClass}} Dark Mode: <strong>{{if dimmerOn "On" "Off"}}</strong>
          {{/content.menu-item}}

          {{#content.menu-item onClick="toggleLightsIcons"}}
            {{paper-icon "lightbulb outline" class=dimmerOnClass}} Active Lights: <strong>{{if lightsIconsOn "Icons" "Text"}}</strong>
          {{/content.menu-item}}

          {{#content.menu-item onClick="clearBridge"}}
            {{paper-icon "compare arrows" class=dimmerOnClass}} Switch bridge
          {{/content.menu-item}}

          {{#content.menu-item onClick="startIntro"}}
            {{paper-icon "cached" class=dimmerOnClass}} Restart tutorial
          {{/content.menu-item}}

          {{#content.menu-item onClick="clearAllSettings"}}
            {{paper-icon "settings backup restore" class=dimmerOnClass}} Reset settings
          {{/content.menu-item}}
        {{/menu.content}}
      {{/paper-menu}}
    </div>
  </div>

  {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}}

  <div id="huegasm-content" class="row">
    {{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}

    {{music-tab active=(eq selectedTab 1) apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn playing=playing action="startIntro"}}
  </div>
{{else}}
  {{paper-progress-circular diameter=100}}
{{/if}}

{{ember-notify messageStyle='bootstrap' closeAfter=5000}}