{% 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;">Creează cont nou</h2>

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

  {# Format aliniat la formularul de inregistrare din landing (#inregistrare): aceleasi campuri,
     etichete, placeholder-uri si stil. Valorile `plan` = coduri tier (free/standard/pro/premium),
     normalizate server-side. #}
  <form method="post" action="/signup">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label style="display:block;margin-bottom:14px;">
      <span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--muted);">Companie</span>
      <input type="text" name="name" value="{{ name or '' }}" required placeholder="SC Service Auto SRL"
             style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--ink);font:400 14px var(--font-ui);outline:none;">
    </label>
    <label style="display:block;margin-bottom:14px;">
      <span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--muted);">CUI</span>
      <input type="text" name="cui" value="{{ cui or '' }}" required placeholder="RO12345678"
             style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--ink);font:400 14px var(--font-mono);outline:none;">
    </label>
    <label style="display:block;margin-bottom:14px;">
      <span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--muted);">Email</span>
      <input type="email" name="email" value="{{ email or '' }}" required placeholder="nume@service.ro"
             style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--ink);font:400 14px var(--font-ui);outline:none;">
    </label>
    <label style="display:block;margin-bottom:14px;">
      <span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--muted);">Parolă</span>
      <input type="password" name="parola" required minlength="10" placeholder="Minim 10 caractere"
             style="width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--ink);font:400 14px var(--font-ui);outline:none;">
    </label>
    <label style="display:block;margin-bottom:16px;">
      <span style="display:block;margin-bottom:6px;font:500 13px var(--font-ui);color:var(--muted);">Pachet ales</span>
      <select name="plan"
              style="width:100%;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card2);color:var(--ink);font:400 14px var(--font-ui);outline:none;cursor:pointer;">
        <option value="free"{% if not plan or plan == 'free' %} selected{% endif %}>Gratuit — 0 lei/lună</option>
        <option value="standard"{% if plan == 'standard' %} selected{% endif %}>Standard — 49 lei/lună</option>
        <option value="pro"{% if plan == 'pro' %} selected{% endif %}>Pro — 59 lei/lună</option>
        <option value="premium"{% if plan == 'premium' %} selected{% endif %}>Premium — la cerere</option>
      </select>
    </label>
    <label style="display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;font:400 13px/1.5 var(--font-ui);color:var(--muted);cursor:pointer;">
      <input type="checkbox" name="consent" value="1" required style="margin-top:2px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;">
      Sunt de acord cu Termenii și cu prelucrarea datelor conform politicii de confidențialitate (GDPR).
    </label>
    <button type="submit"
            style="width:100%;height:48px;border-radius:6px;background:#1F9D5C;border:1px solid #1F9D5C;color:#fff;font:700 15px var(--font-ui);cursor:pointer;">Creează cont gratuit</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 %}