{% set title = 'Devenir client' %}
{% set desc = "Utiliser ce formulaire pour demander l'ouverture d'un compte dans l'une de nos agences"|os_trans("Use this form to request the opening of an account in one of our agencies") %}
{% set hasReCaptcha = true %}

{% extends 'Default/base-form.html.twig' %}
{% import 'Admin/macros.html.twig' as adminMacros %}
{% import "Macros/enumList.html.twig" as enumList %}

{% block content %}
<div id="" class='bg-gray {{desktop("gpadding")}} {{mobile("")}}'>
    <div class="fill {{desktop('flex col vt-60-in')}} {{mobile('vt-30-in')}}">

        {{include('Default/notice.html.twig')}}

        <div class="bg-white shadow hoverflow nsiaform las w100">
            {{form_start(form,{attr:{id:form.vars.id}})}}
            <div class="{{desktop('flex row space vt-40-in hz-60-in')}}">
                <div class="{{desktop('half-30')}}{{mobile('w100')}}">
                    {{form_row(form.type)}}
                    <div id="savingAccount" class="os-tab">
                        {{form_row(form.savingAccount)}}
                    </div>
                    <div id="currentAccount" class="os-tab">
                        {{form_row(form.currentAccount)}}
                    </div>
                    {{form_row(form.town)}}
                    {{form_row(form.agency)}}

                    <div class="flex row wrap">
                        <div class="os-tab">Veuillez sélectionner un produit pour voir les pièces à fournir.</div>
                        {% for o in savingAccounts %}
                        <div id="savingAccount-{{o.id}}" class="os-tab">
                            <h4 class="">Pièces à fournir</h4>
                            {{ enumList.render(o.documentsRequired,"var(--success-color)") }}
                            {{o.othersDetails|raw}}
                        </div>
                        {% endfor %}
                        {% for o in currentAccounts %}
                        <div id="currentAccount-{{o.id}}" class="os-tab">
                            <h4 class="">Pièces à fournir</h4>
                            {{ enumList.render(o.documentsRequired,"var(--success-color)") }}
                            <div class="article p-alt">
                                {{o.othersDetails|raw}}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="{{desktop('half-30')}}{{mobile('w100')}}">
                    <div class="">
                        {{form_row(form.lname)}}
                        {{form_row(form.fname)}}
                        {{form_row(form.sex)}}
                        {{form_row(form.email)}}
                        {{form_row(form.phone)}}
                        <div class="w100 {{desktop('flex row space')}}">
                            <div class="{{desktop('half-10')}}{{mobile('w100')}}">
                                {{form_row(form.birthday)}}
                                {{form_row(form.address)}}
                                {{form_row(form.residenceCertificate)}}
                            </div>
                            <div class="{{desktop('half-10')}}{{mobile('w100')}}">
                                {{form_row(form.IDPhoto)}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="{{desktop('gpadding bottom-40-in')}}{{mobile('hz-20-in bottom-15-in')}}">
                {{form_rest(form)}}
            </div>
            <div class='bg-warning flex col center middle {{desktop("vt-40-in hz-40-in")}} {{mobile("center")}}'>
                <div class="g-recaptcha" data-sitekey="{{os_param('recaptcha')['key']}}"></div>
                <button type='submit' data-target='#{{form.vars.id}}' class="anim-btn relative flex col center bg-success noborder radius-5 {{desktop('top-15')}}">
                    <span class="upper semibold h6 vt-10-in hz-30-in white">Envoyer</span>
                </button>
            </div>
            {{form_end(form)}}
        </div>
    </div>
</div>
{% endblock %}