<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <!--
    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
  -->
  <!--[if lt IE 9]>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
    <script>
      document.createElement('ui-select');
      document.createElement('ui-select-match');
      document.createElement('ui-select-choices');
    </script>
  <![endif]-->

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

  <!--
    Selectize theme
    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
  -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">

  <!-- ui-select files -->
  <script src="../dist/select.js"></script>
  <link rel="stylesheet" href="../dist/select.css">

  <style>
    body {
      padding: 15px;
    }

    .selectize-control {
      /* Align Selectize with input-group-btn */
      top: 2px;
    }

    .selectize-control > .selectize-dropdown {
      top: 34px;
    }

    /* Reset right rounded corners, see Bootstrap input-groups.less */
    .input-group > .selectize-control > .selectize-input {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

  </style>
</head>

<body ng-controller="DemoCtrl">
  <script src="demo.js"></script>

  <p>Selected: {{person.selected.name}}</p>

  <form class="form-horizontal">
    <fieldset>
      <legend>ui-select inside a Bootstrap form</legend>

      <div class="form-group">
        <label class="col-sm-3 control-label">Default</label>
        <div class="col-sm-6">

          <ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Grouped</label>
        <div class="col-sm-6">

          <ui-select ng-model="person.selected" theme="selectize" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
              <span ng-bind-html="item.name | highlight: $select.search"></span>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">With a clear button</label>
        <div class="col-sm-6">
          <div class="input-group">

            <ui-select ng-model="person.selected" theme="selectize">
              <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
              <ui-select-choices repeat="item in people | filter: $select.search">
                <span ng-bind-html="item.name | highlight: $select.search"></span>
                <small ng-bind-html="item.email | highlight: $select.search"></small>
              </ui-select-choices>
            </ui-select>

            <span class="input-group-btn">
              <button ng-click="person.selected = undefined" class="btn btn-default">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </span>

          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Disabled</label>
        <div class="col-sm-6">

          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

    </fieldset>
  </form>

</body>
</html>
