{% import "forms-macro/inputs_form.html.twig" as forms %}
<div class="modal fade" id="modal-base-info-user" style="display: none; padding-right: 15px;" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Merci de vous identifier :
                </h4>
            </div>
            <form novalidate="novalidate" id="formBaseInfoUser">
                <div class="modal-body">
                    <div class="parentDivProductForm col-sm-12 col-md-12 col-lg-12">
                        {{ forms.input(
                            "Nom :",
                            "text",
                            "lastName",
                            "lastName",
                            null,
                            "" ,
                            01,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageFormProduct"
                        ) }}
                    </div>
                    <div class="parentDivProductForm col-sm-12 col-md-12 col-lg-12">
                        {{ forms.input(
                            "Prénom :",
                            "text",
                            "firstName",
                            "firstName",
                            null,
                            "" ,
                            02,
                            true,
                            false,
                            false,
                            false,
                            "errorMessageFormProduct"
                        ) }}
                    </div>
                </div>
                <div class="modal-footer" style="margin-top: 3%;">
                    <button id="modalBaseInfouserValidatedBtn" type="button"
                            class="boutonAction">{{ button_label|default('Valider') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        for (let input of $("#formBaseInfoUser input")) {
            if (input.required) {
                let spanRequiredId = input.id + "Control";
                input.addEventListener("keyup", function (element) {
                    if (element.target.value === "") {
                        $("#" + spanRequiredId).show();
                        element.target.classList.add("borderErrorInput");
                    } else {
                        $("#" + spanRequiredId).hide();
                        element.target.classList.remove("borderErrorInput");
                    }
                });
            }
        }
    });
</script>