<div class="col-md-12" data-ng-controller="ManageGroupMembersController">
    <ul class="breadcrumb">
        <li><a href="#/centers">{{'label.anchor.centers' | translate}}</a></li>
        <li><a href="#/viewcenter/{{centerId}}">{{'label.anchor.viewcenter' | translate}}</a></li>
        <li class="active">{{'label.anchor.managegroups' | translate}}</li>
    </ul>
    <api-validate></api-validate>
    <script type="text/ng-template" id="delete.html">
            <div class="modal-header silver">
                <h3 class="bolder">{{'label.heading.delete' | translate}}</h3>
            </div>
            <div class="modal-body ">
                <api-validate></api-validate>
                <br>
                <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                <button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
            </div>
    </script>
    <form name="managegroupmembers" class="form-horizontal well">
	    <fieldset>
		    <div class="row">
	            <div class="col-md-7">
	                <legend>{{'label.heading.associatenewgroups' | translate}}</legend>
	                <div class="form-group">
	                    <label class="control-label col-sm-4">{{ 'label.input.searchforgroup' | translate }}</label>
	                    <div class="col-sm-4 col-md-4">
	                        <input id="expert" type="text" data-ng-model="available" class="col-md-4 form-control"
								   typeahead-min-length="3"
									typeahead-editable="false"
									typeahead="groupList as groupList.name for groupList in groupsOptions($viewValue)"
									typeahead-on-select="viewGroup(available)"/>
	                    </div>
	                    <div class="col-sm-1 col-md-1">
	                        <button ng-show="available" type="button" class="btn angled-btn btn-primary" data-ng-click="add()">
	                            {{ 'label.button.add' | translate }} 
	                            <i class="icon-double-angle-right"></i></button>
	                    </div>

	                </div>
	                <div class="form-group">
	                    <div data-ng-show="available" class="col-md-6 col-md-offset-1">
	                        <p>{{'label.heading.groupdetails' | translate}}</p>
	                        <table class="table">
	                            <tr>
	                                <td>{{'label.heading.name' | translate}}</td>
	                                <td>{{group.name}}</td>
	                            </tr>
	                            <tr>
	                                <td>{{ 'label.heading.id' | translate }}</td>
	                                <td valign="top">{{group.id}}</td>
	                            </tr>
	                            <tr>
	                                <td>{{ 'label.heading.office' | translate }}</td>
	                                <td>{{group.officeName}}</td>
	                            </tr>
	                        </table>
	                    </div>
	                </div>
	            </div>
	            <div class="col-md-5">
	                <legend>{{'label.heading.centermembers' | translate}}</legend>
	                <div class="form-group" ng-repeat="group in groups">
	                    <div class="col-sm-6 col-md-6">
	                        <input disabled="" class="form-control input-xxlarge" placeholder="{{group.name}} (Id: {{group.id}})"
	                               type="text"/>
	                    </div>
	                    <div class="col-sm-2 col-md-2">
	                        <button type="button" class="btn angled-btn btn-primary " data-ng-click="remove($index,group.id)">
	                                <i class="icon-remove"></i>
	                        </button>
	                    </div>
	                </div>
	            </div>
	        </div>
		    <div class="col-sm-3 col-md-offset-5">
	            <br>
	            <a id="cancel" href="#/viewcenter/{{centerId}}" class="btn btn-default">
	                <i class="icon-double-angle-left"></i>{{'label.button.back' | translate}}</a>
	        </div>
        </fieldset>
   </form> 
</div>