.sn-component
  #account-panel.sk-panel
    .sk-panel-header
      .sk-panel-header-title Account
      a.sk-a.info.close-button(ng-click='close()') Close
    .sk-panel-content
      .sk-panel-section.sk-panel-hero(ng-if='!user && !formData.showLogin && !formData.showRegister && !formData.mfa')
        .sk-panel-row
          .sk-h1 Sign in or register to enable sync and end-to-end encryption.
        .sk-panel-row
          .sk-button-group.stretch
            .sk-button.info.featured(ng-click='formData.showLogin = true')
              .sk-label Sign In
            .sk-button.info.featured(ng-click='formData.showRegister = true')
              .sk-label Register
        .sk-panel-row.sk-p
          | Standard Notes is free on every platform, and comes standard with sync and encryption.
      .sk-panel-section(ng-if='formData.showLogin || formData.showRegister')
        .sk-panel-section-title
          | {{formData.showLogin ? "Sign In" : "Register"}}
        form.sk-panel-form(ng-submit='submitAuthForm()')
          .sk-panel-section
            input.sk-input.contrast(name='email', ng-model='formData.email', ng-model-options='{allowInvalid: true}', placeholder='Email', required='', should-focus='true', sn-autofocus='true', spellcheck='false', type='email')
            input.sk-input.contrast(name='password', ng-model='formData.user_password', placeholder='Password', required='', sn-enter='submitAuthForm()', type='password')
            input.sk-input.contrast(name='password', ng-if='formData.showRegister', ng-model='formData.password_conf', placeholder='Confirm Password', required='', sn-enter='submitAuthForm()', type='password')
            .sk-panel-row
            a.sk-panel-row.sk-bold(ng-click='formData.showAdvanced = !formData.showAdvanced')
              | Advanced Options
          .sk-notification.unpadded.contrast.advanced-options.sk-panel-row(ng-if='formData.showAdvanced')
            .sk-panel-column.stretch
              .sk-notification-title.sk-panel-row.padded-row Advanced Options
              .bordered-row.padded-row
                label.sk-label Sync Server Domain
                input.sk-input.mt-5.sk-base(name='server', ng-model='formData.url', placeholder='Server URL', required='', type='text')
              label.sk-label.padded-row(ng-if='formData.showLogin')
                input.sk-input(ng-model='formData.strictSignin', type='checkbox')
                | Use strict sign in
                span
                  a.info(href='https://standardnotes.org/help/security', rel='noopener', target='_blank') (Learn more)
          .sk-panel-section.form-submit(ng-if='!formData.authenticating')
            .sk-button-group.stretch
              .sk-button.info.featured(ng-click='submitAuthForm()', ng-disabled='formData.authenticating')
                .sk-label {{formData.showLogin ? "Sign In" : "Register"}}
          .sk-notification.neutral(ng-if='formData.showRegister')
            .sk-notification-title No Password Reset.
            .sk-notification-text
              | Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
          .sk-panel-section.no-bottom-pad(ng-if='formData.status')
            .sk-horizontal-group
              .sk-spinner.small.neutral
              .sk-label {{formData.status}}
          .sk-panel-section.no-bottom-pad(ng-if='!formData.authenticating')
            label.sk-panel-row.justify-left
              .sk-horizontal-group
                input(ng-false-value='true', ng-model='formData.ephemeral', ng-true-value='false', type='checkbox')
                | Stay signed in
            label.sk-panel-row.justify-left(ng-if='notesAndTagsCount() > 0')
              .sk-panel-row
              input(ng-bind='true', ng-change='mergeLocalChanged()', ng-model='formData.mergeLocal', type='checkbox')
              | Merge local data ({{notesAndTagsCount()}} notes and tags)
      .sk-panel-section(ng-if='formData.mfa')
        form.sk-panel-form(ng-submit='submitMfaForm()')
          .sk-p.sk-panel-row {{formData.mfa.message}}
          .sk-panel-row
            input.sk-input.contrast(autofocus='true', name='mfa', ng-model='formData.userMfaCode', placeholder='Enter Code', required='', should-focus='true', sn-autofocus='true')
          .sk-button-group.stretch.sk-panel-row.form-submit(ng-if='!formData.status')
            button.sk-button.info.featured(type='submit')
              .sk-label Sign In
        .sk-panel-section.no-bottom-pad(ng-if='formData.status')
          .sk-panel-row
          .sk-panel-row
          .sk-horizontal-group
            .sk-spinner.small.neutral
            .sk-label {{formData.status}}
      div(ng-if='!formData.showLogin && !formData.showRegister && !formData.mfa')
        .sk-panel-section(ng-if='user')
          .sk-notification.danger(ng-if='syncStatus.error')
            .sk-notification-title Sync Unreachable
            .sk-notification-text
              | Hmm...we can't seem to sync your account. The reason: {{syncStatus.error.message}}
            a.sk-a.info-contrast.sk-bold.sk-panel-row(href='https://standardnotes.org/help', rel='noopener', target='_blank') Need help?
          .sk-panel-row
            .sk-panel-column
              .sk-h1.sk-bold.wrap {{user.email}}
              .sk-subtitle.subtle.normal {{server}}
            .sk-horizontal-group(delay='1000', delay-hide='true', show='syncStatus.syncOpInProgress || syncStatus.needsMoreSync')
              .sk-spinner.small.info
              .sk-sublabel
                | {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
                span(ng-if='syncStatus.total > 0') {{syncStatus.current}}/{{syncStatus.total}}
          .sk-panel-row
          a.sk-a.info.sk-panel-row.condensed(ng-click="openPasswordWizard('change-pw')")
            | Change Password
          a.sk-a.info.sk-panel-row.condensed(ng-click="openPrivilegesModal('')", ng-show='user')
            | Manage Privileges
          a.sk-panel-row.justify-left.condensed.success(ng-click="openPasswordWizard('upgrade-security')", ng-if='securityUpdateAvailable')
            .inline.sk-circle.small.success.mr-8
            .inline Security Update Available
        .sk-panel-section
          .sk-panel-section-title Encryption
          .sk-panel-section-subtitle.info(ng-if='encryptionEnabled()')
            | {{encryptionStatusForNotes()}}
          p.sk-p
            | {{encryptionStatusString()}}
        .sk-panel-section
          .sk-panel-section-title Passcode Lock
          div(ng-if='!hasPasscode()')
            div(ng-if='canAddPasscode')
              .sk-panel-row(ng-if='!formData.showPasscodeForm')
                .sk-button.info(ng-click='addPasscodeClicked(); $event.stopPropagation();')
                  .sk-label Add Passcode
              p.sk-p Add a passcode to lock the application and encrypt on-device key storage.
            div(ng-if='!canAddPasscode')
              p.sk-p
                | Adding a passcode is not supported in temporary sessions. Please sign out, then sign back in with the "Stay signed in" option checked.
          form.sk-panel-form(ng-if='formData.showPasscodeForm', ng-submit='submitPasscodeForm()')
            .sk-panel-row
            input.sk-input.contrast(ng-model='formData.passcode', placeholder='Passcode', should-focus='true', sn-autofocus='true', type='password')
            input.sk-input.contrast(ng-model='formData.confirmPasscode', placeholder='Confirm Passcode', type='password')
            .sk-button-group.stretch.sk-panel-row.form-submit
              button.sk-button.info(type='submit')
                .sk-label Set Passcode
            a.neutral.sk-a.sk-panel-row(ng-click='formData.showPasscodeForm = false') Cancel
          div(ng-if='hasPasscode() && !formData.showPasscodeForm')
            .sk-p
              | Passcode lock is enabled.
            .sk-notification.contrast
              .sk-notification-title Options
              .sk-notification-text
                .sk-panel-row
                  .sk-horizontal-group
                    .sk-h4.sk-bold Autolock
                    a.sk-a.info(ng-class="{'boxed' : option.value == selectedAutoLockInterval}", ng-click='selectAutoLockInterval(option.value)', ng-repeat='option in passcodeAutoLockOptions')
                      | {{option.label}}
                .sk-p The autolock timer begins when the window or tab loses focus.
                .sk-panel-row
                a.sk-a.info.sk-panel-row.condensed(ng-click="openPrivilegesModal('')", ng-show='!user') Manage Privileges
                a.sk-a.info.sk-panel-row.condensed(ng-click='changePasscodePressed()') Change Passcode
                a.sk-a.danger.sk-panel-row.condensed(ng-click='removePasscodePressed()') Remove Passcode
        .sk-panel-section(ng-if='!importData.loading')
          .sk-panel-section-title Data Backups
          .sk-p
            | Download a backup of all your data.
          .sk-panel-row
          form.sk-panel-form.sk-panel-row(ng-if='encryptedBackupsAvailable()')
            .sk-input-group
              label
                input(ng-change='archiveFormData.encrypted = true', ng-model='archiveFormData.encrypted', ng-value='true', type='radio')
                | Encrypted
              label
                input(ng-change='archiveFormData.encrypted = false', ng-model='archiveFormData.encrypted', ng-value='false', type='radio')
                | Decrypted
          .sk-button-group.sk-panel-row.justify-left
            .sk-button.info(ng-click='downloadDataArchive()')
              .sk-label Download Backup
            label.sk-button.info
              input(file-change='->', handler='importFileSelected(files)', style='display: none;', type='file')
              .sk-label Import Backup
          span(ng-if='isDesktopApplication()')
            | Backups are automatically created on desktop and can be managed via the "Backups" top-level menu.
          #import-password-request(ng-if='importData.requestPassword')
            form.sk-panel-form.stretch(ng-submit='submitImportPassword()')
              p Enter the account password associated with the import file.
              input.sk-input.contrast.mt-5(autofocus='true', ng-model='importData.password', placeholder='Enter File Account Password', type='password')
              .sk-button-group.stretch.sk-panel-row.form-submit
                button.sk-button.info(type='submit')
                  .sk-label Decrypt & Import
              p
                | Importing from backup will not overwrite existing data, but instead create a duplicate of any differing data.
              p
                | If you'd like to import only a selection of items instead of the whole file, please use the Batch Manager extension.
          .sk-panel-row
            .sk-spinner.small.info(ng-if='importData.loading')
    .sk-panel-footer
      .sk-panel-row
        .sk-p.left.neutral.faded {{appVersion}}
        a.sk-a.right(ng-click='formData.showLogin = false; formData.showRegister = false;', ng-if='formData.showLogin || formData.showRegister')
          | Cancel
        a.sk-a.right.danger(ng-click='destroyLocalData()', ng-if='!formData.showLogin && !formData.showRegister')
          | {{ user ? "Sign out and clear local data" : "Clear all local data" }}