{% load i18n %}
{% load static %}
{% load waf_utils %}
{% csrf_token %}

<script>
(function() {
    // Re-capture controller options now that form elements are in DOM
    wl_data_option = $("option[value='wl_data']").detach();
    pattern_option = $("option[value='pattern']").detach();
    activate_current_mode('WL');
    added_zones = [];
    erl_not_operator_text = $('#erl_not_operator_text').val();
    erl_nor_operator_text = $('#erl_nor_operator_text').val();
    erl_or_operator_text = $('#erl_or_operator_text').val();
    erl_nand_operator_text = $('#erl_nand_operator_text').val();
    erl_and_operator_text = $('#erl_and_operator_text').val();

    var prefillDomain = "{{ prefill_domain|escapejs }}";
    var prefillSigId = "{{ prefill_sig_id|escapejs }}";
    var prefillMz = "{{ prefill_mz|escapejs }}";
    var prefillPort = "{{ prefill_port|escapejs }}";

    if (prefillDomain) {
        $('#select_erl_block').val('domain');
        add_erl_block();
        var $domainBlock = $('#erl_conditions .erl_condition').last();
        setTimeout(function() {
            $domainBlock.find('textarea.add_erl_input').val(prefillDomain);
        }, 50);
    }
    if (prefillPort) {
        $('#select_erl_block').val('port');
        add_erl_block();
        var $portBlock = $('#erl_conditions .erl_condition').last();
        setTimeout(function() {
            $portBlock.find('textarea.add_erl_input').val(prefillPort);
        }, 50);
    }
    if (prefillSigId) {
        $('#select_erl_block').val('wl_data');
        add_erl_block();
        var $wlBlock = $('#erl_conditions .erl_condition').last();
        setTimeout(function() {
            var addSigBtn = $wlBlock.find('button[onclick^="add_wl_data_signature"]')[0];
            if (addSigBtn) add_wl_data_signature(addSigBtn);
            var $signature = $wlBlock.find('.wl-data__signature:not([data-template])').last();
            $signature.find('[data-signature-name]').val(prefillSigId);

            var addZoneBtn = $signature.find('button[onclick^="add_wl_data_zone"]')[0];
            if (addZoneBtn) add_wl_data_zone(addZoneBtn);
            if (prefillMz) {
                var mzUpper = prefillMz.toUpperCase();
                if (mzUpper === 'URL') mzUpper = 'PATH';
                var zoneSelect = $signature.find('.wl-data-row:not([data-template]) select');
                if (zoneSelect.length) {
                    zoneSelect.val(mzUpper);
                }
            }
        }, 100);
    }
})();
</script>

