{%  extends '@SyliusShop/layout.html.twig' %}
    {% block content %}
    <section id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ 'sylius.ui.login'|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.login'|trans }}</li>
                </ul>
            </div>
        </div>
    </section>

        <section>
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 m-auto col-sm-12">
                        <div class="panel ">
                            <div class="panel-body">
                                <h3>{{ 'sylius.ui.customer_login'|trans }}</h3>
                                {{ form_start(form, {'action': path('sylius_shop_login_check'), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
                                {% import '@SyliusUi/Macro/messages.html.twig' as messages %}

                                {% if last_error %}
                                    <div class="text-danger">{{ messages.error(last_error.messageKey|trans(last_error.messageData, 'security')) }}</div>
                                {% endif %}

                                <div class="form-group">
                                    <label class="sr-only">{{ form_label(form._username) }}</label>
                                    {{ form_widget(form._username, {'attr' : { 'class':'form-control', 'placeholder': form._username.vars.label}}) }}
                                </div>
                                <div class="form-group">
                                    <label class="sr-only">{{ form_label(form._password) }}</label>
                                    {{ form_widget(form._password, {'attr' : { 'class':'form-control', 'placeholder': form._password.vars.label}}) }}
                                </div>
                                <div class="form-group form-inline text-right">
                                    <div class="custom-control custom-checkbox">
                                        <label class="custom-control custom-checkbox m-0">
                                            {{ form_widget(form._remember_me, {'attr' : {'class': 'custom-control-input'}}) }}
                                            <span class="custom-control-label m-l-10">{{form._remember_me.vars.label | trans}}</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="text-right form-group text-right">
                                    <button type="submit" class="btn btn-info">{{ 'sylius.ui.login'|trans }}</button>
                                    <p class="small"><a class="btn-secondary btn" href="{{ path('sylius_shop_register') }}"> {{ 'sylius.ui.create_an_account'|trans }}</a></p>

                                </div>
                                <a href="{{ path('sylius_shop_request_password_reset_token') }}" class="ui d-block m-auto floated button">{{ 'sylius.ui.forgot_password'|trans }}</a>

                                <input type="hidden" name="_csrf_shop_security_token" value="{{ csrf_token('shop_authenticate') }}">
                                {{ form_end(form, {'render_rest': false}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
{% endblock %}