.sn-component
  #sync-resolution-menu.sk-panel.sk-panel-right
    .sk-panel-header
      .sk-panel-header-title Out of Sync
      a.sk-a.info.close-button(ng-click='ctrl.close()') Close
    .sk-panel-content
      .sk-panel-section
        .sk-panel-row.sk-p
          | We've detected that the data on the server may not match
          | the data in the current application session.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 1 — Restart App:
            .sk-p
              | Quit the application and re-open it.
              | Sometimes, this may resolve the issue.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 2 (recommended) — Sign Out:
            .sk-p
              | Sign out of your account, then sign back in.
              | This will ensure your data is consistent with the server.
            | Be sure to download a backup of your data before doing so.
        .sk-p.sk-panel-row
          .sk-panel-column
            strong.sk-panel-row Option 3 — Sync Resolution:
            .sk-p
              | We can attempt to reconcile changes by downloading all data from the
              | server. No existing data will be overwritten. If the local contents of
              | an item differ from what the server has, a conflicted copy will be created.
        div(ng-if='!ctrl.status.backupFinished')
          .sk-p.sk-panel-row
            | Please download a backup before we attempt to
            | perform a full account sync resolution.
          .sk-panel-row
            .flex.gap-2
              button.sn-button.small.info(ng-click='ctrl.downloadBackup(true)') Encrypted
              button.sn-button.small.info(ng-click='ctrl.downloadBackup(false)') Decrypted
              button.sn-button.small.danger(ng-click='ctrl.skipBackup()') Skip
        div(ng-if='ctrl.status.backupFinished')
          .sk-panel-row(ng-if='!ctrl.status.resolving && !ctrl.status.attemptedResolution')
            button.sn-button.small.info(ng-click='ctrl.performSyncResolution()')
              | Perform Sync Resolution
          .sk-panel-row.justify-left(ng-if='ctrl.status.resolving')
            .sk-horizontal-group
              .sk-spinner.small.info
              .sk-label Attempting sync resolution...
          .sk-panel-column(ng-if='ctrl.status.fail')
            .sk-panel-row.sk-label.danger Sync Resolution Failed
            .sk-p.sk-panel-row
              | We attempted to reconcile local content and server content, but were
              | unable to do so. At this point, we recommend signing out of your account
              | and signing back in. You may wish to download a data backup before doing so.
          .sk-panel-column(ng-if='ctrl.status.success')
            .sk-panel-row.sk-label.success Sync Resolution Success
            .sk-p.sk-panel-row
              | Your local data is now in sync with the server. You may close this window.