%div
  = render 'devise/shared/tab_single', tab_title: _('Two-Factor Authentication')
  .login-box.gl-p-5
    .login-body
      - if @user.two_factor_otp_enabled?
        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_webauthn_u2f_enabled?}" }) do |f|
          - resource_params = params[resource_name].presence || params
          = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
          %div
            = f.label _('Two-Factor Authentication code'), name: :otp_attempt
            = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
            %p.form-text.text-muted.hint= _("Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.")
            .prepend-top-20
              = f.submit _("Verify code"), class: "gl-button btn btn-confirm", data: { qa_selector: 'verify_code_button' }
      - if @user.two_factor_webauthn_u2f_enabled?
        = render "authentication/authenticate", params: params, resource: resource, resource_name: resource_name, render_remember_me: true, target_path: new_user_session_path