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

{% with target=ipam_subnet_hierarchy|last %}
{% if target %}
<table class="table table-bordered table-sm">
    <tr class="table-primary">
        <td colspan="8">
            <strong>{% translate 'Technical info' %}</strong>
        </td>
    </tr>
    <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 class="cv-ipam-value">{{ target.first_ip }}</td>
        <td class="cv-ipam-value">{{ target.last_ip }}</td>
        <td class="cv-ipam-value">{{ target.netmask }}</td>
        <td class="cv-ipam-value">/{{ target.prefixlen }}</td>
        <td class="cv-ipam-value">{{ target.size }}</td>
        <td class="cv-ipam-value">{{ target.occupancy.count }}</td>
        <td class="cv-ipam-value">{{ 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/_hierarchy_table.html' with hierarchy=ipam_subnet_hierarchy %}
{% include 'app_data/ipam/_ip_list_table.html' with ip_list=ipam_subnet_ip_list %}