{% extends 'frontend/layouts/index.html.twig' %}
{% block title %}Forgot password{% endblock %}
{% block stylesheets %}
    <style>
        .error{
            color:red;
        }
    </style>
{% endblock %}
{% block logincontent %}
    <div class="content-wrapper">
        <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 class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                        </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_front_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 src="https://www.google.com/recaptcha/api.js?hl={{ recaptcha_lang|default('en') }}" async defer></script>
        <script>

            {#document.addEventListener('DOMContentLoaded', (event) => {
                const recaptcha = document.querySelector('.g-recaptcha');
                recaptcha.setAttribute("data-theme", "dark");
            });#}

                $(document).ready(function () {
                    $('#forgot_password_form').validate({
                        rules: {
                            'email': {
                                required: true,
                                email: true
                            },
                            'g-recaptcha-response': {
                                required: true
                            }
                        },
                        messages: {
                            'email': {
                                required: "Email is required",
                                email: "Please enter a valid email address"
                            },
                            'g-recaptcha-response': {
                                required: "Please complete the reCAPTCHA"
                            }
                        },
                        errorPlacement: function (error, element) {
                            if (element.attr("name") == "g-recaptcha-response") {
                                error.insertAfter(".g-recaptcha"); // insert after widget
                            } else {
                                error.insertAfter(element);
                            }
                        }
                    });

                });
        </script>
    {% endblock %}