{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<h2>{% translate 'IPAM - IP Subnets' %}</h2>
<hr>{% endblock %}


{% block content %}

<div class="d-flex">
    <div class="flex-grow-1 p-2">
        <form class="cv-search-form" action="" method="GET">
            <button class="btn btn-success me-2" type="submit" id="search">
            <i class="fa fa-lg fa-search"></i>
            </button>
            <input type="text" class="form-control" size="120"
                placeholder="{% translate 'Filter by CIDR prefix (10.1.) or description...' %}"
                name="query" value="{{ query|default:'' }}">
        </form>
    </div>
</div>

<small class="text-muted">{{ paginator.count }} {% translate 'subnets' %}</small>

<div class="card mt-2">
  <table class="table table-striped table-hover table-sm cv-ipam-table mb-0">
  <thead class="thead-dark">
    <tr>
        <th>{% translate 'Subnet' %}</th>
        <th>{% translate 'Description' %}</th>
        <th class="text-end">{% translate 'Max IPs' %}</th>
        <th class="text-end">{% translate 'Used' %}</th>
        <th class="text-end">{% translate 'Used %' %}</th>
        <th>{% translate 'Occupancy' %}</th>
        <th>{% translate 'First IP' %}</th>
        <th>{% translate 'Last IP' %}</th>
        <th>{% translate 'Mask' %}</th>
        <th>{% translate 'CIDR' %}</th>
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
    <tr>
        <td><a class="cv-ipam-link cv-ipam-size-{{ row.size_class }}" href="{% url 'app_ipam:subnet_view' %}?subnet={{ row.ref.subnet }}">{{ row.ref.subnet }}</a></td>
        <td>{{ row.ref.description|default:'' }}</td>
        <td class="text-end cv-ipam-value">{{ row.ref.network.num_addresses }}</td>
        {% if row.occupancy.computed %}
        <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>
        {% else %}
        <td class="text-end text-muted">{% translate 'n/a' %}</td>
        <td class="text-end text-muted">{% translate 'n/a' %}</td>
        <td class="text-muted">{% translate 'n/a' %}</td>
        {% endif %}
        <td class="cv-ipam-value">{{ row.ref.network.network_address }}</td>
        <td class="cv-ipam-value">{{ row.ref.network.broadcast_address }}</td>
        <td class="cv-ipam-value">{{ row.ref.network.netmask }}</td>
        <td class="cv-ipam-value">/{{ row.ref.prefixlen }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="10" class="text-muted"><i>{% translate 'No subnet found.' %}</i></td></tr>
    {% endfor %}
  </tbody>
  </table>
</div>

{% with pg_param="query" pg_value=query %}
{% include 'app_ipam/_paginator.html' %}
{% endwith %}

{% endblock %}