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

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

{% block title %}
<h2>{% translate 'IPAM - IPs' %}</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 'Search IPs (address, name, description)...' %}"
                name="query" value="{{ query|default:'' }}">
        </form>
    </div>
</div>

<small class="text-muted">{{ paginator.count }} {% translate 'IPs' %}</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 'IP' %}</th>
        <th>{% translate 'Name' %}</th>
        <th>{% translate 'Description' %}</th>
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
    <tr>
        <td><a class="cv-ipam-link" href="{% url 'app_ipam:ip_view' %}?ip={{ row.keyname }}">{{ row.keyname }}</a></td>
        <td>{{ row.displayname }}</td>
        <td>{{ row.description|default:'' }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="3" class="text-muted"><i>{% translate 'No IP found.' %}</i></td></tr>
    {% endfor %}
  </tbody>
  </table>
</div>

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

{% endblock %}