{% load i18n %}
<!-- one or more <tr> for one ipam_vlan - included by instance_list.html's
     hook_ipam_vlan_list branch (VLAN list view, default dataview only, no
     burger-menu cell) context: row (see app_data.ipam.build_vlan_rows). One
     row per referenced subnet (Subnet/Size/Used/Percent/Occupancy as their
     own columns, same layout as _subnet_hierarchy_row.html) - the VLAN's own
     columns are row-spanned across them so they're only shown once. A VLAN
     with no subnets gets a single row with those columns dashed out. -->
{% with subnet_count=row.subnets|length %}
{% for s in row.subnets %}
<tr>
    {% if forloop.first %}
    <td rowspan="{{ subnet_count }}">
        <a href="{% url 'app_data:instance_detail' row.id %}">{{ row.keyname }}</a>
    </td>
    <td rowspan="{{ subnet_count }}">
        <a href="{% url 'app_data:instance_detail' row.id %}">{{ row.displayname }}</a>
    </td>
    <td rowspan="{{ subnet_count }}">{{ row.description }}</td>
    <td rowspan="{{ subnet_count }}" class="text-end">{{ row.vlan_id }}</td>
    {% endif %}
    <td><a href="{% url 'app_data:instance_detail' s.id %}">{{ s.keyname }}</a></td>
    <td class="text-end">{{ s.size }}</td>
    <td class="text-end">{{ s.occupancy.count }}</td>
    <td class="text-end">{{ s.occupancy.percent }}%</td>
    <td>
        <div class="progress cv-ipam-progress" role="progressbar"
             aria-label="{% translate 'occupancy' %}" aria-valuenow="{{ s.occupancy.percent }}"
             aria-valuemin="0" aria-valuemax="100">
            {% widthratio s.occupancy.percent 100 70 as bar_width_px %}
            <div class="progress-bar" style="width: {{ bar_width_px }}px"></div>
        </div>
    </td>
</tr>
{% empty %}
<tr>
    <td><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.keyname }}</a></td>
    <td><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.displayname }}</a></td>
    <td>{{ row.description }}</td>
    <td class="text-end">{{ row.vlan_id }}</td>
    <td colspan="5">-</td>
</tr>
{% endfor %}
{% endwith %}