{% extends "admin/base.html" %}

{% block title %}Sign in — cmdop admin{% endblock %}

{% block content %}
{# Plan 48 — Vercel-style login. Note: base.html sets <main> max-w-[1400px],
   so we use fixed inset-0 + flex to break out and center on the viewport. #}
<div class="fixed inset-0 flex items-center justify-center px-4 bg-black">
  <div class="w-full max-w-[360px]">
    {% from 'admin/components/_logo.html' import cmdop_logo %}
    <div class="text-center mb-7">
      <div class="inline-flex items-center justify-center w-10 h-10 mx-auto mb-4">
        {{ cmdop_logo('w-9 h-9 text-ink-100') }}
      </div>
      <h1 class="text-[18px] font-semibold text-ink-100 tracking-tight">Admin sign in</h1>
      <p class="text-[13px] text-ink-500 mt-1">Operator-only. Users sign in via <code class="text-ink-400">cmdop login</code>.</p>
    </div>

    {# No server-admin yet — operator must set CMDOP_ADMIN_PASSWORD #}
    {% if needs_bootstrap %}
    <div class="mb-5 p-3.5 rounded-lg border border-amber-700/40 bg-amber-900/10">
      <div class="flex items-start gap-3">
        <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-400 mt-0.5 shrink-0"></i>
        <div class="min-w-0">
          <p class="text-[13px] font-medium text-amber-200">No admin yet</p>
          <p class="text-[12px] text-amber-400/80 mt-1">Set the admin credentials in the relay's environment and restart:</p>
          <code class="block mt-2 px-2 py-1.5 rounded bg-black/40 text-[11px] text-amber-300 font-mono select-all whitespace-nowrap overflow-x-auto">
            CMDOP_ADMIN_EMAIL=you@example.com CMDOP_ADMIN_PASSWORD=…
          </code>
        </div>
      </div>
    </div>
    {% endif %}

    {% if error %}
    <div class="mb-4 p-3 rounded-lg border border-red-700/40 bg-red-900/10 text-[12px] text-red-300">
      {{ error }}
    </div>
    {% endif %}

    {# Dev quick-login selector — only rendered when dev_auth_allowed (dev/oss). #}
    {% if is_dev and demo_users %}
    <div class="mb-5 space-y-1.5">
      <label class="block text-[11px] text-ink-500 uppercase tracking-wider font-medium">Dev login</label>
      <select id="dev-role-select" onchange="fillDevCredentials(this)"
              class="w-full px-3 py-2 bg-ink-950 border border-white/[0.08] hover:border-white/[0.16] text-ink-200 text-[13px] rounded-md focus:outline-none focus:border-cmdop-500 transition-colors">
        <option value="">Select demo user…</option>
        {% for u in demo_users %}
        <option value="{{ u.email }}" data-password="{{ u.password }}">{{ u.label }} ({{ u.role }})</option>
        {% endfor %}
      </select>
      <p class="text-[11px] text-ink-600">Only <code class="text-ink-500">admin@demo.com</code> can sign into the admin panel.</p>
    </div>
    {% endif %}

    <form id="login-form" class="space-y-3" method="post" action="/admin/login">
      <div>
        <label for="email" class="block text-[12px] text-ink-400 mb-1.5">Email</label>
        <input id="email" name="email" type="email" required autocomplete="email" placeholder="you@example.com"
               class="w-full px-3 py-2 bg-ink-950 border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 text-ink-100 text-[13px] rounded-md focus:outline-none transition-colors font-mono" />
      </div>
      <div>
        <label for="password" class="block text-[12px] text-ink-400 mb-1.5">Password</label>
        <input id="password" name="password" type="password" required autocomplete="current-password" placeholder="••••••••"
               class="w-full px-3 py-2 bg-ink-950 border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 text-ink-100 text-[13px] rounded-md focus:outline-none transition-colors font-mono" />
      </div>

      <button type="submit"
              class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md transition-colors mt-2">
        Sign in
      </button>
    </form>

    <p class="text-center text-[11px] text-ink-600 mt-6 font-mono">
      cmdop {{ version }}
    </p>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const lastEmail = localStorage.getItem('last_login_email');
  if (lastEmail) document.getElementById('email').value = lastEmail;
  document.getElementById('login-form').addEventListener('submit', function() {
    localStorage.setItem('last_login_email', document.getElementById('email').value);
  });
});

function fillDevCredentials(select) {
  if (!select.value) return;
  const opt = select.options[select.selectedIndex];
  document.getElementById('email').value = select.value;
  document.getElementById('password').value = opt.dataset.password || '';
  document.getElementById('login-form').submit();
}
</script>
{% endblock %}