<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="ID">ID</label>
    <div class="controls">
      <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{rule.id}}" disabled="disabled">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="targetType">Target type</label>
    <div class="controls">
      <select id="targetType" ng-model="rule.target.type">
        <option value="vlan">Vlan</option>
        <option value="vlangroup">VlanGroup</option>
        <option value="host">Host</option>
        <option value="hostgroup">HostGroup</option>
        <option value="firewall">Firewall</option>
      </select>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="targetName">Target</label>
    <div class="controls">
      <input type="text" data-provide="typeahead" autocomplete="off" id="targetName" value="{{rule.target.name}}" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="direction">Direction</label>
    <div class="controls">
      <select id="direction" ng-options="choice[0] as choice[1] for choice in rule.direction.choices" ng-model="rule.direction.value">
      </select>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>
