{% extends "base.html" %}

{% block title %}Sign in · AI2Apps{% endblock %}

{% block head %}
<style>
    [hidden] { display: none !important; }
    [data-theme="dark"] body { background: #18181b !important; color: #f4f4f5; }
    [data-theme="dark"] .auth-card { background: #242428; border-color: #3f3f46; }
    [data-theme="dark"] .auth-input { background: #18181b; color: #f4f4f5; border-color: #3f3f46; }
</style>
{% endblock %}

{% block content %}
<main id="account-login" data-installation-bound="{{ 'true' if installation_bound else 'false' }}"
      class="min-h-screen flex items-center justify-center px-4 bg-neutral-50">
  <section class="auth-card w-full max-w-md rounded-3xl border border-neutral-200 bg-white p-8 shadow-xl">
    <header class="text-center mb-7">
      <img src="{{ static('logo-light.svg') }}" alt="AI2Apps" class="w-14 h-14 mx-auto mb-3">
      <h1 class="text-3xl font-extrabold tracking-tight">AI2Apps</h1>
      <p id="login-subtitle" class="text-sm text-neutral-500 mt-2"></p>
    </header>

    <div id="login-error" hidden role="alert"
         class="mb-5 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700"></div>

    <form id="account-stage" class="space-y-4">
      <div class="grid grid-cols-2 gap-2 rounded-xl bg-neutral-100 p-1">
        <button id="login-mode" type="button" class="rounded-lg py-2 text-sm font-semibold bg-white shadow-sm">Sign in</button>
        <button id="register-mode" type="button" class="rounded-lg py-2 text-sm font-semibold text-neutral-500">Create account</button>
      </div>
      <input id="display-name" hidden class="auth-input w-full rounded-xl border px-4 py-3 text-sm"
             maxlength="120" placeholder="Your name">
      <input id="email" class="auth-input w-full rounded-xl border px-4 py-3 text-sm"
             type="email" autocomplete="username" placeholder="Email" required>
      <input id="password" class="auth-input w-full rounded-xl border px-4 py-3 text-sm"
             type="password" autocomplete="current-password" minlength="12"
             placeholder="Password (12+ characters)" required>
      <button id="account-submit" class="w-full rounded-xl bg-neutral-900 py-3 text-sm font-semibold text-white disabled:opacity-50">
        Sign in
      </button>
    </form>

    <form id="verify-stage" hidden class="space-y-4">
      <p class="text-sm text-neutral-600">Enter the 8-digit verification code sent to <strong id="verify-email"></strong>.</p>
      <input id="verification-code" class="auth-input w-full rounded-xl border px-4 py-3 text-center tracking-[0.35em]"
             inputmode="numeric" pattern="[0-9]{8}" maxlength="8" placeholder="00000000" required>
      <button class="w-full rounded-xl bg-neutral-900 py-3 text-sm font-semibold text-white disabled:opacity-50">Verify email</button>
      <button id="resend-code" type="button" class="w-full text-xs text-neutral-500">Resend code</button>
    </form>

    <div id="bind-stage" hidden class="space-y-4">
      <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4">
        <h2 class="font-semibold text-amber-900">Make this account the Core user?</h2>
        <p class="mt-1 text-sm text-amber-800">This Local instance has no Core user yet. The Core user controls models, Packages, secrets and members on this device.</p>
      </div>
      <input id="device-name" class="auth-input w-full rounded-xl border px-4 py-3 text-sm"
             maxlength="120" placeholder="Device name" required>
      <button id="bind-core" class="w-full rounded-xl bg-neutral-900 py-3 text-sm font-semibold text-white disabled:opacity-50">Confirm Core binding</button>
      <button id="reset-login" class="w-full text-xs text-neutral-500">Use another account</button>
    </div>

    <p class="mt-7 text-center text-[11px] text-neutral-400">Passwords stay with AI2Apps Cloud and are never stored by this Local instance.</p>
  </section>
</main>
{% endblock %}

{% block scripts %}
<script src="{{ static('js/login.js') }}"></script>
{% endblock %}