{% load util %}
{% load i18n %}

<!-- PEERS -->

<div class="list" data-sort-container=".scrollable" data-sort-row=".row">
  <div class="row">
    <div class="col-xs-6 col-sm-8 col-md-8">
      <h5>{% trans "Peers at this Exchange Point" %}</h5>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4 filter">
      <input type="text" placeholder="{% trans "Filter" %}" data-filter-target="#list-networks" class="form-control" />
    </div>
  </div>
  <div class="row header">
    <div class="col-xs-6 col-sm-4 col-md-4">
      <div data-sort-target=".peer" data-sort-initial="asc">{% trans "Peer Name" %}</div>
      <div data-sort-target=".ip4" data-sort-type="natural" class="ambiguous">{% trans "IPv4" %}</div>

    </div>
    <div class="col-xs-6 col-sm-3 col-md-3">
      <div data-sort-target=".asn" class="numeric">{% trans "ASN" %}</div>
      <div data-sort-target=".ip6" data-sort-type="natural" class="ambiguous">{% trans "IPv6" %}</div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 hidden-xs">
      <div data-sort-target=".speed" class="numeric">{% trans "Speed" %}</div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 hidden-xs">
      <div>{% trans "Policy" %}</div>
    </div>
  </div>

  <div class="scrollable" id="list-networks">

    <div class="empty-result">
      <div class="message">{% trans "No filter matches." %}</div>
      <div class="help">
        {% spaceless %}
        {% trans "You may filter by" %}
        <b>{% trans "Exchange" %}</b>, <b>{% trans "ASN" %}</b>, <b>{% trans "Policy" %}</b>,
        <b>{% trans "IP" %}</b> {% trans "or" %} <b>{% trans "Speed" %}.</b>
        {% endspaceless %}
      </div>
    </div>

    {% for x in data.networks %}

    <div class="row item {% if x.operational %}operational{% endif %}">
      <div class="col-xs-4 col-sm-4 col-md-4">

        <div class="peer" data-sort-value="{{ x.network.name|lower }}" data-filter-value="{{ x.network.name }}">
          <a href="/{{ x.network|ref_tag }}/{{ x.network.id }}">

            {{ x.network.name }}
          </a>

          <span class="glyphicon glyphicon-warning-sign not-operational" data-edit-toggled="view" data-bs-toggle="tooltip" title="{% trans "Not operational" %}" aria-hidden="true"></span>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3">
      <div class="asn" data-sort-value="{{ x.asn }}" data-filter-value="{{ x.asn }}">{{ x.asn }}</div>
      </div>
      <div class="col-xs-2 col-sm-2 col-md-2 hidden-xs">
        <div class="speed" data-sort-value="{{ x.speed }}" data-filter-value="{{ x.speed|pretty_speed}}">{{ x.speed|pretty_speed }}</div>
      </div>
      <div class="col-xs-2 col-sm-2 col-md-3 hidden-xs">
        <div class="policy" data-filter-value="{{ x.network.policy_general }}">
          {% if x.is_rs_peer %}
            <span alt="RS Peer" title="RS Peer" class="rs-peer-badge">
              <img class="checkmark" src="{{ STATIC_URL }}rs_peer.png" alt="RS PEER" />
            </span>
          {% endif %}

          {{ x.network.policy_general }}
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-4">
          <div class="ip4" data-sort-value="{{ x.ipaddr4|none_blank }} {{ x.ipaddr6|none_blank }}" data-filter-value="{{x.ipaddr4}}">{{ x.ipaddr4|none_blank }}</div>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-8">
        <div class="ip6" data-sort-value="{{ x.ipaddr6|none_blank }} {{ x.ipaddr4|none_blank }}" data-filter-value="{{x.ipaddr6}}">{{ x.ipaddr6|none_blank }}</div>
      </div>

    </div>

    {% endfor %}

  </div>
</div>