{% extends "network/base.html" %}
{% load render_table from django_tables2 %}
{% load i18n %}
{% load l10n %}
{% load static %}

{% block title-page %}{% trans "Hosts" %}{% endblock %}

{% block content %}
<div class="page-header">
  <a href="{% url "network.host_create" %}" class="btn btn-success pull-right">
    <i class="fa fa-plus-circle"></i>
    {% trans "Create a new host" %}
  </a>
  <h1>
    {% trans "Hosts" %}
    <small>{% trans "list of all hosts" %}</small>
  </h1>
</div>

<div class="row">
  <div class="col-md-9">
    <ul class="nav nav-pills" style="margin: 5px 0 20px 0;">
      <li class="disabled"><a href="#">{% trans "Filter by vlans" %}</a></li>
      <li {% if not request.GET.vlan %} class="active"{% endif %}>
        <a href="{{ request.path }}">{% trans "ALL" %}</a>
      </li>
      {% for vlan in vlans %}
        <li{% if request.GET.vlan|add:"0" == vlan.id %} class="active"{% endif %}>
          <a href="?vlan={{ vlan.id }}">{{ vlan.name }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="col-md-3">
    <form action="" method="GET" id="network-host-list-form">
      <div class="input-group">
        <input type="text" id="network-host-list-input" name="s" class="form-control"
        value="{{ request.GET.s }}" placeholder="{% trans "Search..." %}"/>
        <span class="input-group-btn">
          <button class="btn btn-primary"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </form>
  </div>
</div>

<div class="table-responsive">
  {% render_table table %}
</div>
{% endblock %}
