#lock-screen.sn-component
  .sk-panel
    .sk-panel-header
      .sk-panel-header-title Passcode Required
    .sk-panel-content
      .sk-panel-section
        %form.sk-panel-form.sk-panel-row{"ng-submit" => "submitPasscodeForm()"}
          .sk-panel-column.stretch
            %input.center-text.sk-input.contrast{:type => 'password',
            "ng-model" => "formData.passcode", "autofocus" => "true", "sn-autofocus" => "true", "should-focus" => "true",
            "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
            .sk-button-group.stretch.sk-panel-row.form-submit
              %button.sk-button.info{"type" => "submit"}
                .sk-label Unlock

    .sk-panel-footer
      #passcode-reset
        %a.sk-a.neutral{"ng-if" => "!formData.showRecovery", "ng-click" => "forgotPasscode()"} Forgot?

        %div{"ng-if" => "formData.showRecovery"}
          .sk-p
            If you forgot your local passcode, your only option is to clear your local data from this device
            and sign back in to your account.
          .sk-panel-row
          %a.sk-a.danger.center-text{"ng-click" => "beginDeleteData()"} Delete Local Data