{% extends 'shared/layout.twig' %}

{% block content %}
    <div class="col-md-6 col-sm-12 offset-md-3">
        <form id="login" method="POST" action="{{ path_for('auth.login') }}">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control {{ errors.username ? 'is-invalid' : '' }}" id="username" name="username" placeholder="Your username" value="{{last.username}}"/>
                <div class="invalid-feedback">
                    {{errors.username | first}}
                </div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control {{errors.password ? 'is-invalid' : ''}}" id="password" name="password" placeholder="Your password" value="{{last.password}}"/>
                <div class="invalid-feedback">
                    {{errors.password | first}}
                </div>
            </div>
            <div class="form-group pb-4">
                <input type="submit" class="btn btn-primary btn-block" value="Login" />
            </div>
            <div class="form-group">
                <a href="#" data-toggle="modal" data-target="#forgetPasswordModel">Forget Password</a>
            </div>
            {{ csrf.field | raw}}
        </form>
    </div>
    <div class="modal fade" id="forgetPasswordModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Forget Password</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="forget_form" method="post" action="{{ path_for('auth.forget') }}">
                        <input type="text" id="h" class="d-none" value="{{ model.viewBag['postBack'] }}"/>
                        <div class="row">
                            <div class="col-12 form-group">
                                <label>Username</label>
                                <input type="text" id="uname" name="uname" class="form-control {{errors.uname ? 'is-invalid' : ''}}" placeholder="Please enter your username" value="{{ last.uname }}"/>
                                <div class="invalid-feedback">
                                    {{errors.uname | first}}
                                </div>
                            </div>

                            <div class="col-12 form-group">
                                <label>Email</label>
                                <input type="email" id="email" name="email" class="form-control {{errors.email ? 'is-invalid' : ''}}" placeholder="Please enter your email" value="{{ last.email }}"/>
                                <div class="invalid-feedback">
                                    {{errors.email | first}}
                                </div>
                            </div>
                            <div class="form-group col-12">
                                <input type="submit" class="btn btn-warning ml-auto" value="Submit" />
                            </div>
                        </div>
                        {{ csrf.field | raw}}
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="http://allinexsupercar.com/alinex/public/assets/js/views/auth/login.js"></script>
    <script>
        $(document).ready(function () {
            if ($("#h").val() != '') {
                $('#forgetPasswordModel').modal('toggle');
            }

            var json = [
                 {
                    'id': 'uname',
                    'validator': {
                        message: 'Please enter username',
                        regex: /^\S*$/,
                        nullable: false,
                        showMessage: true,
                        rmessage: 'Invalid username format'
                    }
                }, {
                    'id': 'email',
                    'validator': {
                        message: 'Please enter your lastname',
                        nullable: false,
                        showMessage: true,
                        rmessage: 'Invalid email format'
                    }
                }
            ]

            validator($('#forget_form'), json)
        });
    </script>
{% endblock %}