{% load static %}
{% load i18n %}

<div class="container-fluid" style="font-weight: 400;">
  <ul class="nav nav-tabs horizontal-tabs"
      style="margin-left: 55px; margin-top: 10px; border-bottom: 0; border-radius: 6px;">
    {% for key in lic_keys %}
      <li class="bl_rule nav-item horizontal-item rule_key_tab {% if forloop.first %} active {% endif %}">
        <a style="padding-top: 0; border-bottom-width: 0; border-right-width: 0; border-left-width: 0;border-top-width: 0;margin-top: -1px;"
           class="nav-link horizontal-item-link rule_key_tab {% if forloop.first %} active {% endif %} vertical_tab"
           data-toggle="tab"
           href="#{{ key.id }}">{{ key.description }}</a>
      </li>
    {% endfor %}
  </ul>
  <div class="tab-content">
    {% for key in lic_keys %}
      <div class="tab-pane fade rule_key_tab {% if forloop.first %} active in {% endif %}"
           id="{{ key.id }}">
        <div class="erl-rule-nav">
          <ul class="nav nav-tabs horizontal-tabs erl-rule-tabs">
            <li class="nav-item horizontal-item tab_rule_settings erl_rule_settings {% if request.COOKIES.settings_rule_page != 'RPRL' %}active{% endif %}">
              <a class="nav-link tab_rule_settings {% if request.COOKIES.settings_rule_page != 'RPRL' %}active{% endif %} horizontal-item-link"
                 data-toggle="tab"
                 href="#blocking_rules_{{ key.id }}">{% trans 'My Blocking Rules' %}</a>
            </li>
            {% if key.tarif == "Enterprise" %}
            <li class="nav-item horizontal-item tab_rule_settings erl_rule_settings {% if request.COOKIES.settings_rule_page == 'RPRL' %}active{% endif %}">
              <a class="nav-link tab_rule_settings {% if request.COOKIES.settings_rule_page == 'RPRL' %}active{% endif %} horizontal-item-link"
                 data-toggle="tab"
                 href="#rprl_rules_{{ key.id }}">{% trans 'RPRL Rules' %}</a>
            </li>
            {% endif %}
            <li class="nav-item horizontal-item tab_rule_settings erl_rule_settings">
              <a class="nav-link tab_rule_settings horizontal-item-link" data-toggle="tab"
                 href="#disable_core_rules_{{ key.id }}">{% trans 'Core Rules WL' %} <sup><i class="fa fa-exclamation-circle" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="{% trans 'Legacy option' %}" style="top: -1px;"></i></sup></a>
            </li>
          </ul>
          <div class="erl-rule-controls">
            <div class="erl-rule-type-filter">
              <button class="btn erl-rule-type-btn" data-rule-type="blocking">
                {% trans 'Blocking rule' %}
              </button>
              <button class="btn erl-rule-type-btn" data-rule-type="exclusion">
                {% trans 'Exclusion rule' %}
              </button>
            </div>
            <div class="rule-search-container">
              <span class="rule-filter-icon" id="erlFilterBtn">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.75 0H2.25C1.65326 0 1.08097 0.237053 0.65901 0.65901C0.237053 1.08097 1.35659e-07 1.65326 1.35659e-07 2.25V3.1275C-0.000107405 3.43721 0.0637248 3.7436 0.1875 4.0275V4.0725C0.29346 4.31323 0.443544 4.532 0.63 4.7175L5.25 9.3075V14.25C5.24974 14.3775 5.28198 14.5029 5.34365 14.6144C5.40533 14.726 5.49442 14.8199 5.6025 14.8875C5.72186 14.9615 5.85958 15.0005 6 15C6.11741 14.9993 6.23301 14.971 6.3375 14.9175L9.3375 13.4175C9.46119 13.3552 9.5652 13.2598 9.63801 13.142C9.71082 13.0242 9.74958 12.8885 9.75 12.75V9.3075L14.34 4.7175C14.5265 4.532 14.6765 4.31323 14.7825 4.0725V4.0275C14.9166 3.74582 14.9907 3.43933 15 3.1275V2.25C15 1.65326 14.7629 1.08097 14.341 0.65901C13.919 0.237053 13.3467 0 12.75 0ZM8.4675 8.4675C8.39799 8.53758 8.343 8.62069 8.30567 8.71207C8.26835 8.80345 8.24943 8.9013 8.25 9V12.285L6.75 13.035V9C6.75057 8.9013 6.73165 8.80345 6.69433 8.71207C6.657 8.62069 6.60201 8.53758 6.5325 8.4675L2.5575 4.5H12.4425L8.4675 8.4675ZM13.5 3H1.5V2.25C1.5 2.05109 1.57902 1.86032 1.71967 1.71967C1.86032 1.57902 2.05109 1.5 2.25 1.5H12.75C12.9489 1.5 13.1397 1.57902 13.2803 1.71967C13.421 1.86032 13.5 2.05109 13.5 2.25V3Z" fill="#848484"/>
                </svg>
                <span class="filter-active-indicator"></span>
              </span>
              <input type="text" class="form-control rule-search-input"
                     placeholder="{% trans 'Search' %}">
              <span class="rule-search-clear" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Clear search' %}">
                <i class="fa fa-times"></i>
              </span>
            </div>
            <button class="btn btn-primary rule-management-create-btn"
                    onclick="rule_management_create('{{ key.id }}')">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.33325 8H12.6666" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 3.33331V12.6666" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>{% trans 'Create' %}
            </button>
          </div>
        </div>
        <div class="tab-content">
          <div role="tabpanel"
               class="tab-pane fade {% if request.COOKIES.settings_rule_page != 'RPRL' %}in active{% endif %}"
               id="blocking_rules_{{ key.id }}">
            <button class="rule_create_hidden_btn hidden"
                    onclick="location.href = '{{ home }}/erl_rule/?key_select={{ key.id }}';"></button>
            {% include 'my_waf/erl.html' %}
          </div>
          {% if key.tarif == "Enterprise" %}
          <div role="tabpanel"
               class="tab-pane fade {% if request.COOKIES.settings_rule_page == 'RPRL' %}in active{% endif %}"
               id="rprl_rules_{{ key.id }}">
            <button class="rule_create_hidden_btn hidden"
                    onclick="location.href = '{{ home }}/rprl_rule/?key_select={{ key.id }}';"></button>
            {% include 'my_waf/rprl.html' %}
          </div>
          {% endif %}
          <div role="tabpanel"
               class="tab-pane fade"
               id="disable_core_rules_{{ key.id }}">
            <button class="rule_create_hidden_btn hidden"
                    onclick="show_modal_Add_WL({{ key.id }})"></button>
            <i style="margin-top: 10px; float: right; margin-right: 15px;" class="settings_info nwaf_wl_question na fa-question" aria-hidden="true"></i>
            <style>

            .na {
              display: inline-block;
              font: normal normal normal 14px/1 FontAwesome;
              font-size: xx-large;
              text-rendering: auto;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }

            </style>
            {% include 'my_waf/wl_table.html' %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="modal fade" id="erlFilterModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered erl-filter-modal-dialog" role="document">
      <div class="modal-content erl-filter-modal">
        <div class="modal-header">
          <h5 class="modal-title">{% trans 'ERL Options table header' %}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <div class="erl-filter-checkboxes">
            <label class="erl-filter-checkbox-label">
              <input type="checkbox" class="erl-filter-bool" data-field="active">
              {% trans 'ERL Active option' %}
            </label>
            <label class="erl-filter-checkbox-label">
              <input type="checkbox" class="erl-filter-bool" data-field="api">
              {% trans 'ERL API option' %}
            </label>
            <label class="erl-filter-checkbox-label">
              <input type="checkbox" class="erl-filter-bool" data-field="noban">
              {% trans 'Add\\Edit ERL NoBan checkbox' %}
            </label>
            <label class="erl-filter-checkbox-label">
              <input type="checkbox" class="erl-filter-bool" data-field="lm">
              {% trans 'ERL LM option' %}
            </label>
            <label class="erl-filter-checkbox-label">
              <input type="checkbox" class="erl-filter-bool" data-field="wl">
              {% trans 'ERL Filter WL checkbox' %}
            </label>
          </div>

          <div class="erl-filter-section">
            <div class="erl-filter-section-title">{% trans 'ERL Request params block title' %}</div>
            <div class="erl-filter-grid">
              <div class="erl-filter-field">
                <label>{% trans 'ERL Method table header' %}</label>
                <select multiple class="filter-select" data-filter="method">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Domain table header' %}</label>
                <select multiple class="filter-select" data-filter="domain">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Port table header' %}</label>
                <select multiple class="filter-select" data-filter="port">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL URL table header' %}</label>
                <select multiple class="filter-select" data-filter="url">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL ARGS table header' %}</label>
                <select multiple class="filter-select" data-filter="args">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Body table header' %}</label>
                <select multiple class="filter-select" data-filter="body">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL UA table header' %}</label>
                <select multiple class="filter-select" data-filter="ua">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Cookie table header' %}</label>
                <select multiple class="filter-select" data-filter="cookie">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Referer table header' %}</label>
                <select multiple class="filter-select" data-filter="referer">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>{% trans 'ERL Other Headers table header' %}</label>
                <select multiple class="filter-select" data-filter="headers">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field erl-filter-field-inline">
                <label class="erl-filter-checkbox-label">
                  <input type="checkbox" class="erl-filter-bool" data-field="zone">
                  {% trans 'ERL Content limits block title' %}
                </label>
              </div>
            </div>
          </div>

          <div class="erl-filter-section">
            <div class="erl-filter-section-title">{% trans 'ERL Request source block title' %}</div>
            <div class="erl-filter-grid">
              <div class="erl-filter-field">
                <label>{% trans 'Country' %}</label>
                <select multiple class="filter-select" data-filter="country">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field">
                <label>IP</label>
                <select multiple class="filter-select" data-filter="ip">
                  <option value="">{% trans 'ERL Filter select placeholder' %}</option>
                </select>
              </div>
              <div class="erl-filter-field erl-filter-field-inline">
                <label class="erl-filter-checkbox-label">
                  <input type="checkbox" class="erl-filter-bool" data-field="anon">
                  {% trans 'ERL Filter anon checkbox' %}
                </label>
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary erl-modal-btn erl-modal-btn-apply" id="erlFilterApply">{% trans 'Apply filters' %}</button>
          <button type="button" class="btn btn-outline-secondary erl-modal-btn erl-modal-btn-reset" id="erlFilterReset">{% trans 'Reset all filters' %}</button>
        </div>
      </div>
    </div>
  </div>

  {% include 'my_waf/_modal_menu_ip.html' %}

</div>