{% set page_title = "register.title" | trans %}
{% extends 'security/layout.html.twig' %}

{% block content %}

    <div class="peers ai-s fxw-nw h-100vh" id="registerPageWrapper">
        <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv"
             style='background-image:  url("{{ asset('assets/images/bcgk.jpg') }}")'>

            <div class="col-12 col-md-6 col-lg-6 col-xl-3 pos-a centerXY peer pX-40 pY-60 h-70 bgc-white scrollable add-record-form register-form-wrapper">

                <div class="d-flex justify-content-around mb-2">
                    {% include "page-elements/components/logo.twig" with {
                        size: 65
                    } %}
                </div>
                <h3 class="text-center register-form-header">{{ 'login.header.pageName' | trans }}</h3>
                <h4 class="fw-300 c-grey-900 mB-20">{{ 'register.header.register' | trans }}</h4>
                {% if error_message is defined and error_message is not empty %}
                    <div class="alert alert-danger">{{ error_message }}</div>
                {% endif %}

                {{ form_start(user_register_form, { "attr": {
                    'data-entity':"User"
                }}) }}

                {# username #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.username, null, {
                            "label_attr": {
                                "class": "text-normal text-dark p-0"
                            }
                        }) }}
                    </div>

                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.username, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# mail #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.email, null, {
                            "label_attr": {
                                "class": "text-normal text-dark col-sm-12 p-0"
                            }
                        }) }}
                    </div>

                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.email, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# password #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.password, null, {
                            "label_attr": {
                                "class": "text-normal text-dark col-sm-12 p-0"
                            }
                        }) }}
                    </div>
                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.password, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# passwordRepeat #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.passwordRepeat, null, {
                            "label_attr": {
                                "class": "text-normal text-dark col-sm-12 p-0"
                            }
                        }) }}
                    </div>

                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.passwordRepeat, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# lockPassword #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.lockPassword, null, {
                            "label_attr": {
                                "class": "text-normal text-dark col-sm-12 p-0"
                            }
                        }) }}
                    </div>

                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.lockPassword, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# lockPasswordRepeat #}
                <div class="form-group row">
                    <div class="col-sm-12">
                        {{ form_label(user_register_form.lockPasswordRepeat, null, {
                            "label_attr": {
                                "class": "text-normal text-dark col-sm-12 p-0"
                            }
                        }) }}
                    </div>

                    <div class="col-sm-12">
                        {{ form_widget(user_register_form.lockPasswordRepeat, {
                            "attr": {
                                "class": "form-control"
                            }
                        }) }}
                    </div>
                </div>

                {# Submit #}
                <div class="form-group">
                    <div class="peer">
                        {{ form_widget(user_register_form.submit, {
                            "attr": {
                                "class": "btn btn-primary"
                            }
                        }) }}
                    </div>
                </div>

                {{ form_end(user_register_form) }}

            </div>
        </div>
    </div>

{% endblock content%}