{% load i18n %}
<!-- hook_ipam_subnet_detail.html only
     context: ancestors, current, children - see app_data.hook.inject_ipam_subnet_detail()
     (all three rows built from the shared app_data.ipam._build_subnet_rows()).
     Note: the row for the instance itself is passed as "current", not "self" -
     Django's include-with-arguments syntax pushes kwargs onto the context via
     a bound method call, and a kwarg literally named "self" collides with
     that method's own implicit first argument (TypeError: got multiple
     values for argument 'self'). -->
<div class="table-responsive">
<table class="table table-hover table-bordered table-sm">

    <tr class="table-warning cv-ipam-hierarchy-header">
        <th>{% translate 'Subnets' %}</th>
        <th></th>
        <th class="text-end">{% translate 'Size' %}</th>
        <th class="text-end">{% translate 'Used' %}</th>
        <th class="text-end">{% translate 'Percent' %}</th>
        <th>{% translate 'Occupancy' %}</th>
        <th>{% translate 'VLAN' %}</th>
    </tr>

    <tr class="table-secondary cv-ipam-hierarchy-separator">
        <td colspan="7">{% translate 'Parents' %}</td></tr>
    {% for row in ancestors %}
        {% include 'app_data/ipam/_subnet_hierarchy_row.html' %}
    {% empty %}
    <tr><td colspan="7" class="text-muted">{% translate 'None' %}</td></tr>
    {% endfor %}
    <tr><td colspan="7" class="text-muted">&nbsp;</td></tr>

    {% if current %}
    <tr class="table-secondary cv-ipam-hierarchy-separator">
        <td colspan="7">{% translate 'Current' %}</td></tr>
        {% include 'app_data/ipam/_subnet_hierarchy_row.html' with row=current %}
    {% endif %}
    <tr><td colspan="7" class="text-muted">&nbsp;</td></tr>

    <tr class="table-secondary cv-ipam-hierarchy-separator">
        <td colspan="7">{% translate 'Childs' %}</td></tr>
    {% for row in children %}
        {% include 'app_data/ipam/_subnet_hierarchy_row.html' %}
    {% empty %}
    <tr><td colspan="7" class="text-muted">{% translate 'None' %}</td></tr>
    {% endfor %}

</table>
</div>