{% load i18n %}
{% load static %}
{% include "generic/components.html" %}
<div id="formContainer">
    {% include "generic/horilla_form.html" %}
    <button hidden hx-target="#multiApprovalManager_0" hx-swap="outerHTML"
        hx-get="{% url 'add-more-approval-managers' %}" role="button" id="addmangerButton" style="color: green">
        {% trans "Add more managers.." %}
    </button>
</div>

<script>
    $(document).ready(function () {
        $("#id_condition_start_value_parent_div").hide();
        $("#id_condition_end_value_parent_div").hide();
        $("#id_condition_operator").change(function () {
            var selectedValue = $(this).val();
            if (selectedValue === "range") {
                $("#id_condition_start_value_parent_div").remove();
                $("#id_condition_end_value_parent_div").remove();
            }
        });

        var divElement = document.createElement('div');
        divElement.id = 'multiApprovalManager_0';
        divElement.className = 'pt-2';
        divElement.style.textAlign = 'end';
        var anchorElement = document.createElement('a');
        anchorElement.setAttribute('role', 'button');
        anchorElement.setAttribute('id', 'addmanger');
        anchorElement.style.color = 'green';
        anchorElement.innerText = 'Add more managers..';

        divElement.appendChild(anchorElement);
        var parentDiv = document.getElementById('id_multi_approval_manager_parent_div');
        if (parentDiv) {

            parentDiv.insertAdjacentElement('afterend', divElement);
        } else {
            console.error("Parent div with ID 'id_multi_approval_manager_parent_div' not found.");
        }

        $(document).off('click', '#addmanger').on('click', '#addmanger', function (event) {
            $('#addmangerButton').trigger('click');
        });
    });
</script>