{% load i18n %}
<hr>
<div id="ipam-hierarchy" class="cv-scroll-anchor"></div>

{% with target=ipam_subnet_self %}
{% if target %}
<table class="table table-bordered table-sm">

    <tr class="table-primary">
        <th>{% translate 'First IP' %}</th>
        <th>{% translate 'Last IP' %}</th>
        <th>{% translate 'Mask' %}</th>
        <th>{% translate 'CIDR' %}</th>
        <th>{% translate 'Size' %}</th>
        <th>{% translate 'Used' %}</th>
        <th>{% translate 'Percent' %}</th>
        <th>{% translate 'Occupancy' %}</th>
    </tr>
    <tr>
        <td>{{ target.first_ip }}</td>
        <td>{{ target.last_ip }}</td>
        <td>{{ target.netmask }}</td>
        <td>/{{ target.prefixlen }}</td>
        <td>{{ target.size }}</td>
        <td>{{ target.occupancy.count }}</td>
        <td>{{ target.occupancy.percent }}%</td>
        <td>
            <div class="progress cv-ipam-progress" role="progressbar"
                 aria-label="{% translate 'occupancy' %}" aria-valuenow="{{ target.occupancy.percent }}"
                 aria-valuemin="0" aria-valuemax="100">
                {% widthratio target.occupancy.percent 100 70 as bar_width_px %}
                <div class="progress-bar" style="width: {{ bar_width_px }}px"></div>
            </div>
        </td>
    </tr>
</table>
{% endif %}
{% endwith %}

{% include 'app_data/ipam/_subnet_hierarchy_table.html' with ancestors=ipam_subnet_ancestors current=ipam_subnet_self children=ipam_subnet_children %}
{% include 'app_data/ipam/_ip_list_table.html' with ip_list=ipam_subnet_ip_list %}