{% 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="content">
                    {{ 'sylius.ui.reset_password'|trans }}
                    <div class="sub header">{{ 'sylius.ui.set_a_new_password_for_your_account'|trans }}</div>
                </div>

                {{ sylius_template_event('sylius.shop.request_password_reset_token.after_content_header') }}
            </h1>
            <div class="ui segment">
                {{ form_start(form, {'action': path('sylius_shop_request_password_reset_token'), 'attr': {'class': 'ui large loadable form', 'novalidate': 'novalidate'}}) }}
                {{ form_row(form.email, sylius_test_form_attribute('reset-email')) }}

                {{ sylius_template_event('sylius.shop.request_password_reset_token.form', {'form': form}) }}

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