{% extends "base.html" %}

{% block content %}
<style>
  body { display:flex; flex-direction:column; min-height:100vh; }
  .login-wrap {
    flex:1; display:flex; align-items:center; justify-content:center;
    background:#0d0d0d; padding:2rem;
  }
  .login-card {
    background:#111; border:1px solid #1f1f1f; border-radius:10px;
    padding:2.5rem 2rem; width:100%; max-width:380px;
  }
  .login-logo {
    display:flex; align-items:center; gap:9px; margin-bottom:6px; justify-content:center;
  }
  .login-logo-dot { width:9px; height:9px; border-radius:2px; background:#d97757; }
  .login-title {
    font-size:1.05rem; font-weight:700; letter-spacing:0.08em;
    color:#e8e6e3; font-family:'JetBrains Mono', monospace;
  }
  .login-sub {
    font-size:0.72rem; color:#4a4845; text-align:center;
    margin-bottom:2rem; letter-spacing:0.05em;
    font-family:'JetBrains Mono', monospace;
  }
  .login-label {
    display:block; font-size:0.72rem; font-weight:500;
    color:#6a6863; margin-bottom:6px; letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .login-input {
    width:100%; padding:10px 14px; background:#0d0d0d;
    border:1px solid #262626; border-radius:6px;
    color:#e8e6e3; font-size:0.875rem; margin-bottom:1.2rem;
    transition:border-color 0.2s; box-sizing:border-box;
  }
  .login-input:focus { border-color:#3a3a3a; outline:none; }
  .login-input::placeholder { color:#3a3a3a; }
  .login-btn {
    width:100%; padding:11px; background:#d4a01a; border:none;
    border-radius:6px; color:#0d0d0d; font-size:0.85rem;
    font-weight:700; letter-spacing:0.05em; cursor:pointer;
    transition:background 0.2s; margin-top:0.5rem;
  }
  .login-btn:hover { background:#e8b420; }
  .login-error {
    background:#1c0f0f; border:1px solid #3d1a1a; border-radius:6px;
    color:#c47a6e; font-size:0.78rem; padding:10px 14px;
    margin-bottom:1.2rem; text-align:center;
  }
</style>

<div class="login-wrap">
  <div class="login-card">
    <div class="login-logo">
      <div class="login-logo-dot"></div>
      <div class="login-title">CONCEPT</div>
    </div>
    <div class="login-sub">context.bolbol.tn</div>

    {% if error %}
    <div class="login-error">{{ error }}</div>
    {% endif %}

    <form action="/auth/login" method="POST">
      <label class="login-label">Identifiant</label>
      <input class="login-input" type="text" name="username"
             placeholder="Identifiant" required autocomplete="username">
      <label class="login-label">Mot de passe</label>
      <input class="login-input" type="password" name="password"
             placeholder="••••••••" required autocomplete="current-password">
      <button class="login-btn" type="submit">Connexion</button>
    </form>
  </div>
</div>

<footer class="nyora-footer" style="background:#0d0d0d; padding:1.2rem 1rem;">
  <div class="nyora-line-top"></div>
  <div class="nyora-brand">
    <span class="nyora-dot"></span>
    <span class="nyora-name">NYORA</span>
    <span class="nyora-dot"></span>
  </div>
  <div class="nyora-tag">Crafted with precision · Built for excellence</div>
</footer>
{% endblock %}