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

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

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

{% block content %}
	<div class="ui hidden divider"></div>
	<div class="ui three column centered stackable grid">
		<div class="column">
			<h1 class="ui header">
				<i class="circular lock icon"></i>
				<div class="display-4 my-2">

					{{ 'sylius.ui.reset_password'|trans }}
					<div class="sub header">{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</div>
				</div>
			</h1>
			<div class="ui segment">
				{{ form_start(form, {'action': path('sylius_shop_password_reset', {'token' : user.passwordResetToken}), 'attr': {'class': 'ui large loadable form', 'novalidate': 'novalidate'}}) }}
				{{ form_row(form.password.first, sylius_test_form_attribute('password-reset-new')|merge({'label': 'sylius.form.user_reset_password.new'|trans})) }}
				{{ form_row(form.password.second, sylius_test_form_attribute('password-reset-confirmation')|merge({'label': 'sylius.form.user_reset_password.confirmation'|trans})) }}
				{{ form_row(form._token) }}
				<button type="submit" class="ui fluid large primary submit button" {{ sylius_test_html_attribute('login-password-reset-button') }}>
					{{ 'sylius.ui.reset'|trans }}
				</button>
				{{ form_end(form, {'render_rest': false}) }}
			</div>
		</div>
	</div>
{% endblock %}