{% load i18n %}
{% load waf_utils %}

<div class="erl-list" id="rprl_list_{{ key.id }}">
  <div class="erl-header">
    <div class="erl-col-id">{% trans 'RPRL ID table header' %}</div>
    <div class="erl-col-status">
      {% trans 'ERL Status column header' %}
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.1626 12.96L12.9526 15.75L15.7426 12.96" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M12.9526 7.50751V15.75" stroke="#134473" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M12.9526 2.25V4.49249" stroke="#134473" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M7.83757 5.03998L5.04755 2.25L2.25757 5.03998" stroke="#134473" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M5.04736 2.25V10.5675" stroke="#134473" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M5.04736 15.75V13.5225" stroke="#134473" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </div>
    <div class="erl-col-comment erl-header--text">{% trans 'RPRL Rule Comment block' %}</div>
    <div class="erl-col-domain erl-header--text">{% trans 'RPRL Domain table header' %}</div>
    <div class="erl-col-url erl-header--text">{% trans 'RPRL URL table header' %}</div>
    <div class="erl-col-actions erl-header--text">{% trans 'RPRL Actions table header' %}</div>
  </div>

  {% for rprl in key.rprl %}
    <div class="erl-row"
         data-rule-type="{% if rprl.wl == 'True' %}exclusion{% else %}blocking{% endif %}"
         data-search-text="{{ rprl.id }} {{ rprl.comment }}{% for el in rprl.domain %} {{ el.1 }}{% endfor %}{% for el in rprl.url %} {{ el.1 }}{% endfor %}{% for el in rprl.url_x %} {{ el.1 }}{% endfor %}{% if rprl.ip %}{% for el in rprl.ip %} {{ el.1 }}{% endfor %}{% endif %}{% if rprl.wl_data %}{% for sig in rprl.wl_data %}{% for sig_id, zones in sig.items %} {{ sig_id }}{% endfor %}{% endfor %}{% endif %}"
         data-f-active="{{ rprl.active }}"
         data-f-api="{{ rprl.api }}"
         data-f-noban="{{ rprl.noban }}"
         data-f-lm="{{ rprl.lm }}"
         data-f-wl="{{ rprl.wl }}"
         data-f-domain="{% for el in rprl.domain %}{{ el.1 }}|||{% endfor %}"
         data-f-port="{% for el in rprl.port %}{{ el.1 }}|||{% endfor %}"
         data-f-url="{% for el in rprl.url %}{{ el.1 }}|||{% endfor %}{% for el in rprl.url_x %}{{ el.1 }}|||{% endfor %}"
         data-f-ip="{% if rprl.ip %}{% for el in rprl.ip %}{{ el.1 }}|||{% endfor %}{% endif %}">

      <div class="erl-row-main">

        <div class="erl-col-id">
          {% if rprl.wl == 'True' %}
          <svg class="erl-icon-shield" width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.49 2.23003L5.5 4.11003C4.35 4.54003 3.41 5.90003 3.41 7.12003V14.55C3.41 15.73 4.19 17.28 5.14 17.99L9.44 21.2C10.85 22.26 13.17 22.26 14.58 21.2L18.88 17.99C19.83 17.28 20.61 15.73 20.61 14.55V7.12003C20.61 5.89003 19.67 4.53003 18.52 4.10003L13.53 2.23003C12.68 1.92003 11.32 1.92003 10.49 2.23003Z" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8.06445 15L6.58008 9.54545H8.11062L8.95579 13.2102H9.0055L9.88619 9.54545H11.3883L12.2832 13.1889H12.3294L13.1603 9.54545H14.6873L13.2065 15H11.6049L10.6674 11.5696H10.6L9.66246 15H8.06445ZM17.0071 7.72727V15H15.4943V7.72727H17.0071Z" fill="#285283"/>
          </svg>
          {% else %}
          <svg class="erl-icon-shield" width="30" height="30" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.86762 1.67251L4.12512 3.08251C3.26262 3.40501 2.55762 4.42501 2.55762 5.34001V10.9125C2.55762 11.7975 3.14262 12.96 3.85512 13.4925L7.08012 15.9C8.13762 16.695 9.87762 16.695 10.9351 15.9L14.1601 13.4925C14.8726 12.96 15.4576 11.7975 15.4576 10.9125V5.34001C15.4576 4.41751 14.7526 3.39751 13.8901 3.07501L10.1476 1.67251C9.51012 1.44001 8.49012 1.44001 7.86762 1.67251Z" stroke="#285283" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M10.6125 10.08L7.42505 6.89249" stroke="#285283" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M10.575 6.92999L7.38745 10.1175" stroke="#285283" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          {% endif %}
          <span>{{ rprl.id }}</span>
        </div>

        <div class="erl-col-status erl_row_active_{{ rprl.id }} {% if rprl.active == 'True' %}status_active_on{% else %}status_active_off{% endif %}">
          {% if rprl.end_of_life %}
          <svg class="erl-status-icon{% if rprl.active != 'True' %} hidden{% endif %}" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.4734 10.12L8.40675 8.88665C8.04675 8.67332 7.75342 8.15999 7.75342 7.73999V5.00665" stroke="#4CAF50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2.66659 4.00001C1.83325 5.11334 1.33325 6.50001 1.33325 8.00001C1.33325 11.68 4.31992 14.6667 7.99992 14.6667C11.6799 14.6667 14.6666 11.68 14.6666 8.00001C14.6666 4.32001 11.6799 1.33334 7.99992 1.33334C7.04658 1.33334 6.13325 1.53334 5.31325 1.90001" stroke="#4CAF50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          {% endif %}
          <span class="erl-status-text erl-status-active-text{% if rprl.active != 'True' %} hidden{% endif %}">{% trans 'ERL Active option' %}</span>
          <span class="erl-status-text erl-status-inactive-text{% if rprl.active == 'True' %} hidden{% endif %}">{% trans 'ERL Inactive option' %}</span>
        </div>

        <div class="erl-col-comment">{% if rprl.comment %}{{ rprl.comment }}{% endif %}</div>

        <div class="erl-col-domain">
          {% if rprl.domain %}{{ rprl.domain.0.1 }}{% if rprl.domain|length > 1 %}<span class="erl-multi-count">+{{ rprl.domain|length|add:"-1" }}</span>{% endif %}{% endif %}
        </div>

        <div class="erl-col-url">
          {% with url_total=rprl.url|length url_x_total=rprl.url_x|length %}{% if rprl.url or rprl.url_x %}{% if rprl.url %}{{ rprl.url.0.1 }}{% else %}{{ rprl.url_x.0.1 }}{% endif %}{% if url_total|add:url_x_total > 1 %}<span class="erl-multi-count">+{{ url_total|add:url_x_total|add:"-1" }}</span>{% endif %}{% endif %}{% endwith %}
        </div>

        <div class="erl-col-actions">
          <label class="switch erl_row_active_toggle_{{ rprl.id }}" onclick="event.stopPropagation()">
            <input type="checkbox"
                   {% if rprl.active == 'True' %}checked{% endif %}
                   value="true"
                   data-rprl-id="{{ rprl.id }}"
                   data-key-id="{{ key.id }}"
                   data-wl="{{ rprl.wl }}"
                   onclick="toggle_rprl_active(this)">
            <span class="slider round"></span>
          </label>
          <button type="button" class="btn erl-action-btn" onclick="edit_rprl_page('{{ rprl.id }}_{{ key.id }}')">
            <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.333 2C11.508 1.825 11.716 1.686 11.945 1.591C12.174 1.497 12.419 1.448 12.667 1.448C12.914 1.448 13.159 1.497 13.388 1.591C13.617 1.686 13.825 1.825 14 2C14.175 2.175 14.314 2.383 14.409 2.612C14.503 2.841 14.552 3.086 14.552 3.333C14.552 3.581 14.503 3.826 14.409 4.055C14.314 4.284 14.175 4.492 14 4.667L5.167 13.5L1.333 14.667L2.5 10.833L11.333 2Z" stroke="#1a5388" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <button type="button" class="btn erl-action-btn" data-toggle="modal" data-target="#delete_rprl_{{ rprl.id }}_{{ key.id }}">
            <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.6665 7.33334V11.3333" stroke="#285283" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M9.3335 7.33334V11.3333" stroke="#285283" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12.6668 4V13.3333C12.6668 13.687 12.5264 14.0261 12.2763 14.2761C12.0263 14.5262 11.6871 14.6667 11.3335 14.6667H4.66683C4.31321 14.6667 3.97407 14.5262 3.72402 14.2761C3.47397 14.0261 3.3335 13.687 3.3335 13.3333V4" stroke="#285283" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M2 4H14" stroke="#285283" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M5.3335 4.00001V2.66668C5.3335 2.31305 5.47397 1.97392 5.72402 1.72387C5.97407 1.47382 6.31321 1.33334 6.66683 1.33334H9.3335C9.68712 1.33334 10.0263 1.47382 10.2763 1.72387C10.5264 1.97392 10.6668 2.31305 10.6668 2.66668V4.00001" stroke="#285283" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          {% include 'my_waf/edit_rprl.html' %}
          {% include 'my_waf/delete_rprl.html' %}
        </div>

      </div>

      <div class="erl-detail hidden" id="erl-detail-{{ rprl.id }}_{{ key.id }}">
        <div class="erl-detail-inner">

          {% if rprl.wl_data %}
          <div class="erl-detail-block">
            <div class="erl-detail-block-title">{% trans 'ERL Signature params block title' %}:</div>
            {% for sig in rprl.wl_data %}
              {% for sig_id, zones in sig.items %}
                <div class="erl-detail-signature">
                  <div class="erl-detail-field">
                    <span class="erl-detail-label">{% trans 'ERL WL data table header' %}:</span>
                    <span class="erl-detail-value">{{ sig_id }}</span>
                  </div>
                  <div class="erl-detail-field">
                    <span class="erl-detail-label">{% trans 'ERL Zones label' %}:</span>
                    <span class="erl-detail-value">{% with zones_clean=zones|without_nomla %}{{ zones_clean|slice:":3"|join:", " }}{% if zones_clean|length > 3 %}<span class="erl-zones-extra hidden">, {{ zones_clean|slice:"3:"|join:", " }}</span>{% endif %}{% endwith %}</span>
                  </div>
                  {% with zones_clean=zones|without_nomla %}
                    {% if zones_clean|length > 3 %}
                      <button type="button" class="btn erl-expand-btn erl-expand-zones" data-text-expand="{% trans 'Expand fully' %}" data-text-collapse="{% trans 'Less button text' %}">{% trans 'Expand fully' %}</button>
                    {% endif %}
                  {% endwith %}
                  <div class="erl-detail-field">
                    <span class="erl-detail-label">{% trans 'ERL No MLA label' %}:</span>
                    <span class="erl-detail-value">{% if zones|is_nomla_signature %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</span>
                  </div>
                </div>
              {% endfor %}
            {% endfor %}
            <button type="button" class="btn erl-view-btn" onclick="edit_rprl_page('{{ rprl.id }}_{{ key.id }}', 'wl_data')">{% trans 'view' %}</button>
          </div>
          {% endif %}

          <div class="erl-detail-block">
            <div class="erl-detail-block-title">{% trans 'ERL Request params block title' %}:</div>
            {% if rprl.domain %}
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'RPRL Domain table header' %}:</span>
                <div class="erl-detail-body-wrap">
                  <span class="erl-detail-value erl-body-value">{% for el in rprl.domain %}{% if el.0 and el.0 != " " %}<span class="erl-op">{{ el.0 }}</span> {% endif %}{{ el.1 }}{% if not forloop.last %} {% endif %}{% endfor %}</span>
                  <button type="button" class="btn erl-expand-btn erl-expand-body hidden" data-text-expand="{% trans 'Expand fully' %}" data-text-collapse="{% trans 'Less button text' %}">{% trans 'Expand fully' %}</button>
                </div>
              </div>
            {% endif %}
            {% if rprl.port %}
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'RPRL Port table header' %}:</span>
                <div class="erl-detail-body-wrap">
                  <span class="erl-detail-value erl-body-value">{% for el in rprl.port %}{% if el.0 and el.0 != " " %}<span class="erl-op">{{ el.0 }}</span> {% endif %}{{ el.1 }}{% if not forloop.last %} {% endif %}{% endfor %}</span>
                  <button type="button" class="btn erl-expand-btn erl-expand-body hidden" data-text-expand="{% trans 'Expand fully' %}" data-text-collapse="{% trans 'Less button text' %}">{% trans 'Expand fully' %}</button>
                </div>
              </div>
            {% endif %}
            {% if rprl.url or rprl.url_x %}
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'RPRL URL table header' %}:</span>
                <div class="erl-detail-body-wrap">
                  <span class="erl-detail-value erl-body-value">{% for el in rprl.url %}{% if el.0 and el.0 != " " %}<span class="erl-op">{{ el.0 }}</span> {% endif %}{{ el.1 }}{% if not forloop.last %} {% endif %}{% endfor %}{% for el in rprl.url_x %}{% if el.0 and el.0 != " " %}<span class="erl-op">{{ el.0 }}</span> {% endif %}{{ el.1 }}{% if not forloop.last %} {% endif %}{% endfor %}</span>
                  <button type="button" class="btn erl-expand-btn erl-expand-body hidden" data-text-expand="{% trans 'Expand fully' %}" data-text-collapse="{% trans 'Less button text' %}">{% trans 'Expand fully' %}</button>
                </div>
              </div>
            {% endif %}
          </div>

          {% if rprl.pattern or rprl.pattern_x %}
          <div class="erl-detail-block erl-detail-block--restrictions">
            <div class="erl-detail-block-title">{% trans 'RPRL Pattern table header' %}:</div>
            <div class="erl-detail-field">
              <button type="button" class="btn erl-view-btn" onclick="edit_rprl_page('{{ rprl.id }}_{{ key.id }}', 'pattern')">{% trans 'view' %}</button>
            </div>
          </div>
          {% endif %}

          <div class="erl-detail-right-col">
            <div class="erl-detail-block">
              <div class="erl-detail-block-title">{% trans 'ERL Additional options block title' %}:</div>
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'ERL NoBan option' %}:</span>
                <span class="erl-detail-value">{% if rprl.noban == 'True' %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</span>
              </div>
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'ERL API option' %}:</span>
                <span class="erl-detail-value">{% if rprl.api == 'True' %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</span>
              </div>
              <div class="erl-detail-field">
                <span class="erl-detail-label">{% trans 'ERL LM option' %}:</span>
                <span class="erl-detail-value">{% if rprl.lm == 'True' %}{% trans 'Yes' %}{% else %}{% trans 'No' %}{% endif %}</span>
              </div>
            </div>

            {% if rprl.ip %}
            <div class="erl-detail-block">
              <div class="erl-detail-block-title">{% trans 'ERL Request source block title' %}:</div>
              <div class="erl-detail-field">
                <span class="erl-detail-label">IP:</span>
                <div class="erl-detail-body-wrap">
                  <span class="erl-detail-value erl-ip-value">{% for el in rprl.ip %}{% if el.0 and el.0 != " " %}<span class="erl-op">{{ el.0 }}</span> {% endif %}{{ el.1 }}{% if not forloop.last %}{% if forloop.counter|divisibleby:3 %}<br>{% else %} {% endif %}{% endif %}{% endfor %}</span>
                  {% if rprl.ip|length > 6 %}<button type="button" class="btn erl-expand-btn erl-expand-body" data-text-expand="{% trans 'Expand fully' %}" data-text-collapse="{% trans 'Less button text' %}">{% trans 'Expand fully' %}</button>{% endif %}
                </div>
              </div>
            </div>
            {% endif %}
          </div>

        </div>
      </div>

    </div>
  {% empty %}
    <div class="erl-empty-state">{% trans 'ERL Empty list' %}</div>
  {% endfor %}
  <div class="erl-no-search-results hidden">{% trans 'No results found' %}</div>
</div>