{% extends 'admin/layouts/base.html.twig' %}
{% block title %}Forgot password{% endblock %}
{% block stylesheets %}
    <style>
        .error{
            color:red;
        }
    </style>
{% endblock %}
{% block logincontent %}
    <div class="content-wrapper bg-dark">
        <div class="content-inner">
            <div class="content d-flex justify-content-center align-items-center">
                    <div class="card mb-0 login-form">
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <div class="d-inline-flex bg-primary bg-opacity-10 text-primary lh-1 rounded-pill p-3 mb-3 mt-1">
                                    <i class="ph-arrows-counter-clockwise ph-2x"></i>
                                </div>
                                <h5 class="mb-0">Password recovery</h5>
                                <span class="d-block text-muted">We'll send you instructions in email</span>
                            </div>
                            {{ form_start(form,{'attr': {'id': 'forgot_password_form'}}) }}
                                <div class="mb-3">
                                    <label class="form-label">Your email</label>
                                    <div class="form-control-feedback form-control-feedback-start">
                                        {{ form_row(form.email) }}
                                        <div class="form-control-feedback-icon">
                                            <i class="ph-at text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-check mb-3">
                                    {{ form_row(form.recaptcha) }}
                                </div>
                                <button type="submit" class="btn btn-primary w-100 mb-3">
                                    <i class="ph-arrow-counter-clockwise me-2"></i>
                                    Reset password
                                </button>
                            {{ form_end(form) }}
                            <div class="text-center">
                                <a href="{{ path('app_admin_login') }}">Back To Login</a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('admin/js/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('admin/js/jquery/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#forgot_password_form').validate({
                rules: {
                    'email': {
                        required: true,
                        email: true,
                    },
                },
                messages: {
                    'email': {
                        required: "Email is required",
                        email: "Please enter a valid email address"
                    },
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element); // Display error message after the input field
                }
            });
        });
    </script>
{% endblock %}