.sn-component
  #footer-bar.sk-app-bar.no-edges
    .left

      .sk-app-bar-item{"ng-click" => "ctrl.accountMenuPressed()", "click-outside" => "ctrl.clickOutsideAccountMenu()", "is-open" => "ctrl.showAccountMenu"}
        .sk-app-bar-item-column
          .sk-circle.small{"ng-class" => "ctrl.error ? 'danger' : (ctrl.getUser() ? 'info' : 'neutral')"}
        .sk-app-bar-item-column
          .sk-label.title{"ng-class" => "{red: ctrl.error}"} Account
        %account-menu{"ng-click" => "$event.stopPropagation()", "ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess", "close-function" => "ctrl.closeAccountMenu"}

      .sk-app-bar-item
        %a.no-decoration.sk-label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
          Help

      .sk-app-bar-item.border

      .sk-app-bar-item{"ng-repeat" => "room in ctrl.rooms track by room.uuid"}
        .sk-app-bar-item-column{"ng-click" => "ctrl.selectRoom(room)"}
          .sk-label {{room.name}}
        %component-modal{"ng-if" => "room.showRoom", "component" => "room", "on-dismiss" => "ctrl.onRoomDismiss"}


    .right

      .sk-app-bar-item{"ng-if" => "ctrl.securityUpdateAvailable", "ng-click" => "ctrl.openSecurityUpdate()"}
        %span.success.sk-label Security update available.

      .sk-app-bar-item{"ng-if" => "ctrl.newUpdateAvailable == true", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
        %span.info.sk-label New update available.

      .sk-app-bar-item.no-pointer{"ng-if" => "ctrl.lastSyncDate && !ctrl.isRefreshing"}
        .sk-label.subtle
          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
      .sk-app-bar-item{"ng-if" => "ctrl.lastSyncDate && ctrl.isRefreshing"}
        .sk-spinner.small

      .sk-app-bar-item{"ng-if" => "ctrl.offline"}
        .sk-label Offline
      .sk-app-bar-item{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"}
        .sk-label Refresh

      .sk-app-bar-item.border{"ng-if" => "ctrl.dockShortcuts.length > 0"}

      .sk-app-bar-item.dock-shortcut{"ng-repeat" => "shortcut in ctrl.dockShortcuts"}
        .sk-app-bar-item-column{"ng-click" => "ctrl.selectShortcut(shortcut)", "ng-class" => "{'underline': shortcut.component.active}"}
          .div{"ng-if" => "shortcut.icon.type == 'circle'"}
            .sk-circle.small{"ng-style" => "{'background-color': shortcut.icon.background_color, 'border-color': shortcut.icon.border_color}"}
          .div{"ng-if" => "shortcut.icon.type == 'svg'"}
            .svg-item{"ng-attr-id" => "dock-svg-{{shortcut.component.uuid}}", "elem-ready" => "ctrl.initSvgForShortcut(shortcut)"}

      .sk-app-bar-item.border{"ng-if" => "ctrl.hasPasscode()"}
      .sk-app-bar-item#lock-item{"ng-if" => "ctrl.hasPasscode()", "title" => "Locks application and wipes unencrypted data from memory."}
        .sk-label
          %i.icon.ion-locked#footer-lock-icon{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}