{% extends "base.html" %}
{% block title %}Sign in — SimpleAudit Studio{% endblock %}
{% block auth_content %}
<div class="w-full max-w-md">
    <div class="text-center mb-8">
      {% load static %}
      <a href="/" class="block group">
        <img src="{% static 'logo.png' %}" alt="SimpleAudit" class="w-20 h-20 mx-auto mb-4">
        <h1 class="text-3xl font-bold text-gray-100 group-hover:text-white transition-colors">SimpleAudit Studio</h1>
      </a>
      <p class="text-sm text-gray-500 mt-2">Reproducible AI Model Auditing</p>
    </div>

    {# ── Primary: WorkOS email code (shown only when configured) ── #}
    {% if workos_enabled %}
    <style>
      @keyframes glow-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(108, 140, 255, 0.4); }
        50% { box-shadow: 0 0 20px 4px rgba(108, 140, 255, 0.6); }
      }
      .glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
    </style>
    <a href="{% url 'workos_login' %}"
       class="glow-pulse flex flex-col items-center justify-center gap-1 w-full px-6 py-4 rounded-xl bg-accent text-white hover:bg-accent-hover transition-colors">
      <span class="flex items-center justify-center gap-3 text-base font-semibold">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        Continue with email code
      </span>
      <span class="text-xs text-white/70">No account needed — we'll create one automatically</span>
    </a>
    <div class="flex items-center gap-4 my-5">
      <div class="h-px flex-1 bg-gray-800"></div>
      <span class="text-xs text-gray-500 uppercase tracking-wider">or</span>
      <div class="h-px flex-1 bg-gray-800"></div>
    </div>
    {% endif %}

    {# ── Demo mode banner ── #}
    {% if demo_mode %}
    <div class="mb-4 flex items-start gap-3 rounded-xl border border-accent/30 bg-accent/10 px-4 py-3">
      <svg class="mt-0.5 w-5 h-5 shrink-0 text-accent" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <div class="text-sm text-gray-300">
        <span class="font-semibold text-white">Demo environment.</span>
        Credentials are prefilled — just click <span class="font-medium text-white">Sign in</span>.
      </div>
    </div>
    {% endif %}

    {# ── Secondary: username/password (always available) ── #}
    <form method="post" class="bg-surface-raised rounded-2xl border border-gray-800 p-8 space-y-5 shadow-xl">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.GET.next|default:'' }}">
      <h2 class="text-base font-semibold text-gray-200">Sign in with password</h2>
      {% if form.non_field_errors %}
        <div class="text-sm text-red-400 bg-red-900/30 rounded-lg px-3 py-2">{{ form.non_field_errors.0 }}</div>
      {% endif %}
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1.5 uppercase tracking-wide">Username</label>
        <input type="text" name="username" required autocomplete="username" value="{{ demo_username|default:'' }}"
               class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"
               placeholder="your-name">
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1.5 uppercase tracking-wide">Password</label>
        <input type="password" name="password" required autocomplete="current-password" value="{{ demo_password|default:'' }}"
               class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"
               placeholder="••••••••">
      </div>
      <button type="submit" class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-semibold text-gray-200 hover:bg-gray-800 hover:border-gray-600 transition-colors">
        Sign in
      </button>
    </form>

    <p class="text-center text-sm text-gray-500 mt-5">
      No account? <a href="{% url 'register' %}" class="text-accent hover:underline">Register</a>
    </p>
</div>
{% endblock %}