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

{% block title %}{{ 'title.register'|trans }}{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
{% endblock %}
{% block body %}
<div>
        {% for flash_error in app.flashes('verify_email_error') %}
            <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
        {% endfor %}
        <div id="g_id_onload" data-client_id="{{ googleAppId }}" data-context="signin"
            data-ux_mode="popup" data-login_uri="{{path('app_g_login')}}" data-auto_prompt="false">
        </div>
    
        <div class="col-10 mx-auto">
            
            {{ form_errors(registrationForm) }}
            
            {{ form_start(registrationForm,{attr:{class:'form'}}) }}
            <h1 class="text-primary">{{ 'title.register'|trans }}</h1>
                {{ form_row(registrationForm.email) }}
                {{ form_row(registrationForm.plainPassword) }}
                {{ form_row(registrationForm.passwordConfirm) }}
            <div class="mb-3">
                <div class="d-flex">
                     {{ form_row(registrationForm.agreeTerms) }}
                    <label class="form-check-label required" for="registration_form_agreeTerms">{{ 'form.agree_terms'|trans }}<a href="{{ path('app_cgu') }}">CGU</a></label>
                </div>
            </div>
                
                 {{ form_rest(registrationForm) }}
            <div class="d-grid gap-2">
                <button type="submit" class="g-recaptcha btn btn-primary col-6 rounded-4 mx-auto" 
                data-sitekey="{{recaptchaPublic}}" 
                data-callback='onSubmit' 
                data-action='submit'>{{ "btn.signUp"|trans }}</button>
                
                <p class="text-center">{{ 'social.or_connect'|trans }}</p>

                <div class="g_id_signin  d-flex justify-content-center" data-type="standard" data-shape="pill" data-theme="outline" data-text="signup_with"
                data-size="large" data-logo_alignment="center" data-width="400">
            </div>
            </div>
            {{ form_end(registrationForm) }}
        </div>
</div>
<div class="position-fixed bottom-0 w-100 mb-4 pb-4">
    <div class="col-10 mx-auto d-flex">
        <a href="{{path('app_register')}}" class="btn btn-light active w-100">{{ "btn.register"|trans }}</a>
        <a href="{{path('app_login')}}" class="btn btn-light w-100">{{ "btn.login"|trans }}</a>
    </div>
</div>
    <script>
        function onSubmit(token) {
          document.querySelector("form").submit();
        }
    </script>
{% endblock %}