{%  extends '@SyliusShop/layout.html.twig' %}
    {% block content %}
        <section id="page-title">
            <div class="container">
                <div class="page-title">
                    <h1>{{ 'sylius.ui.create_a_new_customer_account'|trans }}</h1>
                </div>
                <div class="breadcrumb justify-content-center" style="background-color: transparent">
                    <ul>
                        <li><a href="{{ path('sylius_shop_homepage') }}"><i class="fa fa-home"></i></a> </li>
                        <li class="active" aria-current="page">{{ 'sylius.ui.register'|trans }}</li>
                    </ul>
                </div>
            </div>
        </section>
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 m-auto col-sm-12">
                        <div class="panel ">
                            <div class="panel-body">
                            {{ sylius_template_event('sylius.shop.register.before_form') }}

                            {{ sylius_template_event('sylius.shop.register.form', {'form': form}) }}
                            {{ form_start(form, {'action': path('sylius_shop_register'), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h3>{{ 'sylius.ui.register_in_the_store'|trans }}</h3>
                                        <p>{{ 'sylius.ui.create_a_new_customer_account'|trans }}</p>
                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.firstName) }}</label>
                                        {{ form_widget(form.firstName, {'attr' : { 'class':'form-control', 'placeholder': form.firstName.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.firstName) }}</p>
                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.lastName) }}</label>
                                        {{ form_widget(form.lastName, {'attr' : { 'class':'form-control', 'placeholder': form.lastName.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.lastName) }}</p>

                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.email) }}</label>
                                        {{ form_widget(form.email, {'attr' : { 'class':'form-control', 'placeholder': form.email.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.email) }}</p>

                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.phoneNumber) }}</label>
                                        {{ form_widget(form.phoneNumber, {'attr' : { 'class':'form-control', 'placeholder': form.phoneNumber.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.phoneNumber) }}</p>

                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.user.plainPassword.first) }}</label>
                                        {{ form_widget(form.user.plainPassword.first, {'attr' : { 'class':'form-control', 'placeholder': form.user.plainPassword.first.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.user.plainPassword.first) }}</p>
                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label class="sr-only">{{ form_label(form.user.plainPassword.second) }}</label>
                                        {{ form_widget(form.user.plainPassword.second, {'attr' : { 'class':'form-control', 'placeholder': form.user.plainPassword.second.vars.label}}) }}
                                        <p class="text-danger">{{ form_errors(form.user.plainPassword.second) }}</p>
                                    </div>
                                    <div class="col-lg-12 form-group text-right">
                                        <a href="{{ path('sylius_shop_login') }}" class="btn btn-secondary" {{ sylius_test_html_attribute('register-button') }}>
                                            Se connecter
                                        </a>
                                        <button type="submit" class="btn btn-info" {{ sylius_test_html_attribute('register-button') }}>
                                            {{ 'sylius.ui.create'|trans }}
                                        </button>

                                    </div>
                                </div>
                            {{ form_row(form._token) }}
                            {{ form_end(form, {'render_rest': false}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
{% endblock %}