{% extends "base.html" %}
{% block title %}Sign in — {{ app_name }}{% endblock %}
{% block body_class %}page-auth{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="form-card">
    <div style="margin-bottom:1.25rem">
      <div class="brand-name" style="font-size:1.35rem">OneOpen</div>
      <p class="muted" style="margin-top:.25rem">Sign in to ML Studio</p>
    </div>
    <div class="form-group">
      <label for="login-email">Email</label>
      <input type="email" id="login-email" placeholder="admin@localhost" autocomplete="username">
    </div>
    <div class="form-group">
      <label for="login-password">Password</label>
      <input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password">
    </div>
    <p id="login-error" class="field-hint" style="color:var(--danger);min-height:1.2em" role="alert"></p>
    <div class="form-actions" style="justify-content:flex-start;gap:.5rem;margin-top:1rem">
      <button class="btn btn-primary" id="login-btn" type="button">Sign in</button>
      <a class="btn btn-ghost" href="/register">Create account</a>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('login-btn')?.addEventListener('click', async () => {
  const err = document.getElementById('login-error');
  err.textContent = '';
  try {
    await api('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: document.getElementById('login-email').value.trim(),
        password: document.getElementById('login-password').value,
      }),
    });
    location.href = '/';
  } catch (e) {
    err.textContent = e.message || 'Login failed';
  }
});
document.getElementById('login-password')?.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') document.getElementById('login-btn')?.click();
});
</script>
{% endblock %}