{% load i18n %}
<!-- shared by hook_ipam_subnet_detail.html / hook_ipam_vlan_detail.html
     context: ip_list (dict: rows/total/truncated, see app_data.ipam.subnet_ip_list)
              subnet_id (ipam_subnet instance id, for the full-list CSV link) -->
{% if ip_list.total %}
<div class="table-responsive">
<table class="table table-hover table-bordered table-sm cv-ipam-hierarchy-row-sm">
    <tr class="table-warning">
        <td colspan="5">
            <strong>{% translate 'IP(s)' %}</strong>
            {% if ip_list.truncated %}
            <span class="cv-ipam-ip-list-note">
                {% blocktranslate with shown=ip_list.rows|length total=ip_list.total %}showing first {{ shown }} of {{ total }}{% endblocktranslate %}
            </span>
            {% endif %}
            {% if subnet_id %}
            <a class="cv-ipam-ip-list-download"
               href="{% url 'app_data:ipam_subnet_ip_list_download' subnet_id %}">
                <i class="fa fa-download" aria-hidden="true"></i>{% translate 'Download full list (CSV)' %}
            </a>
            {% endif %}
        </td>
    </tr>
    <tr class="table-light">
        <th>{% translate 'IP' %}</th>
        <th>{% translate 'Collected' %}</th>
        <th>{% translate 'Classname' %}</th>
        <th>{% translate 'Keyname' %}</th>
        <th>{% translate 'Displayname' %}</th>
    </tr>
    {% for row in ip_list.rows %}
        {% for ref in row.referrers %}
        <tr>
            <td><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.displayname }}</a></td>
            <td>{% if row.collected %}<i class="fa fa-check" aria-hidden="true"></i>{% endif %}</td>
            <td>{{ ref.classname }}</td>
            <td>{{ ref.keyname }}</td>
            <td><a href="{% url 'app_data:instance_detail' ref.id %}">{{ ref.displayname|default:ref.keyname }}</a></td>
        </tr>
        {% empty %}
        <tr>
            <td><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.displayname }}</a></td>
            <td>{% if row.collected %}<i class="fa fa-check" aria-hidden="true"></i>{% endif %}</td>
            <td class="text-muted" colspan="3">{{ row.description }}</td>
        </tr>
        {% endfor %}
    {% endfor %}
</table>
</div>
{% endif %}