<div class="business-unit">

    <div class="business-unit-containers col-sm-10">
        <div>
            <div class="buttons-container">
                <button class="btn btn-in-grid" ng-click="createNewData()"
                        atms-permission
                        permission-code="{{$root.adminPermission.basicData.businessUnit.editCode}}">
                    <i class=" material-icons">add_circle_outline</i> <span translate="BusinessUnitAddNew"></span>
                </button>              
</div>

            <div class="list-container">
                <div class="business-unit-list-grid" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize ng-style="getGridHeight()"></div>
            </div>
        </div>

    </div>
    <!-- Create or Edit an object Data -->
    <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="addcustomerModalLabel">
        <div class="modal-dialog" style="height: 300px; width: 610px;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title" ng-show="!isEdit">{{'BusinessUnitAddNew' | translate }}</div>
                    <div class="modal-title" ng-show="isEdit">{{'BusinessUnitUpdate' | translate }}</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="edit-form">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{'BusinessUnitName' | translate}}：</label>
                            <div class="col-sm-6">
                                <input class="form-control" name="Name" ng-model="editingObject.Name" maxlength="50">
                                <div class="validate-success" data-for="Name"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">{{'BusinessUnitStatus' | translate}}：</label>
                            <div class="col-md-9">
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="IsActive" ng-value="true" ng-model="editingObject.IsActive" required />
                                        {{"BusinessUnitEnableNode"|translate}}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="IsActive" ng-value="false" ng-model="editingObject.IsActive" />
                                        {{"BusinessUnitDisabledNode"|translate}}
                                    </label>
                                </div>
                                <div class="validate-success" data-for="IsActive"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="saveEditRow()">{{'BusinessUnitSave' | translate }}</button>
                    <button type="button" class="btn btn-third" ng-click="cancelEditBusinessUnit()">{{'BusinessUnitCancel' | translate }}</button>
                </div>
            </div>
        </div>
    </div>
</div>