<% include ./partials/header.ejs %>

<div
  class="min-h-screen flex items-center justify-center bg-center bg-cover bg-[url('https://plus.unsplash.com/premium_photo-1668671069358-31e503a9a4d8?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YWJzdHJhY3QlMjB5ZWxsb3d8ZW58MHx8MHx8fDA%3D')]"
>
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-lg">
    <h1 class="text-3xl text-center font-semibold text-gray-800 mb-6">
      Welcome to PicHive
    </h1>
    <form action="/login" method="post" class="space-y-4">
      <input
        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        type="text"
        name="username"
        placeholder="Username"
        required
      />
      <input
        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        type="password"
        name="password"
        placeholder="Password"
        required
      />
      <a class="text-blue-500 text-sm" href="#">Forgot password?</a>
      <button
        class="w-full py-2 px-4 bg-red-600 text-white font-semibold rounded-md hover:bg-red-700 transition duration-200"
        type="submit"
      >
        Login
      </button>
      <p class="text-xs text-center text-gray-500 mt-4">
        By continuing, you agree to PicHive's Terms of Service and acknowledge
        you've read our Privacy Policy.
      </p>
    </form>
    <p class="text-center text-sm text-gray-600 mt-6">
      Don't have an account?
      <a class="text-blue-500 font-semibold" href="/register">Sign up</a>
    </p>
  </div>
</div>

<% include ./partials/footer.ejs %>
