{% load static %}
{% load i18n %}
<div id="content_id">
<span style="display: none;" id="home">{{home}}</span>
<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 data-index = "{{ forloop.counter }}" style = "{% if key.description == user_descr %}border-radius: 4px;background-color: white;{% endif %}" class="ec_user nav-item horizontal-item rule_key_tab">
        <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 key.description == user_descr %} active {% endif %} vertical_tab"
           data-toggle="tab" href="#{{ key.id }}"
           onclick="get_info_for_user('{{ forloop.counter }}')"
        >{{ key.description }}

        </a>
      </li>
    {% endfor %}
  </ul>
  </div>
  <div class="tab-content" style = "margin-top:-30px;float: left; width:1300px;display: inline-block;">

    <div id="head" style = "margin-left: 70px;margin-top: 50px;justify-content: space-between;" class="add-rules-bs">
      <div class="btn-group">
          <button style = "height:32px;background-color: white;" onfocus="$(this).css('color','#134473')" type="button" class="btn-default_bs btn" data-toggle="dropdown" title="{{domain}}">
	          <span style="position: relative;top: -6px;text-align: start;display: inline-block;width:150px;"
                    class="multiselect-selected-text">
                {% if domain == 'DEFAULT' %}
                    {% trans 'for all domains BS' %}
                {% else %}
                    {{ domain|slice:":16" }}
                {% endif %}
              </span>
	      <svg style = "transform: rotate(180deg);position: relative;top: -5px;" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
            <style>svg{fill:#3d5785}</style><path d="M233.4 105.4c12.5-12.5 32.8-12.5
	      45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6
	      342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>
          </button>

          <ul class="multiselect-container dropdown-menu">
              <div class="scrol_ec">
                  {% for key,value in len_ip_dict.items %}
                      {% if key == 'DEFAULT' %}
                          <li onclick="changes_domain(this)">
                              <div class="hover_bs_li">

                                  <label class="domain_bs_p hover_bs_li " data-domain="{{ key }}"
                                         style="margin-top:5px;font-weight: normal;margin-left:20px;display:inline-block;"
                                         class="checkbox">
                                      {% if key == 'DEFAULT' %}
                                          {% trans 'for all domains BS' %}
                                      {% else %}
                                          {% if key|length > 16 %}
                                              {{ key|slice:":16" }}...
                                          {% else %}
                                              {{ key }}
                                          {% endif %}
                                      {% endif %}
                                  </label>


                                  <label class="hover_bs_li"
                                         style="margin-top:5px;font-weight: normal;float: right;margin-right:20px;display:inline-block;">{{ value }}</label>

                              </div>

                          </li>
                      {% endif %}
                  {% endfor %}
                  {% for key,value in len_ip_dict.items %}
                      {% if key == 'DEFAULT' %}
                      {% else %}
                          <li onclick="changes_domain(this)">
                              <div class="hover_bs_li">

                                  <label class="domain_bs_p hover_bs_li " data-domain="{{ key }}"
                                         style="margin-top:5px;font-weight: normal;margin-left:20px;display:inline-block;"
                                         class="checkbox">
                                      {% if key == 'DEFAULT' %}
                                          {% trans 'for all domains BS' %}
                                      {% else %}
                                          {% if key|length > 16 %}
                                              {{ key|slice:":16" }}...
                                          {% else %}
                                              {{ key }}
                                          {% endif %}
                                      {% endif %}
                                  </label>


                                  <label class="hover_bs_li"
                                         style="margin-top:5px;font-weight: normal;float: right;margin-right:20px;display:inline-block;">{{ value }}</label>

                              </div>

                          </li>
                      {% endif %}
                  {% endfor %}
              <div>
          </ul>
      </div>
      <input type="text_search_ip_bs" id="search_ip_bs" class="form-control "
             placeholder="{% trans 'search ip BS' %}" style="width: 250px; height:32px;margin-left: 245px; margin-top: -31px;">
    <div id = 'ip_info_' style = "margin-right: 25px;float: right;margin-top: -45px;">
      <label style = "font-weight: normal;position: relative;top:2px;font-size: 14px;">{% trans 'Description about ip for BS' %}</label>
      <label  style = "font-weight: normal;position: relative;top:2px;font-size: 14px;" class="all_ip">{{len_list}}</label>
      <button id="Dell_all_ip" onclick="Dell_all_ip()" style="height:32px;margin-left: 20px; font-size: 14px; position: relative; left: 0;border-radius: 6px;" class="btn btn-default m_btn save_button">
        <span style="position: relative;top:-6px">{% trans 'Button del ip for BS' %}</span>
      </button>
    <p id = "page" info = "{{page}}" style = "display:none"></p>
    <p id = "key_user" info = "{{key_user}}" style = "display:none"></p>
    </div>
      {% if list|length == 0 %}
      {% else %}
        {% if list|length == 1 %}

        <table class="table_bs" id="sdf" style="width: calc(39% - 10px); height: fit-content; margin-right: 25px">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 150px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 50px;" scope="col">TTL
          <la onclick="sort_table(1,this)" style = "float:right;margin-right: 5px" >
            <svg data-rotate = 'yes' style = "margin-top: -10px;position: relative;" class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </la>
          </th>
        </tr>
        </thead>

        <tbody data-table = "1">
        {% for i in list.0 %}
        <tr table = "1" class="key_table_row">

          <input type="hidden" class="row-domain">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div data-position="{{i.ttl}}"  class="bs_domain">
                <a style = "float: left; margin-left: 20px; margin-top: 5px" onclick="del_ip_bs({{i}},'{{domain}}')" class="del_bs_domain fa fa-trash" >

              </a>
              <span style = "float: left; margin-left: 10px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}
            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="">
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
      {% elif list|length == 2 %}

      <div class = "table_bs" style = 'width: 100%; display: flex;'>
        <table class="table_bs" id="1" style="display: inline-block;">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 250px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 150px;" scope="col">TTL
          <a onclick="sort_table(1,this)" style = "float:right;margin-right: 5px" >
            <svg data-rotate = 'yes' style = "margin-top: -10px;position: relative;" class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </a>
          </th>
        </tr>
        </thead>

        <tbody data-table = "1">
        {% for i in list.0 %}
        <tr table = "1" class="key_table_row">

          <input type="hidden" class="row-domain" value="__ALL__">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div data-position="{{i.ttl}}"  class="bs_domain">
                <a style = "float: left; margin-left: 40px; margin-top: 5px" onclick="del_ip_bs({{i}},'{{domain}}')"
                   class="del_bs_domain fa fa-trash"  >

              </a>

              <span style = "float: left; margin-left: 20px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}

            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="" >
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
        <table class="table_bs" id="" style="display: inline-block;">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 250px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 150px;" scope="col">TTL
          <a onclick="sort_table(2,this)" style = "top: 1px;position: relative;margin-right: 40px;float:right;margin-right: 5px" >
            <svg  data-rotate = 'yes' class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </a>
          </th>
        </tr>
        </thead>

        <tbody data-table = "2">
        {% for i in list.1 %}
        <tr  table = "2" class="key_table_row">

          <input type="hidden" class="row-domain" value="__ALL__">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div  data-position="{{i.ttl}}"  class="bs_domain">
                <a style = "float: left; margin-left: 40px; margin-top: 5px;" onclick="del_ip_bs({{i}},'{{domain}}')"
                   class="del_bs_domain fa fa-trash"  >

              </a>
              <span style = "float: left; margin-left: 20px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}

            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="">
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
        </div>
      {% if button != None %}
        <button  onclick="show_more()" style="top:10px; margin-left: 500px; font-size: 12px; position: relative;
        left: 0;border-radius: 10px;" class="btn btn-default m_btn save_button">
        {% trans 'Show more for BS' %}
      </button>
      {% endif %}
      {% elif list|length >= 3 %}


      <div class = "table_bs" style = 'width: 100%; display: flex;'>
        <table class="table_bs" id="dsf" style="display: inline-block;">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 250px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 150px;" scope="col">TTL
          <a onclick="sort_table(1,this)" style = "float:right;margin-right: 5px" >
            <svg  data-rotate = 'yes' style = "margin-top: -10px;position: relative;" class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </a>
          </th>
        </tr>
        </thead>

        <tbody data-table = "1">
        {% for i in list.0 %}
        <tr table = "1" class="key_table_row">

          <input type="hidden" class="row-domain" value="__ALL__">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div data-position="{{i.ttl}}" class="bs_domain">
                <a style = "float: left; margin-left: 20px; margin-top: 5px" onclick="del_ip_bs({{i}},'{{domain}}')"
                   class="del_bs_domain fa fa-trash"  >

              </a>
              <span style = "float: left; margin-left: 20px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}
            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="" >
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
        <table class="table_bs" id="" style="display: inline-block;">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 250px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 150px;" scope="col">TTL
          <a onclick="sort_table(2,this)" style = "float:right;margin-right: 5px">
            <svg data-rotate = 'yes' style = "margin-top: -10px;position: relative;" class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </a>
          </th>
        </tr>
        </thead>

        <tbody data-table = "2">
        {% for i in list.1 %}
        <tr table = "2" class="key_table_row">

          <input  type="hidden" class="row-domain" value="__ALL__">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div data-position="{{i.ttl}}"  class="bs_domain">
                <a style = "float: left; margin-left: 20px; margin-top: 5px" onclick="del_ip_bs({{i}},'{{domain}}')"
                   class="del_bs_domain fa fa-trash"  >

              </a>
              <span style = "float: left; margin-left: 20px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}

            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="">
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>
        </table>
        <table class="table_bs" id="" style="display: inline-block;">
        <input class="key_id hidden" type="hidden" value="1">
        <thead class="key_table_header_bs">
        <tr>
          <th style="vertical-align: middle; width: 250px;" scope="col">{% trans 'IP addres BS' %}</th>
          <th style="vertical-align: middle; width: 150px;" scope="col">TTL
          <a onclick="sort_table(3,this)" style = "float:right;margin-right: 5px">
            <svg data-rotate = 'yes' style = "margin-top: -10px;position: relative;" class = "sort_bs" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 576 512">
              <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96
              365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7
              0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7
              0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7
              0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/></svg>
          </a>
          </th>
        </tr>
        </thead>

        <tbody data-table = "3">
        {% for i in list.2 %}
        <tr table = "3" class="key_table_row">

          <input type="hidden" class="row-domain" value="__ALL__">
          {% if i.ip|length > 16 %}
          <td class="vertical-align domain" title="{{i.ip}}">
            {% else %}
            <td class="vertical-align domain">
            {% endif %}
            <div data-position="{{i.ttl}}">
                <a style = "float: left; margin-left: 20px; margin-top: 5px" onclick="del_ip_bs({{i}},'{{domain}}')"
                   class="del_bs_domain fa fa-trash" >

              </a>
              <span style = "float: left; margin-left: 20px; overflow: hidden;text-overflow: ellipsis;">
                {% if i.ip|length > 16 %}
                {{i.ip|slice:":16"}}...
                {% else %}
                {{i.ip}}
                {% endif %}
              </span>
              {% if i.ip|length > 16 %}
              <svg class = 'bs_svg_copy' data-clipboard-text="{{i.ip}}" style = "float: right;margin-top: -5px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 512 512">
                <style>svg{fill:#2c4d87}</style><path d="M448 384H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64H396.1c12.7 0
                24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V320c0 35.3-28.7 64-64 64zM64
              128h96v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H256c8.8 0 16-7.2 16-16V416h48v32c0 35.3-28.7 64-64 64H64c-35.3
              0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>
              {% endif %}

            </div>
          </td>
          <td data-position="{{i.ttl}}" class="vertical-align" style="">
            <p style = "display: inline-block;width:100px;" class="count-ips_bs" title="{{i.ttl}}">
              {{i.ttl}} {% trans 'seconds BS' %}.
            </p>
          </td>
        </tr>
        {% endfor %}
        </tbody>
      </table>

        </div>
      {% if button != None %}
        <button  onclick="show_more('{{domain}}')" style="top:10px; margin-left: 500px; font-size: 12px; position: relative;
        left: 0;border-radius: 10px;" class="btn btn-default m_btn save_button">
        {% trans 'Show more for BS' %}
      </button>
      {% endif %}
      {% endif %}
      {% endif %}
    </div>
        <style>
.scrollable {
  scrollbar-color: yellow green;
  scrollbar-width: thin;
}
.ec_user:hover{
cursor: pointer;
}
.fa-spinner {
    margin: 20px;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 4s infinite linear;
    margin-left: 600px;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

        </style>
</div>
<div  style = "display: none;" class="loading-container_overlay">
    <i  style=""class="fa fa-spinner fa-5x" aria-hidden="true"></i>
  </div>
</div>