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

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

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

{% block content %}
    <div class="account-reset-password container">
        <div class="row justify-content-md-center">
            <div class="col-auto">
                {{ headers.shop('sylius.ui.reset_password'|trans, 'lock', 'sylius.ui.set_a_new_password_for_your_account'|trans) }}
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-lg-8 col-xl-6">
                <div class="form-block">
                    {{ form_start(form, {'action': path('sylius_shop_password_reset', {'token' : user.passwordResetToken}), 'attr': {'class': 'ui large loadable form', 'novalidate': 'novalidate'}}) }}
                    {{ form_row(form._token) }}
                    <div class="row">
                        <div class="col-md">
                            {{ form_row(form.password.first, sylius_test_form_attribute('password-reset-new')|merge({'label': 'sylius.form.user_reset_password.new'|trans})) }}
                        </div>
                        <div class="col-md">
                            {{ form_row(form.password.second, sylius_test_form_attribute('password-reset-confirmation')|merge({'label': 'sylius.form.user_reset_password.confirmation'|trans})) }}
                        </div>
                    </div>

                    <div class="form-btn-wrapper">
                        <button type="submit" class="btn btn-primary" {{ sylius_test_html_attribute('login-password-reset-button') }}>
                            {{ 'sylius.ui.reset'|trans }} ›
                        </button>
                    </div>

                    {{ form_end(form, {'render_rest': false}) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
