.sn-component
  #footer-bar.app-bar.no-edges
    .left
      .item{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
        .column
          .circle.small.info
        .column
          .label.title{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
        %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}

      .item{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
        .label.title{"ng-click" => "ctrl.toggleExtensions()"} Extensions
        %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}

      .item
        .label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
          Help

      %room-bar#room-bar

    .right

      .item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
        %span.tinted.normal New update downloaded. Installs on app restart.

      .item{"ng-if" => "ctrl.lastSyncDate"}
        .label
          %span{"ng-if" => "!ctrl.isRefreshing"}
            Last refreshed {{ctrl.lastSyncDate | appDateTime}}
          %span{"ng-if" => "ctrl.isRefreshing"}
            .spinner

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

      .item{"ng-if" => "ctrl.hasPasscode()"}
        .label
          %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}