{% extends '@SyliusShop/Account/layout.html.twig' %}

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block breadcrumb %}
    <section id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ 'sylius.ui.personal_information'|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><a href="{{ path('sylius_shop_account_dashboard') }}">{{ 'sylius.ui.my_account'|trans }}</a> </li>
                    <li class="active" aria-current="page">{{ 'sylius.ui.personal_information'|trans }}</li>
                </ul>
            </div>
        </div>
    </section>
{% endblock %}

{% block subcontent %}
    <div class="container pt-4 pb-4">
        <div class="col-lg-12 text-center">
            <h2><span>{{ 'sylius.ui.your_profile'|trans }}</span></h2>
            <p>{{ 'sylius.ui.edit_your_personal_information'|trans }}</p>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                {{ form_start(form, {'action': path('sylius_shop_account_profile_update'), 'attr': {'novalidate': 'novalidate'}}) }}
                    {{ sylius_template_event('sylius.shop.account.profile.update.after_content_header', {'customer': customer, 'form': form}) }}
                    <input type="hidden" name="_method" value="PUT" />
                    <div class="form-group col-lg-12">
                        {{ form_row(form.firstName, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        {{ form_row(form.lastName, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        {{ form_row(form.email, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        {{ form_row(form.birthday, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        {{ form_row(form.gender, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        {{ form_row(form.phoneNumber, {'attr' : {'class' : 'w-100 form-control'}}) }}
                    </div>
                    <div class="form-group col-lg-12">
                        <div class="custom-control custom-checkbox text-sm-center text-lg-right">
                            <label class="custom-control custom-checkbox m-0">
                                {{ form_widget(form.subscribedToNewsletter, {'attr' : {'class': 'custom-control-input'}}) }}
                                <span class="custom-control-label">{{form.subscribedToNewsletter.vars.label | trans}}</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-lg-12 text-sm-center">
                        {{ sylius_template_event('sylius.shop.account.profile.update.form', {'customer': customer, 'form': form}) }}
                        <button type="submit" class="btn btn-info float-lg-right float-sm-none m-sm-auto" {{ sylius_test_html_attribute('save-changes') }}>{{ 'sylius.ui.save_changes'|trans }}</button>
                    </div>
                    {{ form_row(form._token) }}
                {{ form_end(form, {'render_rest': false}) }}
            </div>
        </div>
    </div>
{% endblock %}