<div class="page-header">
	<h1>UI Modules</h1>
	<p>Standalone <a href="http://angular-ui.github.io">AngularUI</a> modules with external dependencies</p>
</div>
<div class="page-content page-content-example container-fluid">
  <div class="panel">
    <div class="panel-body">
      <div class="row">

        <!-- Sortable -->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Sortable items<small>(<a target="_blank" href="http://github.com/angular-ui/ui-sortable">ui.sortable</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12">
                  <div ng-controller="SortableDemoController" class="section row">
					          <ul ui-sortable="sortableOptions" ng-model="list" class="list-group sortable">
					    	      <li ng-repeat="item in list" class="list-group-item"><span class="badge bg-{{item.type}}">{{item.value}}</span>{{item.text}}</li>
					          </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Sortable -->

        <!-- Sortable group -->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Sortable group<small>(<a target="_blank" href="http://github.com/angular-ui/ui-sortable">ui.sortable</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12">
                  <div ng-controller="ConnectedDemoController" class="section row connected-sortable">
                    <div class="col-sm-6">
                        <ul ui-sortable="sortableOptions" ng-model="leftItems" class="list-group sortable bg-primary bg-inherit">
                          <li ng-repeat="item in leftItems" class="list-group-item"><i class="icon fa-chevron-right"></i>{{item.text}}</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul ui-sortable="sortableOptions" ng-model="rightItems" class="list-group sortable bg-primary bg-inherit">
                          <li ng-repeat="item in rightItems" class="list-group-item"><i class="icon fa-chevron-right"></i>{{item.text}}</li>
                        </ul>
                    </div>
                  </div>		
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Sortable group -->
      </div>
    </div>
  </div>
</div>
