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

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

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

{% block breadcrumb %}
	<div class="ui breadcrumb">
		<a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
		<div class="divider">
			/
		</div>
		<a href="{{ path('sylius_shop_account_dashboard') }}" class="section">{{ 'sylius.ui.my_account'|trans }}</a>
		<div class="divider">
			/
		</div>
		<div class="active section">{{ 'sylius.ui.change_password'|trans }}</div>
	</div>
{% endblock %}

{% block subcontent %}
	<div class="ui segment">
		{{ form_start(form, {'action': path('sylius_shop_account_change_password'), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
		<h1 class="display-4 my-2">

			{{ 'sylius.ui.change_password'|trans }}
			<div class="sub header">{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</div>
		</h1>

		{{ 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" {{ sylius_test_html_attribute('save-changes') }} class="ui large primary button">{{ 'sylius.ui.save_changes'|trans }}</button>
		{{ form_row(form._token) }}
		{{ form_end(form, {'render_rest': false}) }}
	</div>
{% endblock %}