.sn-component
  #account-panel.sk-panel
    .sk-panel-header
      .sk-panel-header-title Account
      a.sk-a.info.close-button(ng-click='self.close()') Close
    .sk-panel-content
      .sk-panel-section.sk-panel-hero(
        ng-if=`
          !self.state.user && 
          !self.state.formData.showLogin && 
          !self.state.formData.showRegister && 
          !self.state.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='self.state.formData.showLogin = true')
              .sk-label Sign In
            .sk-button.info.featured(ng-click='self.state.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=`
          self.state.formData.showLogin || 
          self.state.formData.showRegister`
        )
        .sk-panel-section-title
          | {{self.state.formData.showLogin ? "Sign In" : "Register"}}
        form.sk-panel-form(ng-submit='self.submitAuthForm()')
          .sk-panel-section
            input.sk-input.contrast(
              name='email', 
              ng-model='self.state.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='self.state.formData.user_password', 
              placeholder='Password', 
              required='', 
              sn-enter='self.submitAuthForm()', 
              type='password'
              )
            input.sk-input.contrast(
              name='password_conf', 
              ng-if='self.state.formData.showRegister', 
              ng-model='self.state.formData.password_conf', 
              placeholder='Confirm Password', 
              required='', 
              sn-enter='self.submitAuthForm()', 
              type='password'
              )
            .sk-panel-row
            a.sk-panel-row.sk-bold(
              ng-click=`
                self.state.formData.showAdvanced = !self.state.formData.showAdvanced
                `
              )
              | Advanced Options
          .sk-notification.unpadded.contrast.advanced-options.sk-panel-row(
            ng-if='self.state.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='self.state.formData.url', 
                  placeholder='Server URL', 
                  required='', 
                  type='text'
                  )
              label.sk-label.padded-row.sk-panel-row.justify-left(
                ng-if='self.state.formData.showLogin'
                )
                .sk-horizontal-group.tight
                  input.sk-input(
                    ng-model='self.state.formData.strictSignin', 
                    type='checkbox'
                    )
                  p.sk-p 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='!self.state.formData.authenticating')
            .sk-button-group.stretch
              .sk-button.info.featured(
                ng-click='self.submitAuthForm()', 
                ng-disabled='self.state.formData.authenticating'
                )
                .sk-label {{self.state.formData.showLogin ? "Sign In" : "Register"}}
          .sk-notification.neutral(ng-if='self.state.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='self.state.formData.status')
            .sk-horizontal-group
              .sk-spinner.small.neutral
              .sk-label {{self.state.formData.status}}
          .sk-panel-section.no-bottom-pad(ng-if='!self.state.formData.authenticating')
            label.sk-panel-row.justify-left
              .sk-horizontal-group.tight
                input(
                  ng-false-value='true', 
                  ng-model='self.state.formData.ephemeral', 
                  ng-true-value='false', 
                  type='checkbox'
                  )
                p.sk-p Stay signed in
            label.sk-panel-row.justify-left(ng-if='self.notesAndTagsCount() > 0')
              .sk-panel-row
              input(
                ng-bind='true', 
                ng-change='self.mergeLocalChanged()', 
                ng-model='self.state.formData.mergeLocal', 
                type='checkbox'
                )
              | Merge local data ({{self.notesAndTagsCount()}} notes and tags)
      .sk-panel-section(ng-if='self.state.formData.mfa')
        form.sk-panel-form(ng-submit='self.submitMfaForm()')
          .sk-p.sk-panel-row {{self.state.formData.mfa.message}}
          .sk-panel-row
            input.sk-input.contrast(
              autofocus='true', 
              name='mfa', 
              ng-model='self.state.formData.userMfaCode', 
              placeholder='Enter Code', 
              required='', 
              should-focus='true', 
              sn-autofocus='true'
              )
          .sk-button-group.stretch.sk-panel-row.form-submit(
            ng-if='!self.state.formData.status'
            )
            button.sk-button.info.featured(type='submit')
              .sk-label Sign In
        .sk-panel-section.no-bottom-pad(ng-if='self.state.formData.status')
          .sk-panel-row
          .sk-panel-row
          .sk-horizontal-group
            .sk-spinner.small.neutral
            .sk-label {{self.state.formData.status}}
      div(
        ng-if=`
          !self.state.formData.showLogin && 
          !self.state.formData.showRegister && 
          !self.state.formData.mfa`
        )
        .sk-panel-section(ng-if='self.state.user')
          .sk-notification.danger(ng-if='self.syncStatus.error')
            .sk-notification-title Sync Unreachable
            .sk-notification-text
              | Hmm...we can't seem to sync your account. 
              | The reason: {{self.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 {{self.state.user.email}}
              .sk-subtitle.subtle.normal {{self.state.server}}
            .sk-horizontal-group(
              delay='1000', 
              delay-hide='true', 
              show='self.syncStatus.syncOpInProgress || self.syncStatus.needsMoreSync'
              )
              .sk-spinner.small.info
              .sk-sublabel
                | {{"Syncing" + (self.syncStatus.total > 0 ? ":" : "")}}
                span(
                  ng-if='self.syncStatus.total > 0'
                  ) {{self.syncStatus.current}}/{{self.syncStatus.total}}
          .sk-panel-row
          a.sk-a.info.sk-panel-row.condensed(
            ng-click="self.openPasswordWizard()"
            )
            | Change Password
          a.sk-a.info.sk-panel-row.condensed(
            ng-click="self.openPrivilegesModal('')", 
            ng-show='self.state.user'
            )
            | Manage Privileges
        .sk-panel-section
          .sk-panel-section-title Encryption
          .sk-panel-section-subtitle.info(ng-if='self.state.encryptionEnabled')
            | {{self.encryptionStatusForNotes()}}
          p.sk-p
            | {{self.state.encryptionStatusString}}
        .sk-panel-section
          .sk-panel-section-title Passcode Lock
          div(ng-if='!self.state.hasPasscode')
            div(ng-if='self.state.canAddPasscode')
              .sk-panel-row(ng-if='!self.state.formData.showPasscodeForm')
                .sk-button.info(
                  ng-click='self.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='!self.state.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='self.state.formData.showPasscodeForm', 
            ng-submit='self.submitPasscodeForm()'
            )
            .sk-panel-row
            input.sk-input.contrast(
              ng-model='self.state.formData.passcode', 
              placeholder='Passcode', 
              should-focus='true', 
              sn-autofocus='true', 
              type='password'
              )
            input.sk-input.contrast(
              ng-model='self.state.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='self.state.formData.showPasscodeForm = false'
              ) Cancel
          div(ng-if='self.state.hasPasscode && !self.state.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 == self.state.selectedAutoLockInterval
                        }`, 
                      ng-click='self.selectAutoLockInterval(option.value)', 
                      ng-repeat='option in self.state.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="self.openPrivilegesModal('')", 
                  ng-show='!self.state.user'
                  ) Manage Privileges
                a.sk-a.info.sk-panel-row.condensed(
                  ng-click='self.changePasscodePressed()'
                  ) Change Passcode
                a.sk-a.danger.sk-panel-row.condensed(
                  ng-click='self.removePasscodePressed()'
                  ) Remove Passcode
        .sk-panel-section(ng-if='!self.state.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='self.state.encryptionEnabled')
            .sk-input-group
              label.sk-horizontal-group.tight
                input(
                  ng-change='self.state.mutable.backupEncrypted = true', 
                  ng-model='self.state.mutable.backupEncrypted', 
                  ng-value='true', 
                  type='radio'
                  )
                p.sk-p Encrypted
              label.sk-horizontal-group.tight
                input(
                  ng-change='self.state.mutable.backupEncrypted = false', 
                  ng-model='self.state.mutable.backupEncrypted', 
                  ng-value='false', 
                  type='radio'
                  )
                p.sk-p Decrypted
          .sk-panel-row
          .sk-button-group.sk-panel-row.justify-left
            .sk-button.info(ng-click='self.downloadDataArchive()')
              .sk-label Download Backup
            label.sk-button.info
              input(
                file-change='->', 
                handler='self.importFileSelected(files)', 
                style='display: none;', 
                type='file'
                )
              .sk-label Import Backup
          span(ng-if='self.isDesktopApplication()')
            | Backups are automatically created on desktop and can be managed 
            | via the "Backups" top-level menu.
          #import-password-request(ng-if='self.state.importData.requestPassword')
            form.sk-panel-form.stretch(ng-submit='self.submitImportPassword()')
              p Enter the account password associated with the import file.
              input.sk-input.contrast.mt-5(
                autofocus='true', 
                ng-model='self.state.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='self.state.importData.loading')
    .sk-panel-footer
      .sk-panel-row
        .sk-p.left.neutral.faded {{self.state.appVersion}}
        a.sk-a.right(
          ng-click='self.hidePasswordForm()',
          ng-if='self.state.formData.showLogin || self.state.formData.showRegister'
          )
          | Cancel
        a.sk-a.right.danger(
          ng-click='self.destroyLocalData()', 
          ng-if=`
              !self.state.formData.showLogin && 
              !self.state.formData.showRegister`
            )
          | {{ self.state.user ? "Sign out and clear local data" : "Clear all local data" }}