{{#if ready}}
  <div class="row navigation">
    <div class="col-xs-6 col-xs-offset-3">
      {{#each tabData as |tab|}}
          <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
      {{/each}}
    </div>

    <div class="col-xs-3">
      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>

        {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
      </span>

      <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">
        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>

        {{#if appSettingsDisplayed}}
          <div id="appSettings">
            <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
            <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
          </div>
        {{/if}}
      </span>
    </div>
  </div>

  {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
  {{controls/music-control apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected}}
{{/if}}