{% extends "base.html" %}
{% block title %}Inregistrare — Gateway RAR AUTOPASS{% endblock %}
{% block content %}
<div class="card auth-card" style="max-width:480px;margin:40px auto;">
{% if api_key %}
  <div class="flash">Contul a fost creat. Salveaza cheia API acum — nu o vei mai putea vedea.</div>

  <div class="card" style="font-family:monospace;word-break:break-all;font-size:14px;background:#0f1115;margin:12px 0;">
    {{ api_key }}
  </div>

  <button type="button"
          data-key="{{ api_key }}"
          onclick="navigator.clipboard.writeText(this.dataset.key).then(()=>this.textContent='Copiat!')">
    Copiaza cheia
  </button>

  <p style="font-size:13px;color:var(--warn);margin-top:12px;">
    Atentie: la refresh sau la urmatoarea vizita aceasta cheie dispare.
    Recuperare posibila doar prin rotire cheie (CLI admin).
  </p>

  <div class="banner warn" style="margin-top:16px;">
    <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer;">
      <input type="checkbox" id="saved-check" style="margin-top:3px;">
      Am salvat cheia in siguranta
    </label>
  </div>

  <p id="cta-dashboard" style="display:none;margin-top:16px;">
    <a href="/">Mergi la dashboard</a> — configureaza creds RAR si pregateste importul.
    Trimiterea catre RAR porneste automat dupa activarea contului de catre admin.
  </p>
  <script>
    document.getElementById('saved-check').addEventListener('change', function() {
      document.getElementById('cta-dashboard').style.display = this.checked ? 'block' : 'none';
    });
  </script>
{% else %}
  <h2 style="margin-top:0;">Inregistrare cont nou</h2>

  {% if error %}
  <div class="banner" style="margin-bottom:12px;padding:8px 12px;">{{ error }}</div>
  {% endif %}

  <form method="post" action="/signup">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <p>
      <label>Companie <span style="color:var(--err)">*</span></label><br>
      <input type="text" name="name" value="{{ name or '' }}" required style="width:100%;">
    </p>
    <p>
      <label>CUI <span style="color:var(--muted);font-size:12px;">(optional)</span></label><br>
      <input type="text" name="cui" value="{{ cui or '' }}" style="width:100%;">
    </p>
    <p>
      <label>Email <span style="color:var(--err)">*</span></label><br>
      <input type="email" name="email" value="{{ email or '' }}" required style="width:100%;">
    </p>
    <p>
      <label>Parola <span style="color:var(--err)">*</span>
        <span style="color:var(--muted);font-size:12px;">(minim 10 caractere)</span>
      </label><br>
      <input type="password" name="parola" required style="width:100%;">
    </p>
    <button type="submit" style="width:100%;margin-top:8px;">Creeaza cont</button>
  </form>
  <p style="text-align:center;font-size:13px;margin-top:16px;">
    Ai deja cont? <a href="/login">Autentificare</a>
  </p>
{% endif %}
</div>
{% endblock %}