{{#if ready}}
  <div id="navigation">
      <div id="dimmer" class={{dimmerOnClass}} {{action "toggleDimmer"}}>
        <div id="dimmer-switch"></div>
      </div>

    {{#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="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>

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

  <div class="row">
    {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn strobeOn=pauseLightUpdates}}

    {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
  </div>
{{/if}}