.sn-component
  .sk-panel.sk-panel-right#sync-resolution-menu
    .sk-panel-header
      .sk-panel-header-title Out of Sync
      %a.sk-a.info.close-button{"ng-click" => "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" => "!status.backupFinished"}
          .sk-p.sk-panel-row
            Please download a backup before we attempt to perform a full account sync resolution.
          .sk-panel-row
            .sk-button-group
              .sk-button.info{"ng-click" => "downloadBackup(true)"}
                .sk-label Encrypted
              .sk-button.info{"ng-click" => "downloadBackup(false)"}
                .sk-label Decrypted
              .sk-button.danger{"ng-click" => "skipBackup()"}
                .sk-label Skip

        %div{"ng-if" => "status.backupFinished"}
          .sk-panel-row{"ng-if" => "!status.resolving && !status.attemptedResolution"}
            .sk-button.info{"ng-click" => "performSyncResolution()"}
              .sk-label Perform Sync Resolution

          .sk-panel-row.justify-left{"ng-if" => "status.resolving"}
            .sk-horizontal-group
              .sk-spinner.small.info
              .sk-label Attempting sync resolution...

          .sk-panel-column{"ng-if" => "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" => "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.