{% extends 'base.html.twig' %}

{% block title %}Admin — Connexion{% endblock %}

{% block stylesheets %}
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #0d1117; --surface: #161b22; --border: #30363d;
    --text: #c9d1d9; --muted: #8b949e; --accent: #f0883e;
    --accent2: #58a6ff; --danger: #f85149;
  }
  body {
    background: var(--bg) url("{{ asset('images/BackgroundSpace.png') }}") center center / cover fixed;
    color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
  }
  .login-card {
    background: rgba(22,27,34,.92); border: 1px solid var(--border);
    border-radius: 12px; padding: 40px 48px; width: 100%; max-width: 380px;
    backdrop-filter: blur(6px);
  }
  h1 { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
  .subtitle { font-size: .82rem; color: var(--muted); margin-bottom: 28px; }
  .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
  label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 9px 12px; color: var(--text); font-size: .95rem; outline: none;
    transition: border-color .15s; width: 100%;
  }
  input:focus { border-color: var(--accent2); }
  .btn {
    width: 100%; padding: 10px; border-radius: 6px; border: none; cursor: pointer;
    background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
    margin-top: 8px; transition: opacity .15s;
  }
  .btn:hover { opacity: .85; }
  .error {
    background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.3);
    color: var(--danger); border-radius: 6px; padding: 10px 14px;
    font-size: .85rem; margin-bottom: 18px;
  }
</style>
{% endblock %}

{% block body %}
<div class="login-card">
  <h1>CSI World</h1>
  <p class="subtitle">Espace administration</p>

  {% if error %}
    <div class="error">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  {% endif %}

  <form method="post" action="{{ path('admin_login') }}">
    <div class="field">
      <label for="username">Identifiant</label>
      <input type="text" id="username" name="username" value="{{ last_username }}" autocomplete="username" autofocus>
    </div>
    <div class="field">
      <label for="password">Mot de passe</label>
      <input type="password" id="password" name="password" autocomplete="current-password">
    </div>
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
    <button type="submit" class="btn">Se connecter</button>
  </form>
</div>
{% endblock %}