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

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

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

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

{% block content %}
    <div class="grid justify-content-center mt-5">
        <div class="g-col-12 g-col-md-8 g-start-md-3 g-col-lg-6 g-start-lg-4 mb-3 p-2 p-lg-4 border border-light rounded">
            <h1 class="h3">{{ 'sylius.ui.reset_password'|trans }}</h1>
            <p>{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</p>

            <div>
                {{ form_start(form, {'action': path('sylius_shop_password_reset', {'token': user.passwordResetToken}), 'attr': {'class': 'loadable', 'novalidate': 'novalidate'}}) }}
                {{ form_row(form.password.first, {'label': 'sylius.form.user_reset_password.new'|trans}) }}
                {{ form_row(form.password.second, {'label': 'sylius.form.user_reset_password.confirmation'|trans}) }}
                {{ form_row(form._token) }}
                <button type="submit" class="btn btn-warning" {{ sylius_test_html_attribute('login-password-reset-button') }}>{{ 'sylius.ui.reset'|trans }}</button>
                {{ form_end(form, {'render_rest': false}) }}
            </div>
        </div>
    </div>
{% endblock %}