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

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

{% block content %}
    <section id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</h1>
            </div>
            <div class="breadcrumb justify-content-center" style="background-color: transparent">
                <ul>
                    <li><a href="{{ path('sylius_shop_homepage') }}"><i class="fa fa-home"></i></a> </li>
                    <li class="active" aria-current="page">{{ 'sylius.ui.reset_password'|trans }}</li>
                </ul>
            </div>
        </div>
    </section>
    <div class="container pt-4 pb-4">
        <div class="col-lg-12 text-center">
            <h2><span>{{ 'sylius.ui.change_password'|trans }}</span></h2>
            <p>{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</p>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-6">
                {{ sylius_template_event('sylius.shop.request_password_reset_token.after_content_header') }}
                {{ form_start(form, {'action': path('sylius_shop_request_password_reset_token'), 'attr': {'class': 'text-center', 'novalidate': 'novalidate'}}) }}
                <div class="form-group col-lg-12">
                    <label class="sr-only">{{ form_label(form.email) }}</label>
                    {{ form_widget(form.email, {'attr' : {'class' : 'w-100', 'placeholder' : form.email.vars.label}}) }}
                </div>
                {{ sylius_template_event('sylius.shop.request_password_reset_token.form', {'form': form}) }}

                {{ form_row(form._token) }}
                <button type="submit" class="btn btn-info" {{ sylius_test_html_attribute('request-password-reset-button') }}>
                    {{ 'sylius.ui.reset'|trans }}
                </button>
                {{ form_end(form, {'render_rest': false}) }}
            </div>
        </div>
    </div>
{% endblock %}