<div class="min-h-screen flex items-center justify-center bg-gray-50">
  <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-md">
    <div>
      <h2 class="text-center text-3xl font-bold text-gray-900">ログイン</h2>
    </div>

    <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "mt-8 space-y-6", data: { turbo: false }}) do |f| %>
      <div class="space-y-4">
        <div>
          <%= f.label :email, class: "block text-sm font-medium text-gray-700" %>
          <%= f.email_field :email, autofocus: true, autocomplete: "email",
              class: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" %>
        </div>

        <div>
          <%= f.label :password, "パスワード", class: "block text-sm font-medium text-gray-700" %>
          <%= f.password_field :password, autocomplete: "current-password",
              class: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" %>
        </div>

        <% if devise_mapping.rememberable? %>
          <div class="flex items-center">
            <%= f.check_box :remember_me, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
            <%= f.label :remember_me, "ログイン状態を保持する", class: "ml-2 block text-sm text-gray-900" %>
          </div>
        <% end %>
      </div>

      <div class="mt-6">
        <%= f.submit "ログイン",
            class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
      </div>
    <% end %>

    <div class="mt-6 text-center text-sm">
      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>