{% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
{% block title %}{% trans %}Forgot Password{% endtrans %}{% endblock %}
{% block ogtitle %}{% trans %}Forgot Password{% endtrans %}{% endblock %}
{% block twtitle %}{% trans %}Forgot Password{% endtrans %}{% endblock %}
{% block metaDescription %}{% trans %}forgot.password.metaDescription{% endtrans %}{% endblock %}
{% block metaKeywords %}{% trans %}forgot.password.metaKeywords{% endtrans %}{% endblock %}
{% block body %}
    <div class="uv-paper-article uv-paper-form">
        <div class="uv-paper-section">
            <form action="" method="post">
                <section>
                    <h1>{{ 'Forgot Password'|trans }}</h1>
                    <div class="uv-element-block">
                        <p>{{ 'Enter your email address and we will send you an email with instructions to update your login credentials.'|trans }}</p>
                    </div>

                    <div class="uv-form">
                        <div class="uv-element-block">
                            <label class="uv-field-label">{{ 'Email'|trans }}</label>
                            <div class="uv-field-block uv-relative">
                                <input class="uv-field" type="email" name="email">
                            </div>
                        </div>

                        <!-- CSRF token Field -->
                        <input type="hidden" name="_token" />
                        <!-- //CSRF token Field -->

                        <button class="uv-btn">{{ 'Send Mail'|trans }}</button>
                    </div>
                </section>
            </form>
        </div>

    </div>
{% endblock %}
{% block footer %}
	{{ parent() }}

	<script type="text/javascript">
		$(function () {
            var LoginModel = Backbone.Model.extend({
                validation: {
                    'email':
                    [{
                        required: true,
                        msg: '{{ "This field is mandatory"|trans }}'
                    },{
                        pattern: 'email',
                        msg: '{{ "This is not a valid email address"|trans }}'
                    }]
                }
            });

            var LoginForm = Backbone.View.extend({
                events: {
                    'blur input': 'formChanegd',
                    'click .uv-btn': 'submit'
                },
                initialize: function () {
                    Backbone.Validation.bind(this);
                },
                formChanegd: function(e) {
			    	this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
			    	this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
			    },
                submit: function (e) {
                    e.preventDefault();
                    var data = this.$el.serializeObject();

                    this.model.set(data);
                    if(this.model.isValid(true)){
                        this.$el.submit();
                    }
                }
            });

		    var view = new LoginForm({
		        el: 'form',
		        model: new LoginModel()
		    });
		});
	</script>
{% endblock %}