{% load i18n %}

<table class="table" id="wl_table_{{ key.id }}" style="margin-left: 56px; margin-top: 5px; width: calc(100% - 70px);">
  <thead class="key_table_header" id="wl_row_head_{{ key.id }}">
  <tr>
    <th style="vertical-align: middle; width: 90px;" scope="col">{% trans 'WL ID table header' %}</th>
    <th style="vertical-align: middle; width: 70px;" scope="col">{% trans 'WL Active option' %}</th>
    <th style="vertical-align: middle;" scope="col">{% trans 'WL Domain table header' %}</th>
    <th style="vertical-align: middle; width: 530px;" scope="col">{% trans 'WL MZ table header' %}</th>
    <th style="vertical-align: middle;" scope="col">{% trans 'WL Extension table header' %}</th>
    <th style="vertical-align: middle; width: 90px;" scope="col">{% trans 'WL Actions table header' %}</th>
  </tr>
  </thead>
  <tbody>
  {% for rule in key.wl_dicts %}
    <tr class="wl_row_{{ rule.rid }}" style="height: 53px;">
      <td style="border: 1px solid #D5E4F3;" class="row_wl_id_{{ rule.rid }}">{{ rule.wl_id }}</td>
      <td style="border: 1px solid #D5E4F3;" class="row_options_{{ rule.rid }}">
        <div>
          <div style="white-space: nowrap;">
            <div style="display: inline-block;" title="{% trans 'WL Active option' %}"
                 class="{% if rule.active == True %}status_active_on{% else %}status_active_off{% endif %} wl_row_options_active_{{ rule.rid }}">
              <i style="font-size: 14px;" class="fa fa-circle" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </td>
      <td style="border: 1px solid #D5E4F3;" class="row_domain_{{ rule.rid }}">{{ rule.domain }}</td>
      <td style="border: 1px solid #D5E4F3;" class="row_mz_{{ rule.rid }}">{% for mz_rule in rule.mz %}{{ mz_rule }}{% if not forloop.last %}|{% endif %}{% endfor %}</td>
      <td style="border: 1px solid #D5E4F3;" class="row_extension_{{ rule.rid }}"
          style="word-break: break-all;">{{ rule.extension }}</td>
      <td style="border: 1px solid #D5E4F3;">
        <button type="button" data-toggle="modal"
                onclick="show_modal_Edit_WL('{{ rule.rid }}','{{ key.id }}')"
                class="btn action"><i
                class="fa fa-pencil" aria-hidden="true"></i></button>
        {% include 'my_waf/edit_wl.html' %}
        <button type="button" data-toggle="modal" data-target="#delete_wl_{{ rule.rid }}_{{ key.id }}"
                class="btn action"><i
                class="fa fa-times" aria-hidden="true"></i></button>
        {% include 'my_waf/delete_wl.html' %}
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>