{% extends 'base.html' %}
{% block content %}

<div class="flex  justify-center  py-8">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
    <h1 class="text-2xl font-bold text-center text-gray-800">Secure Access</h1>
    <form id="login-form" class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
      <input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
      <input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
    </div>
    <button type="submit" class="w-full bg-blue-500 text-blue-100 py-2 rounded-lg login-button">Sign In</button>
    <p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
  </form>
  </div>
</div>

<!-- Firebase App (the core Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-app-compat.js"></script>

<!-- Firebase Auth -->
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>

<script>
  // Initialize Firebase configuration from template
  window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
  
  // Initialize Firebase app and auth
  const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
  const auth = firebase.auth();

  // Get form and input elements
  const form = document.getElementById('login-form');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const err = document.getElementById('error');

  // Handle form submission
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    err.classList.add('hidden');
    try {
      const cred = await auth.signInWithEmailAndPassword(email.value, password.value);
      const idToken = await cred.user.getIdToken();
      const res = await fetch('/session_login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ idToken })
      });
      if(!res.ok){
        throw new Error('Session exchange failed');
      }
      window.location.href = '/';
    } catch (e) {
      err.textContent = e.message || 'Authentication failed';
      err.classList.remove('hidden');
    }
  });
</script>

{% endblock %}