{% load i18n %}
<!-- shared by hook_ipam_ip_detail.html / hook_ipam_subnet_detail.html / hook_ipam_vlan_detail.html
     context: hierarchy (list, see app_data.ipam._build_hierarchy_entries) -->
<div class="table-responsive">
<table class="table table-hover table-bordered table-sm">
    <tr class="table-warning">
        <td colspan="6">
            <strong>{% translate 'Subnet hierarchy and VLANs' %}</strong>
        </td>
    </tr>
    <tr class="table-light cv-ipam-hierarchy-row-sm">
        <th>{% translate 'Subnet' %}</th>
        <th>{% translate 'Description' %}</th>
        <th class="text-end">{% translate 'Used' %}</th>
        <th class="text-end">{% translate 'Percent' %}</th>
        <th>{% translate 'Occupancy' %}</th>
        <th>{% translate 'VLAN' %}</th>
    </tr>
    {% for row in hierarchy %}
    <tr class="cv-ipam-hierarchy-row-sm">
        <td class="cv-ipam-hierarchy-col-subnet">
            <span class="cv-ipam-hierarchy-mono"><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.indent }}{{ row.keyname }}</a></span>{% if row.is_containing %} <i class="fa fa-asterisk"></i>{% endif %}
        </td>
        <td><a href="{% url 'app_data:instance_detail' row.id %}">{{ row.description }}</a></td>
        <td class="text-end cv-ipam-value">{{ row.occupancy.count }}</td>
        <td class="text-end cv-ipam-value">{{ row.occupancy.percent }}%</td>
        <td>
            <div class="progress cv-ipam-progress" role="progressbar"
                 aria-label="{% translate 'occupancy' %}" aria-valuenow="{{ row.occupancy.percent }}"
                 aria-valuemin="0" aria-valuemax="100">
                {% widthratio row.occupancy.percent 100 70 as bar_width_px %}
                <div class="progress-bar" style="width: {{ bar_width_px }}px"></div>
            </div>
        </td>
        <td>
            {% for vlan in row.vlans %}
                <a href="{% url 'app_data:instance_detail' vlan.id %}">{{ vlan.displayname }}</a>{% if not forloop.last %}, {% endif %}
            {% endfor %}
        </td>
    </tr>
    {% empty %}
    <tr class="cv-ipam-hierarchy-row-sm"><td colspan="6" class="text-muted">{% translate 'No containing subnet found' %}</td></tr>
    {% endfor %}
</table>
</div>