.panel.panel-default.panel-right.account-data-menu
  .panel-body.large-padding
    %div{"ng-if" => "!user"}
      %p Enter your <a href="https://standardnotes.org" target="_blank">Standard File</a> account information. You can also register for free using the default server address.
      .small-v-space

      %form.account-form.mt-5{'name' => "loginForm"}
        %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
        %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
        %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}

        %div{"ng-if" => "!formData.status"}
          %button.btn.dark-button.half-button{"ng-click" => "loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
            %span Sign In
          %button.btn.dark-button.half-button{"ng-click" => "submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
            %span Register
          %br
          .block{"style" => "margin-top: 10px; font-size: 14px; font-weight: bold; text-align: center;"}
            %a.btn{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten.

      %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}}

      %div{"ng-if" => "showResetForm"}
        %p{"style" => "font-size: 13px; text-align: center;"}
          Because notes are locally encrypted using a secret key derived from your password, there's no way to decrypt these notes if you forget your password.
          For this reason, Standard Notes cannot offer a password reset option. You <strong>must</strong> make sure to store or remember your password.

    %div{"ng-if" => "user"}
      %h2 {{user.email}}
      %p {{server}}
      %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
      %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
        %label.block
          Encryption key:
          .wrap.normal.mt-1 {{encryptionKey()}}
        %label.block.mt-5.mb-0
          Server password:
          .wrap.normal.mt-1 {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}}

      %div.bold.mt-10.blue{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress", "delay" => "1000"}
        .spinner.inline.mr-5.blue
        Syncing
        %span{"ng-if" => "syncStatus.total > 0"}: {{syncStatus.current}}/{{syncStatus.total}}
      %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}

      .medium-v-space

      %h4 Local Encryption
      %p Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes.
      %div.mt-5
        %label Status:
        {{encryptionStatusForNotes()}}

    .mt-25{"ng-if" => "!importData.loading"}
      %h4 Data Archives
      .mt-5{"ng-if" => "user"}
        %label.normal.inline{"ng-if" => "user"}
          %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
          Encrypted
        %label.normal.inline
          %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
          Decrypted

      %a.block{"ng-click" => "downloadDataArchive()"} Download Data Archive

      %label.block.mt-5
        %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
        .fake-link Import Data from Archive

      %div{"ng-if" => "importData.requestPassword"}
        Enter the account password associated with the import file.
        %input{"type" => "text", "ng-model" => "importData.password"}
        %button{"ng-click" => "submitImportPassword()"} Decrypt & Import

    .spinner.mt-10{"ng-if" => "importData.loading"}

    %a.block.mt-25.red{"ng-click" => "destroyLocalData()"} Destroy all local data