{% extends 'base.html.twig' %}
{% block title %}
    OceanExpert | Forgot Password
{% endblock %}
{% block stylesheets %}

    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="login-box">
        <div class="login-logo">
        </div><!-- /.login-logo -->

        <div class="panel panel-info">
            <div class="content-wrapper">
                <div class="panel-body">
                    <p class="login-box-msg">Change Password</p>

                    {% trans_default_domain 'FOSUserBundle' %}

                    {{ form_start(
                        form,
                        {
                            'action': path('fos_user_change_password'),
                            'attr': {
                                'class': 'fos_user_change_password',
                                'data-toggle':'validator',
                            }
                        })
                    }}
                    <div class="form-group has-feedback {% if form_errors(form.current_password) %}has-error{% endif %}">
                        <label for="fos_user_change_password_form_current_password">
                            Current Password
                        </label>
                        <div class="input-group">
                            {{ form_widget(
                                form.current_password,
                                {
                                    'attr':
                                    {
                                        'class': 'form-control',
                                        'placeholder': 'Current Password'|trans
                                    }
                                })
                            }}
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </span>
                        </div>
                        <span id="helpBlock2"
                              class="help-block">
                            {% if form_errors(form.current_password) %}{{ form_errors(form.current_password) }}{% endif %}
		                </span>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="fos_user_change_password_form_plainPassword">
                            New Password
                        </label>
                        <div class="input-group {% if form_errors(form.plainPassword.first) %}has-error{% endif %}">
                            {{ form_widget(
                                form.plainPassword.first,
                                {
                                    'attr': {
                                        'class': 'form-control',
                                        'placeholder': 'Enter New Password (min. 8 characters, must contain uppercase, lowercase and number)',
                                        'data-error': 'Please enter a correct new password (min. 8 characters, must contain uppercase, lowercase and number) .',
                                        'pattern':"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"
                                    }
                                })
                            }}
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </span>
                        </div>
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group has-feedback {% if form_errors(form.plainPassword.second) %}has-error{% endif %}">
                        <label for="fos_user_change_password_form_plainPassword_second">Confirm New Password</label>
                        <div class="input-group">
                            {{ form_widget(
                                form.plainPassword.second,
                                {
                                    'attr': {
                                        'class': 'form-control',
                                        'placeholder': 'Confirm New Password (min. 8 characters, must contain uppercase, lowercase and number)',
                                        'data-error': 'Please confirm your new password (min. 8 characters, must contain uppercase, lowercase and number) .',
                                        'pattern':"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"
                                    }
                                }) }}
                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        </div>
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="row">
                        <div class="col-xs-6 pull-right">
                            <button type="submit" id="_submit" name="_submit"
                                    class="btn btn-primary btn-block btn-flat">{{ 'change_password.submit'|trans }}</button>
                        </div><!-- /.col -->
                    </div>
                    {{ form_end(form) }}
                </div><!-- /.login-box-body -->

            </div><!-- /.login-box -->
        </div><!-- /.login-box -->
        <div class="row">
            <div class="checkbox icheck btn">
                <a href="{{ path('frontend_homepage') }}" class="btn btn-primary"><i class="fa fa-home" aria-hidden="true"></i> Back to the Home Page</a>
            </div>
        </div>
    </div><!-- /.login-box -->


    {% include "footer.html.twig" %}
{% endblock %}