{% extends 'base.html.twig' %}
{% block title %}Compte activé — CSI World{% endblock %}

{% block body %}
<main style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px">
  <div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:36px 40px;width:100%;max-width:480px">
    <div style="font-size:2rem;margin-bottom:12px">✅</div>
    <h1 style="margin:0 0 6px;font-size:1.3rem;color:var(--text)">Compte activé !</h1>
    <p style="margin:0 0 24px;color:var(--muted);font-size:.9rem">Ton adresse e-mail a été confirmée. Voici ton token unique :</p>

    <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:20px 22px">
      <p style="margin:0 0 10px;font-size:.83rem;color:var(--muted);line-height:1.5">
        Le CSI Launcher peut l'installer automatiquement. Tu peux aussi le copier manuellement dans <code>Token.ini</code> à la racine de chaque jeu.
      </p>
      <div id="tokenVal" style="font-family:monospace;font-size:.95rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 14px;color:var(--text);word-break:break-all;user-select:all;margin-bottom:12px">{{ token }}</div>
      <button onclick="copyToken()" style="background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.82rem;padding:6px 14px;cursor:pointer" id="copyBtn">Copier</button>
      <p style="margin:12px 0 0;font-size:.78rem;color:var(--accent);border-top:1px solid var(--border);padding-top:10px">Ne partage pas ce token — il identifie ton compte de manière unique.</p>
    </div>

    <div style="margin-top:22px;text-align:center">
      <a href="{{ path('player_login') }}" style="color:var(--accent2);font-size:.88rem;text-decoration:none">Se connecter →</a>
    </div>
  </div>
</main>
<script>
function copyToken() {
  navigator.clipboard.writeText(document.getElementById('tokenVal').textContent.trim());
  const btn = document.getElementById('copyBtn');
  btn.textContent = 'Copié !';
  setTimeout(() => btn.textContent = 'Copier', 2000);
}
</script>
{% endblock %}