<% content_for :title, 'Login' %>
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <%= link_to (image_tag "logo.png", class: "h-12 w-auto"), root_path, class: 'block flex justify-center' %>
    <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
      <%= t("sign_in_to_your_account") %>
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <%= render "layouts/flash" %>
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <%= form_for(User.new, url: sessions_path, html: {method: :post}) do |f| %>
        <%= hidden_field_tag "chrome-callback", params["chrome-callback"] if params["chrome-callback"] %>
        <div>
          <%=f.label :email, class: "block text-sm font-medium leading-5 text-gray-700" %>
          <div class="mt-1 rounded-md shadow-sm">
            <%= f.email_field :email, class: 'appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5', required: true %>
          </div>
        </div>

        <div class="mt-6">
          <%=f.label :password, class: 'block text-sm font-medium leading-5 text-gray-700' %>
          <div class="mt-1 rounded-md shadow-sm">
            <%=f.password_field :password, class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5", required: true %>
          </div>
        </div>

        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center">
            <%= f.check_box :remember_me, class: 'form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out' %>
            <%= f.label t("remember_me"), class: "ml-2 block text-sm leading-5 text-gray-900" %>
          </div>

          <div class="text-sm leading-5">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
              <%= t("forgot_your_password?") %>
            </a>
          </div>
        </div>

        <div class="mt-6">
          <span class="block w-full rounded-md shadow-sm">

            <%= f.button t("sign_in"), type: :submit, class: "w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out", data: {disable_with: disable_with_spinner(t("sign_in"))} %>
          </span>
        </div>
      <% end %>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm leading-5">
            <span class="px-2 bg-white text-gray-500">
              <%= t("or_continue_with") %>
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-2">
          <div>
            <span class="w-full inline-flex rounded-md shadow-sm">
              <%= link_to auth_provider_url(:google_oauth2), data: {prefetch: 'false'}, class: "w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out", type: :button do  %>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5" viewBox="0 0 16 16">
                  <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z"/>
                </svg>
              <% end %>
            </span>
          </div>

          
        </div>
        <% if false # 临时隐藏注册入口 %>
          <div class="mt-6">
            <p class="text-left text-base leading-6 font-medium text-gray-500">
              <%= t("not_have_account?") %>
              <%= link_to t("sign_up"), new_registration_path, class: "text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150" %>
            </p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
