---
import SiteLayout from '../../components/SiteLayout.astro';

let error = '';
if (Astro.request.method === 'POST') {
  try {
    const data = await Astro.request.formData();
    const username = data.get('username');
    const password = data.get('password');
    
    // Simple client-side auth - real auth happens in the API
    if (username === 'admin' && password === 'password') {
      // Store authentication in a cookie or localStorage in a real app
      return Astro.redirect('/admin');
    } else {
      error = 'Invalid username or password';
    }
  } catch (e) {
    error = 'An error occurred during login';
  }
}
---

<SiteLayout title="Admin Login">
  <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-6 text-center">Content Admin Login</h1>
    
    {error && <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>}
    
    <form method="POST" class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
        <input type="text" id="username" name="username" required
          class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
      </div>
      
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
        <input type="password" id="password" name="password" required
          class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
      </div>
      
      <button type="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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        Sign in
      </button>
    </form>
  </div>
</SiteLayout>