<tabset justified="true">
  <tab ng-repeat="t in tabs"  select="go(t.route)" active="t.active"><tab-heading ng-bind-html="t.heading"></tab-heading></tab>
</tabset>

<div class="editor-container">
  <h4 class="bg-primary">Add Advanced Device ALPHA</h4>

  <div class="row">
    <div class="col-xs-12 col-sm-8">
      <ui-select  ng-model="dbEdit.category" theme="bootstrap" on-select="selectCategory($item)" required>
        <ui-select-match placeholder="Select Category">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="category in dbEdit.categories | filter: $select.search">
          <span ng-bind-html="category.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <input class="form-control" type="text" ng-model="dbEdit.category.id" readonly>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group margin-top-md">
        <button type="button" class="btn btn-primary" ng-click="showModal('add-category')">Add New</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-8">
      <ui-select  ng-model="dbEdit.brand" theme="bootstrap" on-select="selectBrand($item)" required>
        <ui-select-match placeholder="Select Brand">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="brand in dbEdit.brands | filter: $select.search">
          <span ng-bind-html="brand.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <input class="form-control" type="text" ng-model="dbEdit.brand.id" readonly>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group margin-top-md">
        <button type="button" class="btn btn-primary" ng-click="showModal('add-brand')">Add New</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-8">
      <ui-select  ng-model="dbEdit.model" theme="bootstrap" on-select="selectModel($item)" required>
        <ui-select-match placeholder="Select Model">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="model in dbEdit.models | filter: $select.search">
          <span ng-bind-html="model.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <input class="form-control" type="text" ng-model="dbEdit.model.id" readonly>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group margin-top-md">
        <button type="button" class="btn btn-primary" ng-click="showModal('add-model')">Add New</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-8">
      <ui-select  ng-model="dbEdit.version" theme="bootstrap" required>
        <ui-select-match placeholder="Version">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="version in dbEdit.versions | filter: $select.search">
          <span ng-bind-html="version.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="form-group">
        <label class="margin-top-sm">
          <input type="checkbox" ng-model="dbEdit.major" ng-checked="dbEdit.major" ng-true-value="1" ng-false-value="0"> Add to MAIN list
        </label>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
        <textarea ng-model="dbEdit.data" class="form-control" placeholder="Paste module info here" style="height:200px;"></textarea>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-3">
      <button class="btn btn-primary btn-fw" ng-click="showModal('clear-all')">Clear All</button>
    </div>
    <div class="col-xs-12 col-sm-3">
      <button class="btn btn-primary btn-fw" ng-disabled="!dbEdit.category.id || !dbEdit.brand.id || !dbEdit.model.id" ng-click="showModal('get')">Get</button>
    </div>
    <div class="col-xs-12 col-sm-3">
      <button class="btn btn-primary btn-fw" ng-disabled="!dbEdit.category.id || !dbEdit.brand.id || !dbEdit.model.id || dbEdit.version === null || !dbEdit.data" ng-click="showModal('set')">Set</button>
    </div>
    <div class="col-xs-12 col-sm-3">
      <button class="btn btn-primary btn-fw" ng-disabled="!dbEdit.category.id || !dbEdit.brand.id || !dbEdit.model.id || dbEdit.version === null || !dbEdit.data" ng-click="showModal('add-new')">Add New</button>
    </div>
  </div>

</div>