{{define "login-content"}}
<div class="min-h-screen flex items-center justify-center bg-slate-950">
  <div class="max-w-md w-full mx-4">
    <div class="bg-slate-800 rounded-lg border border-slate-700 p-8 shadow-xl">
      <div class="text-center mb-8">
        <div class="h-16 w-16 rounded-lg bg-slate-700 flex items-center justify-center font-bold text-2xl mx-auto mb-4">A</div>
        <h1 class="text-3xl font-bold text-white mb-2">AtlasOS</h1>
        <p class="text-slate-400">Storage Controller</p>
      </div>

      <form id="login-form" onsubmit="handleLogin(event)" class="space-y-6">
        <div>
          <label class="block text-sm font-medium text-slate-300 mb-2">Username</label>
          <input type="text" name="username" id="username" required autofocus class="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="Enter your username">
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
          <input type="password" name="password" id="password" required class="w-full px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="Enter your password">
        </div>
        <div id="login-error" class="hidden text-red-400 text-sm"></div>
        <button type="submit" class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium focus:outline-none focus:ring-2 focus:ring-blue-600">
          Sign In
        </button>
      </form>

      <div class="mt-6 text-center text-sm text-slate-400">
        <p>Default credentials: <span class="font-mono text-slate-300">admin / admin</span></p>
      </div>
    </div>
  </div>
</div>
<script>
async function handleLogin(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const errorEl = document.getElementById('login-error');
  
  errorEl.classList.add('hidden');
  
  try {
    const res = await fetch('/api/v1/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: formData.get('username'),
        password: formData.get('password')
      })
    });
    
    const data = await res.json().catch(() => null);
    
    if (res.ok && data.token) {
      // Store token in localStorage
      localStorage.setItem('atlas_token', data.token);
      
      // Store user info if available
      if (data.user) {
        localStorage.setItem('atlas_user', JSON.stringify(data.user));
      }
      
      // Redirect to dashboard or return URL
      const returnUrl = new URLSearchParams(window.location.search).get('return') || '/';
      window.location.href = returnUrl;
    } else {
      const errorMsg = (data && data.error) ? data.error : 'Login failed';
      errorEl.textContent = errorMsg;
      errorEl.classList.remove('hidden');
    }
  } catch (err) {
    errorEl.textContent = `Error: ${err.message}`;
    errorEl.classList.remove('hidden');
  }
}
</script>
{{end}}

{{define "login.html"}}
{{template "base" .}}
{{end}}