{% extends 'base.html.twig' %}
{% form_theme registrationForm 'bootstrap_5_layout.html.twig' %}

{% block title %}{{ 'lang.register'|trans }}{% endblock %}

{% block styles %}
    <style>
        .navbar-container {
            padding: 50px 20px;
        }
        #mobileMenu {
            top: 0;
        }
        #openMenu {
            rect {
                fill: var(--orange-color);
            }
        }
        .reg-hp {
            position: absolute;
            left: -10000px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        .auth-container .auth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 18px 0;
            color: #8a8a8a;
            font-size: 13px;
            text-transform: lowercase;
        }
        .auth-container .auth-divider::before,
        .auth-container .auth-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e3e3e3;
        }
        .auth-container .google-auth-btn {
            width: 100%;
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 38px;
            border: 1px solid #dadce0;
            background: #fff;
            color: #3c4043 !important;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.2;
        }
        .auth-container .google-auth-btn:hover {
            background: #f8f9fa;
            color: #202124 !important;
        }
    </style>
{% endblock %}

{% block footer %} {% endblock %}

{% block body %}
    <div class="container h-100">
        <div class="row h-100">
            <div class="col-sm-12 col-lg-6 p-0 mb-sm-3 display-flex-center h-100 position-relative">
                <div class="auth-container container z-index-1 pt-5 pt-sm-0">
                    {% for flash_error in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
                    {% endfor %}
                    <h1 class="mt-5">{{ 'lang.register'|trans }}</h1>
                    {{ form_start(registrationForm) }}
                    {{ form_errors(registrationForm) }}
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.email) }}
                        {{ form_widget(registrationForm.email) }}
                    </div>
                    <div id="output_email_error"></div>
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.plainPassword) }}
                        {{ form_widget(registrationForm.plainPassword) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.firstName) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.lastName) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.cellphone) }}
                        {{ form_widget(registrationForm.cellphone) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.company) }}
                    </div>
                    <div class="reg-hp" aria-hidden="true">
                        {{ form_widget(registrationForm.website) }}
                    </div>
                    <a href="{{ path('app_terms_and_conditions') }}" class="a-small-blue">
                        {{ 'lang.creatingAccountAgreeTerms' | trans }}
                    </a>
                    <button type="submit" class="button button-blue"
                            id="submitBtn">{{ 'lang.registerSend' | trans }}</button>

                    <div class="auth-divider">{{ 'lang.or'|trans }}</div>

                    {% include 'security/_google_auth_button.html.twig' %}

                    <a href="{{ path('app_login') }}">
                        <p class="a-medium-blue">{{ 'lang.accountExist' | trans }}</p>
                    </a>
                    {{ form_end(registrationForm) }}
                </div>
            </div>
            <div class="col-6 d-none d-lg-block"></div>

        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('register') }}
{% endblock %}