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

{% block title %} {{ 'register.breadcrumb.title'|trans }} {% endblock %}
{% block description %}  {% endblock %}

{% block stylesheets %}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/css/intlTelInput.css"/>
{% endblock %}
{% block body %}

    {% include "front/inc/breadcrumb.html.twig" with 
        {
            'content_title': 'register.breadcrumb.title'|trans,
            'current_page' : 'breadcrumb.accueil'|trans,
            'image'        : ''
        } 
    %}
   
   <div class="inscription_compte">
      <div class="container">
        <div class="form-container">
          <h1 class="form-title">{{ 'register.title'|trans }}</h1>
          <div class="msg_error"></div>
          <form method="POST" action="{{ path('app_create_account') }}" id="user-create-account" class="user-register">
            <div class="form-group form-labelciv">
              <label for="civilite" class="required">{{ 'information.civility'|trans }}</label>
              <div class="radio-group">
                <label class="radio-label">
                  <input type="radio" name="civilite" value="mr" required>
                  <span>{{ 'information.mr'|trans }}</span>
                </label>
                <label class="radio-label">
                  <input type="radio" name="civilite" value="mme" required>
                  <span>{{ 'information.mme'|trans }}</span>
                </label>
                <label class="radio-label">
                  <input type="radio" name="civilite" value="mlle" required>
                  <span>{{ 'information.mlle'|trans }}</span>
                </label>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <input type="text" id="nom" name="nom" placeholder="{{ 'information.lastname'|trans }}" class="input-field" required>
              </div>
              <div class="form-group">
                <input type="text" id="prenom" name="prenom" placeholder="{{ 'information.firstname'|trans }}" class="input-field" required>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <div class="phone-input-container">
                  <input id="phone" type="tel" class="phone-input input-field" placeholder="{{ 'confirmation.text5'|trans }}" required />
                  <input type="hidden" id="phone_full" name="telephone">
                  <input type="hidden" id="country_code" name="country_code">
                </div>
              </div>
              <div class="form-group">
                <input type="email" id="email" name="email" placeholder="{{ 'information.email'|trans }}" class="input-field" required>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <div class="select-container">
                   <select id="payselement" name="country" class="input-field" required>
                      <option value="">{{ 'register.country'|trans }}</option>
                      {% if pays|length > 0 %}
                        {% for pays in pays %}
                          <option value="{{ pays.id }}">{{ pays.nom }}</option>
                        {% endfor %}
                      {% endif %}
                    </select>
                </div>
              </div>
              
              <div class="form-group">
                <div class="password-input-container">
                  <input type="password" id="password" name="password" placeholder="{{ 'information.password'|trans }}" class="input-field" required>
                  <button type="button" id="toggle-password" class="toggle-password" >
                    <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                    <svg id="eye-off-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye-off hidden">
                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                      <line x1="1" y1="1" x2="23" y2="23"></line>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('registeruser') }}">
            <div class="g-recaptcha" data-sitekey="6Le2F8cpAAAAAIvDNkCuHycUWMXpRKmbR6uPQjwi"></div>
            <button type="submit" id="user-register" class="submit-button">{{ 'register.submit'|trans }}</button>
            <p class="required-notice">{{ 'register.required_fields'|trans }}</p>
          </form>
        </div>
      </div>
    </div>

{% endblock %}

{% block javascripts %}
	<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.10/build/js/intlTelInput.min.js"></script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script src="{{ asset('front/js/phone.js') }}"></script>
{% endblock %}