{{#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|}}
          {{#if canTryChrome}}
            {{#content.menu-item class="hidden-xs" onClick="tryExtension"}}
              {{paper-icon "extension" class=dimmerOnClass}} Try the Chrome Extension
            {{/content.menu-item}}
          {{/if}}

          {{#content.menu-item class="visible-xs" onClick="tryAndroid"}}
            {{paper-icon "extension" class=dimmerOnClass}} Try the Android Extension
          {{/content.menu-item}}

          {{#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}}

          {{#content.menu-item onClick="email"}}
            {{paper-icon "email" class=dimmerOnClass}} Contact
          {{/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 pauseLightUpdates=pauseLightUpdates}}

  <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>

  {{#if firstVisitApp}}
    {{#paper-dialog fullscreen=fullscreen onClose=(action "closeNotificationModal") origin=dialogOrigin clickOutsideToClose=true}}
      {{#paper-dialog-content}}
        <p class="promo-title">
          Check out the <a href="https://chrome.google.com/webstore/detail/huegasm-for-philips-hue-l/mbjanbdhcpohhfecjgbdpcfhnnbofooj" target="_blank">Huegasm Chrome extension</a>
        </p>
        <p>
          The newly updated <a href="https://chrome.google.com/webstore/detail/huegasm-for-philips-hue-l/mbjanbdhcpohhfecjgbdpcfhnnbofooj" target="_blank">Huegasm Chrome</a> adds:
          <ul>
            <li>Ability to listen for music from either a Chrome tab, microphone or your entire system</li>
            <li>"Ambience" and "Blacout" modes which change the lights effects when listening to music</li>
            <li>And more...</li>
          </ul>

          <a href="https://chrome.google.com/webstore/detail/huegasm-for-philips-hue-l/mbjanbdhcpohhfecjgbdpcfhnnbofooj" target="_blank">
            <img class="promo-img hidden-xs" src="assets/images/promo.png">
          </a>
        </p>
      {{/paper-dialog-content}}

      {{#paper-dialog-actions class="layout-row" }}
        <span class="flex"></span>
        {{#paper-button primary=true onClick=(action "closeNotificationModal")}}OK{{/paper-button}}
      {{/paper-dialog-actions}}

    {{/paper-dialog}}
  {{/if}}
{{else}}
  {{paper-progress-circular diameter=100}}
{{/if}}

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