standardnotes-app-web/app/assets/javascripts/views/footer/footer-view.pug

.sn-component
  #footer-bar.sk-app-bar.no-edges.no-bottom-edge
    .left
      .sk-app-bar-item.ml-0(
        click-outside='ctrl.clickOutsideAccountMenu()',
        is-open='ctrl.showAccountMenu',
        ng-click='ctrl.accountMenuPressed()'
      )
        .w-8.h-full.flex.items-center.justify-center.cursor-pointer.rounded-full(
            ng-class="ctrl.showAccountMenu ? 'bg-border' : '' "
          )
            .w-5.h-5(
              ng-class="ctrl.hasError ? 'danger' : (ctrl.user ? 'info' : 'neutral')"
            )
              icon(
                type="account-circle"
                class-name="hover:color-info w-5 h-5 max-h-5"
              )
        account-menu(
          ng-click='$event.stopPropagation()',
          app-state='ctrl.appState'
          application='ctrl.application'
          ng-if='ctrl.showAccountMenu',
        )
      .sk-app-bar-item.ml-0-important(
        ng-click='ctrl.clickPreferences()'
        ng-if='ctrl.appState.enableUnfinishedFeatures'
      )
        .w-8.h-full.flex.items-center.justify-center.cursor-pointer
          .h-5
            icon(
              type="tune"
              class-name="rounded hover:color-info"
            )
      .sk-app-bar-item
        a.no-decoration.sk-label.title(
          href='https://standardnotes.com/help',
          rel='noopener',
          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(
          component-uuid='room.uuid',
          ng-if='ctrl.roomShowState[room.uuid]',
          on-dismiss='ctrl.onRoomDismiss(room)',
          application='ctrl.application'
        )
      .sk-app-bar-item.border(ng-if="ctrl.state.showBetaWarning")
      .sk-app-bar-item(ng-if="ctrl.state.showBetaWarning")
        a.no-decoration.sk-label.title(
          ng-click="ctrl.displayBetaDialog()"
        ) You are using a beta version of the app
    .center
      .sk-app-bar-item(ng-if='ctrl.arbitraryStatusMessage')
        .sk-app-bar-item-column
          span.neutral.sk-label {{ctrl.arbitraryStatusMessage}}
    .right
      .sk-app-bar-item(
        ng-click='ctrl.openSecurityUpdate()'
        ng-if='ctrl.state.dataUpgradeAvailable'
        )
        span.success.sk-label Encryption upgrade available.
      .sk-app-bar-item(
        ng-click='ctrl.clickedNewUpdateAnnouncement()',
        ng-if='ctrl.newUpdateAvailable == true'
        )
        span.info.sk-label New update available.
      .sk-app-bar-item(
        ng-click='ctrl.toggleSyncResolutionMenu()',
        ng-if='(ctrl.state.outOfSync) || ctrl.showSyncResolution'
        )
        .sk-label.warning(ng-if='ctrl.state.outOfSync') Potentially Out of Sync
        sync-resolution-menu(
          close-function='ctrl.toggleSyncResolutionMenu()',
          ng-click='$event.stopPropagation();',
          ng-if='ctrl.showSyncResolution',
          application='ctrl.application'
          )
      .sk-app-bar-item(ng-if='ctrl.offline')
        .sk-label Offline
      .sk-app-bar-item.border(ng-if='ctrl.state.dockShortcuts.length > 0')
      .sk-app-bar-item.dock-shortcut(ng-repeat='shortcut in ctrl.state.dockShortcuts')
        .sk-app-bar-item-column(
          ng-class="{'underline': shortcut.component.active}",
          ng-click='ctrl.selectShortcut(shortcut)'
          )
          .div(ng-if="shortcut.icon.type == 'circle'" title='{{shortcut.name}}')
            .sk-circle.small(
              ng-style="{'background-color': shortcut.icon.background_color, 'border-color': shortcut.icon.border_color}"
              )
          .div(ng-if="shortcut.icon.type == 'svg'" title='{{shortcut.name}}')
            .svg-item(
              elem-ready='ctrl.initSvgForShortcut(shortcut)',
              ng-attr-id='dock-svg-{{shortcut.component.uuid}}'
              )
      .sk-app-bar-item.border(ng-if='ctrl.state.hasAccountSwitcher')
      .sk-app-bar-item(
        ng-if='ctrl.state.hasAccountSwitcher'
        ng-click='ctrl.openAccountSwitcher()',
        )
        #account-switcher-icon(ng-class='{"alone": !ctrl.state.hasPasscode}')
          svg.info.ionicon
            use(href="#layers-sharp")
      .sk-app-bar-item.border(ng-if='ctrl.state.hasPasscode')
      #lock-item.sk-app-bar-item(
        ng-click='ctrl.lockApp()',
        ng-if='ctrl.state.hasPasscode',
        title='Locks application and wipes unencrypted data from memory.'
        )
        .sk-label
          i#footer-lock-icon.icon.ion-locked