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

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

{% block title %}{{ 'sylius.ui.change_password'|trans }} | {{ parent() }}{% endblock %}

{% import '@SyliusShop/Common/Macro/headers.html.twig' as headers %}
{% import '@SyliusShop/Common/Macro/breadcrumbs.html.twig' as breadcrumbs %}

{% block breadcrumb breadcrumbs.standard([
    {link: path('sylius_shop_account_dashboard'), label: 'sylius.ui.my_account'|trans},
    {label: 'sylius.ui.change_password'|trans}
]) %}

{% block subcontent %}
    <div class="grid gap-5 my-5 justify-content-center">
        {{ form_start(form, {'action': path('sylius_shop_account_change_password'), 'attr': {'class': 'loadable', 'novalidate': 'novalidate'}}) }}

        {{ headers.default('sylius.ui.change_password'|trans, '', 'sylius.ui.set_a_new_password_for_your_account'|trans) }}

        {{ sylius_template_event('sylius.shop.account.change_password.after_content_header', {'form': form}) }}

        {{ form_row(form.currentPassword, sylius_test_form_attribute('current-password')) }}
        {{ form_row(form.newPassword.first, sylius_test_form_attribute('new-password')) }}
        {{ form_row(form.newPassword.second, sylius_test_form_attribute('confirmation-new-password')) }}

        {{ sylius_template_event('sylius.shop.account.change_password.form', {'form': form}) }}

        <button type="submit" class="btn btn-warning mb-3" {{ sylius_test_html_attribute('save-changes') }}>
            {{ 'sylius.ui.save_changes'|trans }}
        </button>
        {{ form_row(form._token) }}
        {{ form_end(form, {'render_rest': false}) }}
    </div>
{% endblock %}