{% extends 'layout/default.html.twig' %}

{% block title %}Register{% endblock %}


{% block main %}

    <div class="contain:sm">
        
        {# {% for flash_error in app.flashes('verify_email_error') %}
            <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
        {% endfor %} #}

        <h1 class="mt-30 mb-3">Rejoignez la communauté !</h1>

        {# TODO #}
        {# <div class="flex sm center">
            <button class="cta w-40">Google</button>
            <button class="cta w-40">apple</button>
        </div>
        
        <hr class="my-1">  #}

        {# {{ form_errors(registrationForm) }} #}

        {{ form_start(form, { 
                'attr' : { 
                    'class': '' 
                } 
            }) 
        }}


            <zb-input
                name="{{ field_name(form.email) }}" 
                value="{{ field_value(form.email) }}"
                type="email"
                max="180"
                required
                placeholder="E-mail"
                message="{
                    error: 'Oups, le format de l’adresse e-mail est invalide.',
                    required: 'Quelle est votre adresse e-mail ?',
                }"
            ></zb-input>
            
             <zb-input
                {# class="e:check-password" #}
                name="{{ field_name(form.plainPassword) }}" 
                value="{{ field_value(form.plainPassword) }}"
                type="password"
                pattern="^[a-zA-Z\d@$!%*#?&,_\+\*\#\-\.]{8,25}$"
                required
                placeholder="Mot de passe"
                autocomplete="new-password"
                message="{
                    required: 'Quel est votre mot de pass ?',
                    pattern: 'Les caractères spéciaux autorisés sont: @$!%*#?&,_+*#-.',
                }"
            >
                <div class="e:show-pwd">
                    <img width="25" src="{{ absolute_url(asset('icons/show.svg')) }}">
                    <img width="25" src="{{ absolute_url(asset('icons/hide.svg')) }}">
                </div>
            </zb-input>

            {# <ul class="pdl-pwd-checker hide naked pt-10" >
                <li>
                    <img width="12" src="{{ absolute_url(asset('icons/valid.svg')) }}">
                    <img width="9" src="{{ absolute_url(asset('icons/not-valid.svg')) }}">
                    8 caractères minimum
                </li>
                <li>
                    <img width="12" src="{{ absolute_url(asset('icons/valid.svg')) }}">
                    <img width="9" src="{{ absolute_url(asset('icons/not-valid.svg')) }}">
                    1 majuscule minimum
                </li>
                <li>
                    <img width="12" src="{{ absolute_url(asset('icons/valid.svg')) }}">
                    <img width="9" src="{{ absolute_url(asset('icons/not-valid.svg')) }}">
                    1 minuscule minimum
                </li>
                <li>
                    <img width="12" src="{{ absolute_url(asset('icons/valid.svg')) }}">
                    <img width="9" src="{{ absolute_url(asset('icons/not-valid.svg')) }}">
                    1 chiffres minimum
                </li>
                <li>
                    <img width="12" src="{{ absolute_url(asset('icons/valid.svg')) }}">
                    <img width="9" src="{{ absolute_url(asset('icons/not-valid.svg')) }}">
                    1 caractère spécial minimum
                </li>
            </ul> #}

            {# <zb-input
                type="date"
                name="birthdate"
                class="w-100"
            ></zb-input> #}


            <label class="flex sm group top">
                <input
                    class="mr-10 w-auto"
                    type="checkbox"
                    name="{{ field_name(form.agreeTerms) }}" 
                    value="{{ field_value(form.agreeTerms) }}"
                    required
                >
                <p class="w-80 p-0 s5 t-thin">
                    Je certifie accepté les <a class="underline" target="_blank" href="">CGU</a> et la <a class="underline" target="_blank" href="">politique de vie privée</a> du site.
                </p>
            </label>

            <label class="flex sm group top mt-10">
                <input
                    class="mr-10 w-auto"
                    type="checkbox"
                    name="{{ field_name(form.isAdult) }}" 
                    value="{{ field_value(form.isAdult) }}"
                    required
                >
                <p class="w-80 p-0 s5 t-thin">
                    Je confirme être majeur.e et reconnaître que ce site est réservé à un public adulte.
                </p>
            </label>

            <div class="fixed-ctas">
                <div class="contain:sm">
                    <button type="submit" class="btn w-100">
                        Finaliser mon inscription
                    </button>
                </div>
            </div>

        {{ form_widget(form._token) }}
        {{ form_end(form, {'render_rest': false}) }}

{% endblock %}