{# templates/security/register.html.twig (adapte le chemin si besoin) #}
{% extends 'Application/' ~ settings.get('theme') ~ '/base.html.twig' %}

{% block title %}{{ 'Sign-up'|trans }}{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .authCard .head{ align-items:center; }
    .authCard .tabs{ justify-content:flex-end; }
    .authWrap{ padding: 12px 14px 14px; }

    .authPanels{ display:block; }
    .authPanel{ display:none; }
    .authPanel.isActive{ display:block; }

    .authForm{ display:grid; gap: 12px; }
    .authGrid{ display:grid; gap: 10px; }
    .field{ display:grid; gap: 6px; }

    .field label{
      font-size: 12px;
      color: var(--muted2);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .authInput,
    .authForm input[type="text"],
    .authForm input[type="email"],
    .authForm input[type="password"],
    .authForm select{
      width: 100%;
      padding: 10px 10px;
      background: var(--panel2);
      color: var(--text);
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 2px var(--line) inset, 3px 3px 0 rgba(0,0,0,1);
      border-radius: var(--r);
      font-family: inherit;
      outline: none;
    }

    .authForm input:focus,
    .authForm select:focus{
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .authActions{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
    .passRow{ display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:end; }
    .passRow .btn{ padding: 10px 12px; }

    .checkRow{ display:flex; gap: 10px; align-items:flex-start; }
    .checkRow input{ margin-top: 3px; }

    .authHint{ margin-top: 10px; font-size: 12px; color: var(--muted2); line-height: 1.4; }

    .formErrors{ font-size: 12px; color: var(--bad); }
    .formErrors ul{ margin: 0; padding-left: 18px; }
    .helpText{ font-size: 12px; color: var(--muted2); line-height: 1.35; }

    @media (max-width: 680px){
      .passRow{ grid-template-columns: 1fr; }
    }
  </style>
{% endblock %}

{% block body %}
  <section class="frame card authCard" id="account">
    <div class="head">
      <div>
        <h2>{{ 'Compte & support'|trans }}</h2>
        <p>{{ 'Connexion / Inscription'|trans }}</p>
      </div>

      <div class="tabs" role="tablist" aria-label="Compte">
        <button class="tab" type="button" data-auth-tab="login">{{ 'Sign-in'|trans }}</button>
        <button class="tab active" type="button" data-auth-tab="register">{{ 'Sign-up'|trans }}</button>
      </div>
    </div>

    <div class="authWrap">
      {# Flash messages #}
      {% for flashError in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
      {% endfor %}

      {% for message in app.flashes('success') %}
        <div class="alert alert-success text-dark">{{ message }}</div>
      {% endfor %}

      {% for message in app.flashes('error') %}
        <div class="alert alert-danger text-dark">{{ message }}</div>
      {% endfor %}

      {% if registrationForm is defined %}
        <div class="authPanels" data-auth-panels>
          {# REGISTER #}
          <div class="authPanel isActive" data-auth-panel="register">
            {{ form_start(registrationForm, { attr: { class: 'authForm', novalidate: 'novalidate' } }) }}

              <div class="formErrors">{{ form_errors(registrationForm) }}</div>

              <div class="authGrid">
                <div class="field">
                  {{ form_label(registrationForm.username, 'Nom de compte'|trans) }}
                  {{ form_widget(registrationForm.username, { attr: { class: 'authInput', autocomplete: 'username' } }) }}
                  <div class="formErrors">{{ form_errors(registrationForm.username) }}</div>
                </div>

                <div class="field">
                  {{ form_label(registrationForm.email, 'Adresse e-mail'|trans) }}
                  {{ form_widget(registrationForm.email, { attr: { class: 'authInput', autocomplete: 'email' } }) }}
                  <div class="formErrors">{{ form_errors(registrationForm.email) }}</div>
                </div>

                <div class="field">
                  {{ form_label(registrationForm.plainPassword, 'Mot de passe'|trans) }}
                  <div class="passRow">
                    {{ form_widget(registrationForm.plainPassword, { attr: { class: 'authInput', autocomplete: 'new-password' } }) }}
                    <button class="btn ghost" type="button" data-toggle-pass>{{ 'Voir'|trans }}</button>
                  </div>
                  <div class="formErrors">{{ form_errors(registrationForm.plainPassword) }}</div>
                </div>

                {% if registrationForm.ref is defined %}
                  <div class="field">
                    {{ form_label(registrationForm.ref, 'Referral code (optionnal)'|trans) }}
                    {{ form_widget(registrationForm.ref, { attr: { class: 'authInput' } }) }}
                    <div class="formErrors">{{ form_errors(registrationForm.ref) }}</div>
                  </div>
                {% endif %}

                {% if registrationForm.agreeTerms is defined %}
                  <div class="field">
                    <div class="checkRow">
                      {{ form_widget(registrationForm.agreeTerms) }}
                      <div>
                        {{ form_label(registrationForm.agreeTerms, 'I accept the User Agreements'|trans) }}
                        <div class="formErrors">{{ form_errors(registrationForm.agreeTerms) }}</div>
                      </div>
                    </div>
                  </div>
                {% endif %}
              </div>

              <div class="authActions">
                <button class="btn primary" name="register_validation" type="submit">
                  {{ 'register_register_button'|trans }}
                </button>
                <button class="btn" type="button" data-auth-tab="login">{{ 'Sign-in'|trans }}</button>
              </div>

              <div class="authHint">
                {{ 'En créant un compte, vous pourrez accéder au CashShop, tickets support, et bonus de saison.'|trans }}
              </div>

            {{ form_end(registrationForm) }}
          </div>

          {# LOGIN (sur la même page) #}
          <div class="authPanel" data-auth-panel="login">
            {% set last = last_username|default('') %}
            {% set err = error|default(null) %}

            {% if err %}
              <div class="alert alert-danger" role="alert">
                {{ err.messageKey|trans(err.messageData, 'security') }}
              </div>
            {% endif %}

            {# IMPORTANT : adapte name="username" si ton authenticator attend "email" #}
            <form class="authForm" method="post" action="{{ path('app_login') }}" novalidate>
              <div class="authGrid">
                <div class="field">
                  <label for="auth_login">{{ 'Identifiant'|trans }}</label>
                  <input class="authInput" id="auth_login" name="username" value="{{ last }}" autocomplete="username" required />
                  <div class="helpText">{{ 'Nom de compte ou e-mail selon votre configuration.'|trans }}</div>
                </div>

                <div class="field">
                  <label for="auth_pass">{{ 'Mot de passe'|trans }}</label>
                  <div class="passRow">
                    <input class="authInput" id="auth_pass" type="password" name="password" autocomplete="current-password" required />
                    <button class="btn ghost" type="button" data-toggle-pass>{{ 'Voir'|trans }}</button>
                  </div>
                </div>

                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <div class="authActions" style="justify-content:space-between;">
                  <label class="checkRow" style="cursor:pointer;">
                    <input type="checkbox" name="_remember_me" />
                    <span>{{ 'Se souvenir de moi'|trans }}</span>
                  </label>

                  {# Remplace “#” par ta route reset-password si tu en as une #}
                  <a class="btn ghost" href="#">{{ 'Mot de passe oublié'|trans }}</a>
                </div>
              </div>

              <div class="authActions">
                <button class="btn primary" type="submit">{{ 'Sign-in'|trans }}</button>
                <button class="btn" type="button" data-auth-tab="register">{{ 'Sign-up'|trans }}</button>
              </div>
            </form>
          </div>
        </div>
      {% else %}
        <div class="alert alert-warning text-dark">
          {{ 'register_offline'|trans }}
        </div>
      {% endif %}
    </div>
  </section>

  <script>
    (function(){
      const root = document.querySelector('[data-auth-panels]');
      if (!root) return;

      const panels = Array.from(root.querySelectorAll('[data-auth-panel]'));
      const tabButtons = Array.from(document.querySelectorAll('[data-auth-tab]'));

      function setActive(name){
        panels.forEach(p => p.classList.toggle('isActive', p.getAttribute('data-auth-panel') === name));
        tabButtons.forEach(b => b.classList.toggle('active', b.getAttribute('data-auth-tab') === name));
      }

      tabButtons.forEach(b => b.addEventListener('click', () => setActive(b.getAttribute('data-auth-tab'))));
      setActive('register');

      document.querySelectorAll('[data-toggle-pass]').forEach(btn => {
        btn.addEventListener('click', () => {
          const row = btn.closest('.passRow');
          if (!row) return;
          const input = row.querySelector('input');
          if (!input) return;
          input.type = (input.type === 'password') ? 'text' : 'password';
          btn.textContent = (input.type === 'password') ? '{{ 'Voir'|trans }}' : '{{ 'Cacher'|trans }}';
        });
      });
    })();
  </script>
{% endblock %}