{% extends "base.html" %}
{% block title %}Login // Synapse-Cortex{% endblock %}
{% block bare_content %}
<div class="min-h-screen flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="text-center mb-6">
      <img src="/static/img/cortex-logo.webp" alt="Synapse-Cortex" class="h-24 w-auto mx-auto mb-3" />
      <div class="text-[10px] text-cortex-muted mt-1 tracking-widest font-display">OPERATOR AUTHENTICATION</div>
    </div>
    <div class="border border-cortex-border bg-cortex-panel rounded-md p-6 glow-blue">
      {% if error %}
      <div class="mb-4 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded">{{ error }}</div>
      {% endif %}
      <form method="post" action="/login" class="space-y-4 text-sm">
        <div>
          <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Email</label>
          <input required name="email" type="email" autofocus placeholder="you@company.com"
                 class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue focus:ring-1 focus:ring-accent-blue" />
        </div>
        <div>
          <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Password</label>
          <input required name="password" type="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
                 class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue focus:ring-1 focus:ring-accent-blue" />
        </div>
        <button type="submit"
                class="w-full bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs py-2.5 rounded hover:bg-accent-blue-bright transition">
          Authenticate
        </button>
      </form>
    </div>
    <div class="text-center text-[10px] text-cortex-muted mt-4 font-display">SYNAPSE SUITE // CORTEX ITSM MODULE // v1.0.0</div>
  </div>
</div>
{% endblock %}