<form class="form-horizontal">
  <div class="span5">
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
        <span class="has-tooltip" title="Built in ID, do not change this">
          <input
            class="input-mini"
            type="text"
            id="ID"
            placeholder="ID"
            value="{{entity.id}}"
            disabled="disabled" />
        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('vid')">
      <label class="control-label" for="VID">VID</label>
      <div class="controls">
        <input
          class="input-mini"
          type="text"
          id="VID"
          placeholder="ID"
          ng-model="entity.vid"
          title="Vlan ID, you can change this" />
        <span class="help-inline" ng-bind="getError('vid')"></span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
        <span class="has-tooltip" title="The entity was created at this date">
          <input
            class="input"
            type="text"
            id="created_at"
            ng-model="entity.created_at"
            disabled="disabled" />
        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
        <span class="has-tooltip" title="The entity was last modified at this date">
          <input
            class="input"
            type="text"
            id="modified_at"
            ng-model="entity.modified_at"
            disabled="disabled" />
        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
        <input
          type="text"
          id="name"
          ng-model="entity.name"
          title="Name of this Vlan" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv4')">
      <label class="control-label" for="ipv4">IPv4</label>
      <div class="controls">
        <input
          type="text"
          id="ipv4"
          ng-model="entity.ipv4"
          title="IPv4 address of this Vlan (with subnet mask)" />
        <span class="help-inline" ng-bind="getError('ipv4')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv6')">
      <label class="control-label" for="ipv6">IPv6</label>
      <div class="controls">
        <input
          type="text"
          class="input-xlarge"
          id="ipv6"
          ng-model="entity.ipv6"
          title="IPv6 address of this Vlan (with subnet mask)" />
        <span class="help-inline" ng-bind="getError('ipv6')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('snat_ip')">
      <label class="control-label" for="snat_ip">NAT</label>
      <div class="controls">
        <input
          type="text"
          id="snat_ip"
          ng-model="entity.nat"
          title="NAT IP for this Vlan" />
        <span class="help-inline" ng-bind="getError('snat_ip')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
        <input
          type="text"
          class="owner"
          autocomplete="off"
          id="owner"
          ng-model="entity.owner.name"
          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('interface')">
      <label class="control-label" for="interface">Interface</label>
      <div class="controls">
        <input
          type="text"
          autocomplete="off"
          id="interface"
          ng-model="entity.interface"
          title="#TODO" />
        <span class="help-inline" ng-bind="getError('interface')"></span>
      </div>
    </div>
  </div>
  <div class="span5">
    <div class="control-group" ng-class="hasError('domain')">
      <label class="control-label" for="domain">Domain</label>
      <div class="controls">
        <input
          type="text"
          class="domain"
          data-provide="typeahead"
          autocomplete="off"
          id="domain"
          ng-model="entity.domain.name"
          title="Domain name" />
        <span class="help-inline" ng-bind="getError('domain')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('reverse_domain')">
      <label class="control-label" for="reverse_domain">Reverse domain</label>
      <div class="controls">
        <input
          type="text"
          autocomplete="off"
          id="reverse_domain"
          ng-model="entity.reverse_domain"
          title="Reverse domain name" />
        <span class="help-inline" ng-bind="getError('reverse_domain')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
        <textarea id="description"
          rows="2"
          ng-model="entity.description"
          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('comment')">
      <label class="control-label" for="comment">Comment</label>
      <div class="controls">
        <textarea id="comment"
          rows="2"
          ng-model="entity.comment"
          title="Some comments... #TODO">
        </textarea>
        <span class="help-inline" ng-bind="getError('comment')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('dhcp_pool')">
      <label class="control-label" for="dhcp_pool">DHCP Pool</label>
      <div class="controls">
        <textarea id="dhcp_pool"
          rows="2"
          ng-model="entity.dhcp_pool"
          title="Some DHCP Pool related thing... #TODO">
        </textarea>
        <span class="help-inline" ng-bind="getError('dhcp_pool')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('vlans')">
      <label class="control-label" for="vlans">NAT to (?)</label>
      <div class="controls">
        <div class="well well-small">
          <span class="label label-info" ng-repeat="vlan in entity.vlans | filter: destroyed">
            <a href="#/vlans/{{vlan.id}}">{{vlan.name}}</a>
            <a href ng-click="removeVlan(vlan)"><i class="icon-remove"></i></a>
          </span>
        </div>
        <div class="input-append has-tooltip" title="#TODO">
          <input class="span2 vlan" id="vlans" type="text" ng-model="newVlan">
          <button class="btn" type="button" ng-click="addVlan(newVlan)">Add</button>
        </div>
        <span class="help-inline" ng-bind="getError('vlans')"></span>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <button type="submit" class="btn" ng-click="save()">Save</button>
      </div>
    </div>
  </div>
</form>
<div class="span12">
  <h3>Rules belonging to this vlan</h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Direction</th>
        <th>Protocol</th>
        <th>Accept</th>
        <th>NAT</th>
        <th colspan="2">Owner</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="rule in entity.rules">
        <td>{{rule.direction}}</td>
        <td>{{rule.proto}}</td>
        <td>{{rule.accept}}</td>
        <td>{{rule.nat}}</td>
        <td>{{rule.owner.name}}</td>
        <td>
          <a class="btn" href="#/rules/{{rule.id}}/">Edit</a>
          <a class="btn btn-danger" href="#/rules/{{rule.id}}/delete/">Delete</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>