.sn-component
  .sk-panel#account-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{:placeholder => 'Email', "sn-autofocus" => 'true', "should-focus" => "true", :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email', 'spellcheck' => 'false'}
            %input.sk-input.contrast{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password', 'sn-enter' => 'submitAuthForm()'}
            %input.sk-input.contrast{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf', 'sn-enter' => 'submitAuthForm()'}
            .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
              %div.bordered-row.padded-row
                %label.sk-label Sync Server Domain
                %input.sk-input.mt-5.sk-base{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
              %label.sk-label.padded-row{"ng-if" => "formData.showLogin"}
                %input.sk-input{"type" => "checkbox", "ng-model" => "formData.strictSignin"}
                  Use strict sign in
                  %span
                    %a.info{"href" => "https://standardnotes.org/help/security", "target" => "_blank", "rel" => "noopener"} (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{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
                Stay signed in
            %label.sk-panel-row.justify-left{"ng-if" => "notesAndTagsCount() > 0"}
              .sk-panel-row
              %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
              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{:placeholder => "Enter Code", "sn-autofocus" => "true", "should-focus" => "true", :autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
          .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", "target" => "_blank", "rel" => "noopener"} Need help?

          .sk-panel-row
            .sk-panel-column
              .sk-h1.sk-bold.wrap {{user.email}}
              .sk-subtitle.subtle.normal {{server}}
            .sk-horizontal-group{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
              .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-show" => "user", "ng-click" => "openPrivilegesModal('')"}
            Manage Privileges
          %a.sk-panel-row.justify-left.condensed.success{"ng-if" => "securityUpdateAvailable", "ng-click" => "openPasswordWizard('upgrade-security')"}
            .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 an app passcode to lock the app 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{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "sn-autofocus" => "true", "should-focus" => "true"}
            %input.sk-input.contrast{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
            .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-repeat" => "option in passcodeAutoLockOptions", "ng-click" => "selectAutoLockInterval(option.value)",
                    "ng-class" => "{'boxed' : option.value == selectedAutoLockInterval}"}
                      {{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-show" => "!user", "ng-click" => "openPrivilegesModal('')"} 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{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
                Encrypted
              %label
                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
                Decrypted

          .sk-button-group.sk-panel-row.justify-left
            .sk-button.info{"ng-click" => "downloadDataArchive()"}
              .sk-label Download Backup

            %label.sk-button.info
              %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
              .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{:type => 'password', "placeholder" => "Enter File Account Password", "ng-model" => "importData.password", "autofocus" => "true"}
              .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
      %a.sk-a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"}
        Cancel
      %a.sk-a.right.danger{"ng-if" => "!formData.showLogin && !formData.showRegister", "ng-click" => "destroyLocalData()"}
        {{ user ? "Sign out and clear local data" : "Clear all local data" }}