// Login page. Route: /login. Uses the centered `auth` layout.
// The form declares data-schema="login" — the framework injects the schema
// descriptor + the generic validator, which validates on submit/blur and writes
// messages into the [data-error] spans. The same schema guards POST /api/login.
page Login {
  layout = "auth"

  seo {
    title = "Sign in"
  }

  view {
    <form data-schema="login" method="post" action="/api/login" data-redirect="/dashboard">
      <div class="auth-stack">
        <h1>Sign in</h1>

        <div class="wire-alert wire-alert--success" data-success="Signed in! The form posted JSON and was validated server-side." hidden></div>

        <label class="auth-field">
          <span>Email address</span>
          <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
          <span class="wire-field-error" data-error="email"></span>
        </label>

        <label class="auth-field">
          <span>Password</span>
          <input type="password" name="password" autocomplete="current-password" placeholder="Password" required />
          <span class="wire-field-error" data-error="password"></span>
        </label>

        <button type="submit" class="wire-btn wire-btn--primary wire-btn--lg">Sign in</button>
        <p><a href="/">Back home</a></p>
      </div>
    </form>
  }

  style {
    form,
    .auth-stack,
    .auth-field {
      display: grid;
      gap: 0.5rem;
    }

    form,
    .auth-stack {
      gap: 1.25rem;
    }

    .auth-field input {
      min-height: 2.75rem;
      padding: 0.7rem 0.8rem;
      border: 1px solid var(--wire-color-border);
      border-radius: var(--wire-radius-md);
      background: var(--wire-color-surface);
      color: inherit;
    }
  }
}