<div role="tabpanel" class="tab-pane fade active in" id="tab_erl_rule">
    <div class="container-fluid" style="font-weight: 400;">
        <div class="tab-content" style="padding: 16px 16px 24px;">
            <form class="form-horizontal" id="add_erl_rule_form" action="" method="POST" autocomplete="off">
                {% csrf_token %}
                <input hidden id="add_erl_form_key" name="lic_keys_select" value="{{ key }}">
                <input hidden id="add_erl_form_erl_id" name="erl_id" value="">
                <input hidden id="add_erl_form_end_of_life" value="">
                <input type="checkbox" id="add_erl_form_active" hidden checked>
                <input type="checkbox" id="wl" hidden checked>
                <div class="d-flex flex-col gap-24">
                    <div class="d-flex flex-col gap-12">
                        <div class="d-flex flex-col gap-16">
                            <div class="d-flex flex-row gap-24 justify-content-between">
                                <div class="erl-meta-block">
                                    <div class="erl-meta-sub-block" id="add-block-container">
                                        <p>{% trans 'ERL add block title' %}</p>
                                        <div class="d-flex flex-row gap-8">
                                            <select class="form-control select-erl-block" id="select_erl_block" onchange="change_zone(this)">
                                                <option selected value="domain">{% trans 'Add\Edit ERL Domain input field' %}</option>
                                                <option value="method">{% trans 'Add\Edit Method input field' %}</option>
                                                <option value="port">{% trans 'Add\Edit Port input field' %}</option>
                                                <option value="country">{% trans 'Add\Edit ERL Country input field' %}</option>
                                                <option value="ip">IP</option>
                                                <option value="url">Path</option>
                                                <option value="args">ARGS</option>
                                                <option value="body">BODY</option>
                                                <option value="ua">User-Agent</option>
                                                <option value="no_ua">{% trans 'Add\Edit ERL NoUA checkbox' %}</option>
                                                <option value="cookie">Cookie</option>
                                                <option value="no_cookie">{% trans 'Add\Edit ERL NoCookie checkbox' %}</option>
                                                <option value="block_tor">{% trans 'Add\Edit ERL Block Tor checkbox' %}</option>
                                                <option value="block_proxy">{% trans 'Add\Edit ERL Block Proxy checkbox' %}</option>
                                                <option value="referer">Referer</option>
                                                <option value="no_referer">{% trans 'Add\Edit ERL NoReferer checkbox' %}</option>
                                                <option value="other_headers">{% trans 'Add\Edit ERL Other Headers input field' %}</option>
                                                <option value="zone_settings">{% trans 'Add\Edit ERL Zone settings input field' %}</option>
                                                <option value="wl_data">{% trans 'Add\Edit WL data input field' %}</option>
                                            </select>
                                            <button type="button" class="btn btn-default add-erl-block-btn" onclick="add_erl_block()">
                                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                                    <path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                                {% trans "ERL Add row" %}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="erl-meta-block flex-grow-1">
                                    <div class="erl-meta-sub-block">
                                        <p>{% trans 'ERL Rule Comment block' %}</p>
                                        <textarea class="erl-textarea" placeholder="{% trans 'Начните ввод...' %}" id="erl_comment" rows=4></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex flex-row gap-12" id="erl_checkbox_row" style="display: none;"></div>

                        <div class="d-flex flex-col gap-24">
                            <div id="erl_conditions"></div>

                            <span id="error_add_rule_erl"
                                  style="color: red; display: none; text-align: center;">{% trans 'Add\Edit ERL Error message' %}</span>
                            <span id="end_of_life_error" class="end-of-life-error" style="display:none;"></span>
                            <div>
                                <button type="button" onclick="add_erl_page()" class="btn btn-primary save_button">
                                    {% trans 'Edit setting save button' %}
                                </button>
                            </div>
                            <div id="erl_form_inputs"></div>
                        </div>
                    </div>
                </div>
            </form>

            <input id="erl_not_operator_text" type="hidden" value="{% trans 'ERL not operator' %}">
            <input id="erl_nor_operator_text" type="hidden" value="{% trans 'ERL nor operator' %}">
            <input id="erl_or_operator_text" type="hidden" value="{% trans 'ERL or operator' %}">
            <input id="erl_nand_operator_text" type="hidden" value="{% trans 'ERL nand operator' %}">
            <input id="erl_and_operator_text" type="hidden" value="{% trans 'ERL and operator' %}">
            <input id="no_cookie_text" type="hidden" value="{% trans 'Add\Edit ERL NoCookie checkbox' %}">
            <input id="no_ua_text" type="hidden" value="{% trans 'Add\Edit ERL NoUA checkbox' %}">
            <input id="no_referer_text" type="hidden" value="{% trans 'Add\Edit ERL NoReferer checkbox' %}">
            <input id="block_tor_text" type="hidden" value="{% trans 'Add\Edit ERL Block Tor checkbox' %}">
            <input id="block_proxy_text" type="hidden" value="{% trans 'Add\Edit ERL Block Proxy checkbox' %}">
            <input id="no_cookie_inner_text" type="hidden" value="{% trans 'ERL NoCookie activation' %}">
            <input id="no_ua_inner_text" type="hidden" value="{% trans 'ERL NoUA activation' %}">
            <input id="no_referer_inner_text" type="hidden" value="{% trans 'ERL NoReferer activation' %}">
            <input id="block_tor_inner_text" type="hidden" value="{% trans 'ERL Block Tor activation' %}">
            <input id="block_proxy_inner_text" type="hidden" value="{% trans 'ERL Block Proxy activation' %}">
        </div>
    </div>
</div>

