{% import '@SyliusUi/Macro/headers.html.twig' as headers %}

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

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

{% block breadcrumb %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
            </li>

            <li class="breadcrumb-item">
                <a href="{{ path('sylius_shop_account_dashboard') }}" class="section">{{ 'sylius.ui.my_account'|trans }}</a>
            </li>

            <li class="breadcrumb-item active">{{ 'sylius.ui.personal_information'|trans }}</li>
        </ol>
    </nav>
{% endblock %}

{% block subcontent %}
    <div class="account-profile-update">
        {{ form_start(form, {'action': path('sylius_shop_account_profile_update'), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
            {{ headers.shop('sylius.ui.your_profile'|trans, null, 'sylius.ui.edit_your_personal_information'|trans) }}

            {{ sylius_template_event('sylius.shop.account.profile.update.after_content_header', {'customer': customer, 'form': form}) }}

            <input type="hidden" name="_method" value="PUT" />

            <div class="row">
                <div class="col-md">
                    {{ form_row(form.firstName, sylius_test_form_attribute('first-name')) }}
                </div>

                <div class="col-md">
                    {{ form_row(form.lastName, sylius_test_form_attribute('last-name')) }}
                </div>
            </div>

            {{ form_row(form.email, sylius_test_form_attribute('email')) }}

            <div class="row">
                <div class="col">
                    {{ form_row(form.birthday) }}
                </div>

                <div class="col">
                    {{ form_row(form.gender) }}
                </div>
            </div>

            {{ form_row(form.phoneNumber) }}
            {{ form_row(form.subscribedToNewsletter, sylius_test_form_attribute('subscribe-newsletter')|sylius_merge_recursive({'label_attr': {'class':'custom-switch'}}) ) }}

            {{ sylius_template_event('sylius.shop.account.profile.update.form', {'customer': customer, 'form': form}) }}
            <div class="account-navigation">
               <button type="submit" class="btn btn-primary" {{ sylius_test_html_attribute('save-changes') }}>{{ 'sylius.ui.save_changes'|trans }}</button>
            </div>
            {{ form_row(form._token) }}
        {{ form_end(form, {'render_rest': false}) }}
    </div>
{% endblock %}
