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

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

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

<small class="text-muted">{{ paginator.count }} {% translate 'VLANs' %}</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 'VLAN' %}</th>
        <th>{% translate 'Name' %}</th>
        <th>{% translate 'Description' %}</th>
        <th>{% translate 'VLAN ID' %}</th>
        <th>{% translate 'Subnet(s)' %}</th>
    </tr>
  </thead>
  <tbody>
    {% for vlan in rows %}
    <tr>
        <td><a class="cv-ipam-link" href="{% url 'app_ipam:vlan_view' %}?vlan={{ vlan.vlan }}">{{ vlan.vlan }}</a></td>
        <td>{{ vlan.displayname }}</td>
        <td>{{ vlan.description|default:'' }}</td>
        <td class="cv-ipam-value">{{ vlan.vlan_id|default:'' }}</td>
        <td>
            {% for s in vlan.subnet %}
            <a class="cv-ipam-link" href="{% url 'app_ipam:subnet_view' %}?subnet={{ s.subnet }}">{{ s.subnet }}</a>{% if not forloop.last %}, {% endif %}
            {% endfor %}
        </td>
    </tr>
    {% empty %}
    <tr><td colspan="5" class="text-muted"><i>{% translate 'No VLAN found.' %}</i></td></tr>
    {% endfor %}
  </tbody>
  </table>
</div>

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

{% endblock %}