<div class="templates">
    <div class="second-level-template" style="display: none">
        <div class="second-level-heading level-heading">
            <div class="left-side">
                <div class="hide-btn" onclick="hideOrShowGroup(this)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z"/></svg>
                </div>
            </div>
            <div class="right-side">
                <button type="button" id="" class="btn btn-default add-condition-btn" onclick="addCondition(this, 'second')" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                    <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label" for="edit_erl_button">{% trans 'ERL\other_headers add_condition tooltip' %}</span>
                    <i class='fa fa-plus-square-o fa-lg'></i>
                </button>
                <button type="button" id="" class="btn btn-default add-condition-btn" onclick="addGroup(this, 'third')" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                    <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label" for="edit_erl_button">{% trans 'ERL\other_headers add_group tooltip' %}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#134473"><path d="M700-120h40v-100h100v-40H740v-100h-40v100H600v40h100v100Zm20 80q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM360-680v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Zm160 440v-80h83q-3 20-3 40t3 40h-83Zm0-240v-80h360q-57 0-107 21.5T525-440H360Z"/></svg>
                </button>
                <button type="button" id="" class="btn btn-default add-condition-btn" onclick="deleteGroup(this)" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                    <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label" for="edit_erl_button">{% trans 'ERL\other_headers delete_group tooltip' %}</span>
                    <i class='fa fa-trash-o fa-lg'></i>
                </button>
            </div>
        </div>
        <div class="level-conditions"></div>
    </div>
    <div class="third-level-template" style="display: none">
        <div class="third-level-heading level-heading">
            <div class="left-side">
                <div class="hide-btn" onclick="hideOrShowGroup(this)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z"/></svg>
                </div>
            </div>
            <div class="right-side">
                <button type="button" id="" class="btn btn-default add-condition-btn" onclick="addCondition(this, 'third')" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                    <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label" for="edit_erl_button">{% trans 'ERL\other_headers add_condition tooltip' %}</span>
                    <i class='fa fa-plus-square-o fa-lg'></i>
                </button>
                <button type="button" id="" class="btn btn-default add-condition-btn" onclick="deleteGroup(this)" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                    <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label" for="edit_erl_button">{% trans 'ERL\other_headers delete_group tooltip' %}</span>
                    <i class='fa fa-trash-o fa-lg'></i>
                </button>
            </div>
        </div>
        <div class="level-conditions"></div>
    </div>
    <div class="level-condition-template" style="display: none">
        <div class="erl_row_other_headers_first_level_data erl_row_data erl_row_data_other_headers erl_row_data_field">
            <div class="key-container">
                <select class="form-control erl-select-operator">
                    <option value="none"></option>
                    <option value="not">{% trans 'ERL not operator' %}</option>
                </select>
                <div class="erl-text-input">
                    <input type="text" title="" class="form-control erl-text-input" name="" placeholder="Key" oninput="handleInput(event)" onchange="handleInput(event)">
                </div>
            </div>
            <p>:</p>
            <div class="value-container">
                <select class="form-control erl-select-operator">
                    <option value="none"></option>
                    <option value="not">{% trans 'ERL not operator' %}</option>
                </select>
                <div class="erl-text-input">
                    <input type="text" title="" class="form-control erl-text-input" name="" placeholder="Value" oninput="handleInput(event)" onchange="handleInput(event)">
                    <button type="button" class="btn btn-icon no-outline btn-input" onclick="deleteValueContainer(this)">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99993 6.1751L9.88743 3.2876L10.7123 4.11243L7.82476 6.99993L10.7123 9.88743L9.88743 10.7123L6.99993 7.82476L4.11243 10.7123L3.2876 9.88743L6.1751 6.99993L3.2876 4.11243L4.11243 3.2876L6.99993 6.1751Z" fill="#134473"/></svg>
                    </button>
                </div>
                <div class="plus-minus-container">
                    <button class="btn btn-icon outline btn-centered" type="button" onclick="insertNewValueContainer(this)">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="#9A9A9A" d="M2.91675 7H11.0834" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path stroke="#9A9A9A" d="M7 2.9165V11.0832" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-icon no-outline" onclick="delete_other_headers_row(this)">
                <i class='fa fa-trash-o fa-lg'></i>
            </button>
        </div>
    </div>
    <div class="value-container-template" style="display: none;">
        <select class="form-control erl-select-operator">
            <option value="or">{% trans 'ERL or operator' %}</option>
            <option value="and">{% trans 'ERL and operator' %}</option>
            <option value="nor">{% trans 'ERL nor operator' %}</option>
            <option value="nand">{% trans 'ERL nand operator' %}</option>
        </select>
        <div class="erl-text-input">
            <input type="text" title="" class="form-control erl_row_data_input" name="" placeholder="Value" oninput="handleInput(event)" onchange="handleInput(event)">
            <button type="button" class="btn btn-icon no-outline btn-input" onclick="deleteValueContainer(this)">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99993 6.1751L9.88743 3.2876L10.7123 4.11243L7.82476 6.99993L10.7123 9.88743L9.88743 10.7123L6.99993 7.82476L4.11243 10.7123L3.2876 9.88743L6.1751 6.99993L3.2876 4.11243L4.11243 3.2876L6.99993 6.1751Z" fill="#134473"/></svg>
            </button>
        </div>
        <div class="plus-minus-container">
            <button class="btn btn-icon outline btn-centered" type="button" onclick="insertNewValueContainer(this)">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="#9A9A9A" d="M2.91675 7H11.0834" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path stroke="#9A9A9A" d="M7 2.9165V11.0832" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
        </div>
    </div>
    <div class="erl_condition d-none" id="wl_data_template" data-template>
        <div class="erl_block_title">
            {% trans "WL Data block name" %}
            <span onClick="quest(this)" class="settings_info nwaf_wl_data_question fa fa-question"></span>
            <button id="delete_erl_row_div" type="button" class="btn btn-icon delete-condition" onclick="delete_wl_data_row(this)">
                <i class="fa fa-trash-o fa-lg"></i>
            </button>
        </div>
        <fieldset class="wl-data__rule-body erl-rule-body erl_row_data" info="wl_data">
            <div class="wl-data__signatures" id="wl-data__signatures">
                <div class="wl-data__signature" id="wl_data_signature_template" data-template>
                    <div class="wl-data__signature_head">
                        <div class="wl-data__signature_head-block">
                            <button type="button" class="btn btn-default no-outline btn-collapse" data-toggle="collapse" data-target="#signature" aria-expanded="true">
                                <svg width="14" height="14" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.583496 0.583328L4.0835 4.08333L7.5835 0.583328" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                {% trans "WL Data Signature" %}
                            </button>
                            <input type="text" class="text-input form-control" data-signature-name />
                        </div>
                        <div class="wl-data__signature_head-block">
                            <button type="button" class="btn btn-icon outline toggleable btn-mla" title="{% trans 'ERL No MLA checkbox title' %}">NoMLA<input type="checkbox" hidden data-mla /></button>
                            <button id="delete_erl_row_div" type="button" class="btn btn-icon delete-condition" onclick="delete_wl_data_signature(this)"><i class="fa fa-trash-o fa-lg"></i></button>
                        </div>
                    </div>
                    <div class="wl-data__signature_body collapse in" id="signature">
                        <div class="wl-data__zone">
                            <div class="wl-data__zone-head" style="display: none;" zone-head>
                                <button type="button" class="btn btn-default no-outline btn-collapse" data-toggle="collapse" data-target="#zone" aria-expanded="true">
                                    <svg width="14" height="14" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.583496 0.583328L4.0835 4.08333L7.5835 0.583328" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    {% trans "WL Data Zone" %}
                                </button>
                            </div>
                            <div class="wl-data__zone-body collapse in no-border-if-empty" id="zone">
                                <div class="wl-data__zone-values erl-input-rows">
                                    <div class="erl-input-row wl-data-row" id="wl_data_zone_template" data-template data-remove>
                                        <select class="form-control erl-select-operator select-erl-block" onchange="refresh_zone_selects(this)">
                                            <option selected value="URL">PATH</option>
                                            <option value="ARGS">ARGS</option>
                                            <option value="BODY">BODY</option>
                                            <option value="HEADERS">HEADERS</option>
                                            <option value="COOKIE">COOKIE</option>
                                            <option value="USER-AGENT">USER-AGENT</option>
                                            <option value="REFERER">REFERER</option>
                                            <option value="CUSTOM_HEADER">{% trans 'CUSTOM HEADER' %}</option>
                                        </select>
                                        <div class="d-flex flex-row gap-12 align-items-center" style="display: none; height: 100%;" custom-header-value>
                                            <span>:</span>
                                            <input type="text" class="form-control erl-text-input" data-header-name>
                                        </div>
                                        <button type="button" class="btn btn-icon" onclick="delete_wl_data_zone(this)"><i class="fa fa-trash-o fa-lg"></i></button>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-default add-block-btn add-erl-block-btn" onclick="add_wl_data_zone(this)">
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    {% trans 'WL Data Add zone' %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-default add-block-btn add-erl-block-btn" onclick="add_wl_data_signature(this)">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                {% trans 'WL Data Add signature' %}
            </button>
        </fieldset>
    </div>
    <div class="erl-input-row d-none data-row" id="erl_input_row_template" data-template>
        <select class="form-control erl-select-operator" id="extension_erl_select_operator">
            <option selected value="none"></option>
            <option value="not">{% trans 'ERL not operator' %}</option>
        </select>
        <span>:</span>
        <div id="add_erl_input_div" class="erl-text-input">
            <textarea rows="1" id="extension_erl_textarea" class="form-control add_erl_input"></textarea>
        </div>
        <button type="button" class="btn btn-icon toggleable" title="{% trans 'Multiline input' context 'my_waf_bl' %}" onclick="set_extension_multiline_input(this)">
            <svg viewBox="0 -960 960 960" fill="#134473" xmlns="http://www.w3.org/2000/svg"><path d="M700-120h40v-100h100v-40H740v-100h-40v100H600v40h100v100Zm20 80q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM360-680v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Zm160 440v-80h83q-3 20-3 40t3 40h-83Zm0-240v-80h360q-57 0-107 21.5T525-440H360Z"/></svg>
        </button>
        <button type="button" class="btn btn-icon" onclick="delete_element(this)"><i class="fa fa-trash-o fa-lg"></i></button>
    </div>
    <div class="erl_condition d-none" id="erl-block-template" data-template>
        <div class="erl_block_title">
            $BLOCK_NAME
            <span onClick="quest(this)" class="settings_info nwaf_$BLOCK_question fa fa-question"></span>
            <button type="button" class="btn btn-icon delete-condition" onclick="delete_erl_row(this)"><i class="fa fa-trash-o fa-lg"></i></button>
        </div>
        <div class="erl-rule-body erl_row_data" info="$BLOCK_REGEX">
            <div class="d-flex flex-row justify-content-between flex-grow-1">
                <div class="d-flex flex-col gap-12 align-items-start">
                    <div class="erl-input-rows">
                        <div class="erl-input-row data-row" data-template>
                            <select class="form-control erl-select-operator" id="extension_erl_select_operator">
                                <option selected value="none"></option>
                                <option value="not">{% trans 'ERL not operator' %}</option>
                            </select>
                            <span>:</span>
                            <div id="add_erl_input_div" class="erl-text-input">
                                <textarea rows="1" id="extension_erl_textarea" class="form-control add_erl_input"></textarea>
                            </div>
                            <button type="button" class="btn btn-icon toggleable" title="{% trans 'Multiline input' context 'my_waf_bl' %}" onclick="set_extension_multiline_input(this)">
                                <svg viewBox="0 -960 960 960" fill="#134473" xmlns="http://www.w3.org/2000/svg"><path d="M700-120h40v-100h100v-40H740v-100h-40v100H600v40h100v100Zm20 80q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM360-680v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Zm160 440v-80h83q-3 20-3 40t3 40h-83Zm0-240v-80h360q-57 0-107 21.5T525-440H360Z"/></svg>
                            </button>
                            <button type="button" class="btn btn-icon" onclick="delete_element(this)"><i class="fa fa-trash-o fa-lg"></i></button>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default add-erl-block-btn" onclick="add_erl_element(this)">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        {% trans "ERL Add row" %}
                    </button>
                </div>
                <label class="btn btn-icon outline btn-regexp toggleable" title="{% trans 'Regular Expression' %}" for="regexp_$BLOCK_REGEX">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#285283" d="M1.86792 8.96957C1.86792 8.11194 2.01454 7.286 2.30779 6.49175C2.60104 5.6975 3.02986 4.97494 3.59423 4.32407C3.70298 4.19994 3.83523 4.13163 3.99098 4.11913C4.14673 4.10663 4.28279 4.15857 4.39917 4.27494C4.51542 4.39132 4.57311 4.52857 4.57223 4.68669C4.57123 4.84482 4.51642 4.98975 4.40779 5.1215C3.94717 5.661 3.59617 6.25763 3.35479 6.91138C3.11354 7.56525 2.99292 8.24894 2.99292 8.96244C2.99292 9.67594 3.11861 10.3608 3.36998 11.0171C3.62148 11.6733 3.97123 12.2711 4.41923 12.8105C4.52798 12.9423 4.58398 13.0853 4.58723 13.2397C4.59061 13.3939 4.53417 13.5293 4.41792 13.6456C4.30154 13.762 4.16429 13.8158 4.00617 13.8071C3.84792 13.7984 3.71448 13.7321 3.60586 13.6081C3.05398 12.9524 2.62636 12.2286 2.32298 11.4367C2.01961 10.6449 1.86792 9.82257 1.86792 8.96957ZM7.12505 13.3124C6.86542 13.3124 6.6443 13.2211 6.46167 13.0383C6.27892 12.8557 6.18755 12.6346 6.18755 12.3749C6.18755 12.1153 6.27892 11.8942 6.46167 11.7116C6.6443 11.5288 6.86542 11.4374 7.12505 11.4374C7.38467 11.4374 7.6058 11.5288 7.78842 11.7116C7.97117 11.8942 8.06255 12.1153 8.06255 12.3749C8.06255 12.6346 7.97117 12.8557 7.78842 13.0383C7.6058 13.2211 7.38467 13.3124 7.12505 13.3124ZM10.4813 9.56244C10.3217 9.56244 10.188 9.50857 10.0804 9.40082C9.97267 9.29319 9.9188 9.15957 9.9188 8.99994V8.087L9.14273 8.55275C9.01111 8.62875 8.86861 8.64582 8.71523 8.60394C8.56186 8.56219 8.44717 8.47544 8.37117 8.34369C8.2953 8.21194 8.27823 8.06938 8.31998 7.916C8.36186 7.76263 8.44867 7.648 8.58042 7.57213L9.3563 7.12494L8.5688 6.67775C8.43705 6.60188 8.35217 6.48725 8.31417 6.33388C8.2763 6.1805 8.2953 6.03794 8.37117 5.90619C8.44717 5.76682 8.56186 5.68007 8.71523 5.64594C8.86861 5.61182 9.01111 5.63269 9.14273 5.70857L9.9188 6.16288V5.24994C9.9188 5.09032 9.97267 4.95669 10.0804 4.84907C10.188 4.74132 10.3217 4.68744 10.4813 4.68744C10.6409 4.68744 10.7745 4.74132 10.8822 4.84907C10.9899 4.95669 11.0438 5.09032 11.0438 5.24994V6.16288L11.8199 5.69713C11.9515 5.62113 12.094 5.60407 12.2474 5.64594C12.4007 5.68769 12.5154 5.77444 12.5914 5.90619C12.6673 6.03794 12.6844 6.1805 12.6426 6.33388C12.6007 6.48725 12.5139 6.60188 12.3822 6.67775L11.6063 7.12494L12.3938 7.57213C12.5255 7.648 12.6104 7.76263 12.6484 7.916C12.6863 8.06938 12.6673 8.21194 12.5914 8.34369C12.5154 8.48307 12.4007 8.56982 12.2474 8.60394C12.094 8.63807 11.9515 8.61719 11.8199 8.54132L11.0438 8.087V8.99994C11.0438 9.15957 10.9899 9.29319 10.8822 9.40082C10.7745 9.50857 10.6409 9.56244 10.4813 9.56244ZM16.125 8.96957C16.125 9.82257 15.9784 10.6474 15.6852 11.444C15.3919 12.2406 14.963 12.962 14.3985 13.6081C14.2899 13.7321 14.1577 13.7984 14.002 13.8071C13.8462 13.8158 13.7102 13.762 13.5938 13.6456C13.4774 13.5293 13.4197 13.3939 13.4207 13.2397C13.4217 13.0853 13.4765 12.9423 13.5852 12.8105C14.0457 12.2711 14.3966 11.6733 14.638 11.0171C14.8794 10.3608 15 9.67594 15 8.96244C15 8.24894 14.8743 7.56525 14.6228 6.91138C14.3714 6.25763 14.0217 5.661 13.5735 5.1215C13.4649 4.98975 13.412 4.84482 13.4149 4.68669C13.4178 4.52857 13.4774 4.39132 13.5938 4.27494C13.7102 4.15857 13.8443 4.10663 13.9962 4.11913C14.148 4.13163 14.2784 4.19994 14.3871 4.32407C14.939 4.97982 15.3666 5.70357 15.67 6.49532C15.9734 7.28719 16.125 8.11194 16.125 8.96957Z"/></svg>
                    <input type="checkbox" autocomplete="off" id="regexp_$BLOCK_REGEX" hidden>
                </label>
            </div>
        </div>
    </div>
    <div class="erl_condition d-none" id="erl-custom-block-template" data-template>
        <div class="erl_block_title">
            $BLOCK_NAME
            <span onClick="quest(this)" class="settings_info nwaf_$BLOCK_question fa fa-question"></span>
            <button type="button" class="btn btn-icon delete-condition" onclick="delete_erl_row(this)"><i class="fa fa-trash-o fa-lg"></i></button>
        </div>
        <div info="$CUSTOM_BLOCK" id="erl_row_$CUSTOM_BLOCK" class="erl-rule-body erl_row_data">
            <input hidden name="" class="form-check-input" type="checkbox" checked id="activate_erl_form_$CUSTOM_BLOCK">
            $CUSTOM_BLOCK_TEXT
        </div>
    </div>
    <div class="erl_condition d-none" id="erl-other-headers-template" data-template>
        <div class="erl_block_title erl_block_title_other_headers">
            {% trans 'Add\Edit ERL Other Headers input field' %}
            <span onClick="quest(this)" class="settings_info nwaf_other_headers_question fa fa-question"></span>
            <button type="button" class="btn btn-icon delete-condition" onclick="delete_erl_row(this)"><i class="fa fa-trash-o fa-lg"></i></button>
        </div>
        <div class="erl_row_data erl_row_other_headers erl_row_other_headers_v2 erl_row_data_other_headers" info="other_headers">
            <div class="root-level level">
                <div class="root-level-heading level-heading">
                    <div class="left-side"></div>
                    <div class="right-side">
                        <label class="btn btn-icon outline btn-regexp toggleable" title="{% trans 'ERL Regexp' %}" for="regexp_other_headers">
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#285283" d="M1.86792 8.96957C1.86792 8.11194 2.01454 7.286 2.30779 6.49175C2.60104 5.6975 3.02986 4.97494 3.59423 4.32407C3.70298 4.19994 3.83523 4.13163 3.99098 4.11913C4.14673 4.10663 4.28279 4.15857 4.39917 4.27494C4.51542 4.39132 4.57311 4.52857 4.57223 4.68669C4.57123 4.84482 4.51642 4.98975 4.40779 5.1215C3.94717 5.661 3.59617 6.25763 3.35479 6.91138C3.11354 7.56525 2.99292 8.24894 2.99292 8.96244C2.99292 9.67594 3.11861 10.3608 3.36998 11.0171C3.62148 11.6733 3.97123 12.2711 4.41923 12.8105C4.52798 12.9423 4.58398 13.0853 4.58723 13.2397C4.59061 13.3939 4.53417 13.5293 4.41792 13.6456C4.30154 13.762 4.16429 13.8158 4.00617 13.8071C3.84792 13.7984 3.71448 13.7321 3.60586 13.6081C3.05398 12.9524 2.62636 12.2286 2.32298 11.4367C2.01961 10.6449 1.86792 9.82257 1.86792 8.96957ZM7.12505 13.3124C6.86542 13.3124 6.6443 13.2211 6.46167 13.0383C6.27892 12.8557 6.18755 12.6346 6.18755 12.3749C6.18755 12.1153 6.27892 11.8942 6.46167 11.7116C6.6443 11.5288 6.86542 11.4374 7.12505 11.4374C7.38467 11.4374 7.6058 11.5288 7.78842 11.7116C7.97117 11.8942 8.06255 12.1153 8.06255 12.3749C8.06255 12.6346 7.97117 12.8557 7.78842 13.0383C7.6058 13.2211 7.38467 13.3124 7.12505 13.3124ZM10.4813 9.56244C10.3217 9.56244 10.188 9.50857 10.0804 9.40082C9.97267 9.29319 9.9188 9.15957 9.9188 8.99994V8.087L9.14273 8.55275C9.01111 8.62875 8.86861 8.64582 8.71523 8.60394C8.56186 8.56219 8.44717 8.47544 8.37117 8.34369C8.2953 8.21194 8.27823 8.06938 8.31998 7.916C8.36186 7.76263 8.44867 7.648 8.58042 7.57213L9.3563 7.12494L8.5688 6.67775C8.43705 6.60188 8.35217 6.48725 8.31417 6.33388C8.2763 6.1805 8.2953 6.03794 8.37117 5.90619C8.44717 5.76682 8.56186 5.68007 8.71523 5.64594C8.86861 5.61182 9.01111 5.63269 9.14273 5.70857L9.9188 6.16288V5.24994C9.9188 5.09032 9.97267 4.95669 10.0804 4.84907C10.188 4.74132 10.3217 4.68744 10.4813 4.68744C10.6409 4.68744 10.7745 4.74132 10.8822 4.84907C10.9899 4.95669 11.0438 5.09032 11.0438 5.24994V6.16288L11.8199 5.69713C11.9515 5.62113 12.094 5.60407 12.2474 5.64594C12.4007 5.68769 12.5154 5.77444 12.5914 5.90619C12.6673 6.03794 12.6844 6.1805 12.6426 6.33388C12.6007 6.48725 12.5139 6.60188 12.3822 6.67775L11.6063 7.12494L12.3938 7.57213C12.5255 7.648 12.6104 7.76263 12.6484 7.916C12.6863 8.06938 12.6673 8.21194 12.5914 8.34369C12.5154 8.48307 12.4007 8.56982 12.2474 8.60394C12.094 8.63807 11.9515 8.61719 11.8199 8.54132L11.0438 8.087V8.99994C11.0438 9.15957 10.9899 9.29319 10.8822 9.40082C10.7745 9.50857 10.6409 9.56244 10.4813 9.56244ZM16.125 8.96957C16.125 9.82257 15.9784 10.6474 15.6852 11.444C15.3919 12.2406 14.963 12.962 14.3985 13.6081C14.2899 13.7321 14.1577 13.7984 14.002 13.8071C13.8462 13.8158 13.7102 13.762 13.5938 13.6456C13.4774 13.5293 13.4197 13.3939 13.4207 13.2397C13.4217 13.0853 13.4765 12.9423 13.5852 12.8105C14.0457 12.2711 14.3966 11.6733 14.638 11.0171C14.8794 10.3608 15 9.67594 15 8.96244C15 8.24894 14.8743 7.56525 14.6228 6.91138C14.3714 6.25763 14.0217 5.661 13.5735 5.1215C13.4649 4.98975 13.412 4.84482 13.4149 4.68669C13.4178 4.52857 13.4774 4.39132 13.5938 4.27494C13.7102 4.15857 13.8443 4.10663 13.9962 4.11913C14.148 4.13163 14.2784 4.19994 14.3871 4.32407C14.939 4.97982 15.3666 5.70357 15.67 6.49532C15.9734 7.28719 16.125 8.11194 16.125 8.96957Z"/></svg>
                            <input type="checkbox" autocomplete="off" id="regexp_other_headers" hidden>
                        </label>
                        <button type="button" class="btn btn-default add-condition-btn" onclick="addCondition(this, 'root')" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                            <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label">{% trans 'ERL\other_headers add_condition tooltip' %}</span>
                            <i class="fa fa-plus-square-o fa-lg"></i>
                        </button>
                        <button type="button" class="btn btn-default add-condition-btn" onclick="addGroup(this, 'second')" onmouseenter="show_erl_button_tooltip(this, true)" onmouseleave="show_erl_button_tooltip(this, false)">
                            <span style="width: 125px; line-height: 1; display: none" class="form-check-label edit_erl_button_other_headers_form-check-label">{% trans 'ERL\other_headers add_group tooltip' %}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#134473"><path d="M700-120h40v-100h100v-40H740v-100h-40v100H600v40h100v100Zm20 80q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM360-680v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Zm160 440v-80h83q-3 20-3 40t3 40h-83Zm0-240v-80h360q-57 0-107 21.5T525-440H360Z"/></svg>
                        </button>
                    </div>
                </div>
                <div class="level-conditions"></div>
            </div>
        </div>
    </div>
    <div class="erl_condition d-none" id="zone_settings_template" data-template>
        <div class="erl_block_title">
            {% trans 'Add\Edit ERL Zone settings input field' %}
            <span onClick="quest(this)" class="settings_info nwaf_zone_settings_question fa fa-question"></span>
            <button type="button" class="btn btn-icon delete-condition" onclick="delete_erl_row(this)"><i class="fa fa-trash-o fa-lg"></i></button>
        </div>
        <div class="erl-rule-body erl_row_data" info="zone_settings">
            <div class="d-flex flex-col gap-12 align-items-start">
                <div class="erl-input-rows">
                    <div id="erl_row_zone_settings" class="erl-input-row erl_row_data erl_row_zone_settings data-row" info="zone_settings" data-template>
                        <select class="form-control zone_settings_type erl-select-operator" id="zone_settings_type" onchange="on_zone_select($(this))"></select>
                        <input type="text" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="form-control erl-text-input" id="zone_settings_text-input">
                        <button type="button" class="btn btn-icon" onclick="delete_zone_element(this)"><i class="fa fa-trash-o fa-lg"></i></button>
                    </div>
                </div>
                <button type="button" class="btn btn-default add-erl-block-btn" onclick="add_erl_element(this)">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.91675 7H11.0834" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 2.91663V11.0833" stroke="#0A0A0A" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {% trans "ERL Add row" %}
                </button>
            </div>
        </div>
    </div>
</div>