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

    <div id="settings" class="col-sm-3 col-xs-4">
      <div class="settingsItem">
        <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Groups <span class="caret"></span>
        </span>

        {{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
      </div>

      <div class="settingsItem">
        <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Settings <span class="caret"></span>
        </span>

        <ul id="appSettings" class="dropdown-menu">
          <li {{action "clearBridge"}}><a href="#">Switch bridge</a></li>
          <li {{action "clearAllSettings"}}><a href="#">Clear application settings</a></li>
        </ul>
      </div>
    </div>
  </div>

  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected dimmerOn=dimmerOn}}
  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage}}
{{/if}}