// Login View

export function renderLogin() {
  return `
    <div class="login-screen">
      <div class="login-card">
        <h1>📝 SimpleNote</h1>
        <p>Enter your API token to continue</p>
        <form class="login-form" id="login-form">
          <div class="form-group">
            <input type="password" id="token-input" placeholder="API Token" autocomplete="off" required>
          </div>
          <p class="login-error" id="login-error">Invalid token. Please try again.</p>
          <button type="submit" class="btn btn-primary" style="width:100%">Login</button>
        </form>
      </div>
    </div>
  `;
}

export function initLoginHandlers(onLogin) {
  const form = document.getElementById('login-form');
  const errorEl = document.getElementById('login-error');
  
  form.onsubmit = async (e) => {
    e.preventDefault();
    errorEl.classList.remove('visible');
    const token = document.getElementById('token-input').value;
    const error = await onLogin(token);
    if (error) {
      errorEl.classList.add('visible');
    }
  };
}