.flex.justify-center
  .w-full.max-w-xs.md:max-w-md
    %h1.font-hairline.mb-6.text-center.text-2xl Sign Up
    = form_for(resource, as: resource_name,
               html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md"  } ,
               url: registration_path(resource_name) ) do |f|
      = render "devise/shared/error_messages", resource: resource
      .mb-4
        = f.label :email, class: "block font-bold mb-2 text-gray-700 text-sm"
        = f.email_field :email,
          autocomplete: "email",
          placeholder: "user@example.com",
          class: "appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none shadow focus:shadow-outline"
      .mb-4
        = f.label :password, class: "block font-bold mb-2 text-gray-700 text-sm"
        - if @minimum_password_length
          %small
            %em.text-gray-600
              (#{@minimum_password_length} characters minimum)
        = f.password_field :password,
          autocomplete: "new-password",
          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
      .mb-4
        = f.label :password_confirmation, class: "block font-bold mb-2 text-gray-700 text-sm"
        = f.password_field :password_confirmation,
          autocomplete: "new-password",
          class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full"
      .mt-4
        - challenge = rand(8)
        = simple_fields_for :bot do |n|
          = n.input :fudder , as: :hidden , input_html: { value: "#{challenge*2}" }
          = n.input :challenge, placeholder: "Anti bot question: #{challenge} + #{challenge + 1} == " ,
            class: " border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full"
      .my-4
        = f.submit "Sign Up",
          class: "button bg-cyan-700 hover:bg-cyan-700 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
      = render "devise/shared/links"
    = render "devise/shared/form_footer"