{% extends '_base.html' %}
{% load helpers %}
{% load form_helpers %}

{% block title %}VLANs{% endblock %}

{% block content %}
<div class="pull-right">
    {% if perms.ipam.add_vlan %}
		<a href="{% url 'ipam:vlan_add' %}" class="btn btn-primary">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
			Add a VLAN
		</a>
		<a href="{% url 'ipam:vlan_import' %}" class="btn btn-info">
			<span class="glyphicon glyphicon-import" aria-hidden="true"></span>
			Import VLANs
		</a>
	{% endif %}
    {% include 'inc/export_button.html' with obj_type='VLANs' %}
</div>
<h1>VLANs</h1>
<div class="row">
	<div class="col-md-9">
        {% include 'utilities/obj_table.html' with bulk_edit_url='ipam:vlan_bulk_edit' bulk_delete_url='ipam:vlan_bulk_delete' %}
	</div>
	<div class="col-md-3">
		<div class="panel panel-default">
			<div class="panel-heading">
				<strong>Search by ID</strong>
			</div>
			<div class="panel-body">
				<form action="{% url 'ipam:vlan_list' %}" method="get">
					<div class="input-group">
						<input type="text" name="vid" class="form-control" placeholder="VLAN ID" {%  if request.GET.vid %}value="{{ request.GET.vid }}" {% endif %}/>
						<span class="input-group-btn">
							<button type="submit" class="btn btn-primary">
								<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
							</button>
						</span>
					</div>
				</form>
			</div>
		</div>
		{% include 'inc/filter_panel.html' %}
	</div>
</div>
{% endblock %}
