<div class="row">
    <div >
        <h3>Sous Familles</h3>
    </div></br></br>

    <div class="col-md-12">
        <div class="animate-bottom">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">Critères de recherche</h3>
                </div>
                <div class="panel-body" >
                    <div ng-include="'app/pages/catalogue/groupeProduits/widgets/search.html'" ></div>
                </div>
            </div>

            <div  class="col-md-3 col-md-offset-9 " >
                <button class="btn btn-flexo" style="float: right;bottom:   0; margin-right: 25px" ng-click="searchCommand(pagination.current)">Chercher</button>
            </div></br></br>
        </div>
    </div>
    <div class="col-md-12">
        <div class="loader" id="Loaderdiv" style=" margin:0 auto;"></div>
        <div class="alert bg-danger closeable" role="alert" id="msgError" style="margin: 80px">
            {{error_response}}.
            <i class="ion-close-round" style="float: right;" ng-click="hideMsgError()"></i>
        </div>
        <div  id="divEmpty" style=" margin:0 auto;"><span class="error-msg-server">Aucun élément trouvé</span></div>
        <div class="animate-bottom" id="divTable">
            <div class="table-responsive">
                <table  class="table table-bordered">
                    <thead >
                        <tr class="tr-background-color">
                            <th >ID</th>
                            <th>Nom</th>
                            <th>Famille</th>
                            <td ></td>
                        </tr>
                    </thead>
                    <tbody>
                    <tr dir-paginate="item in groups | itemsPerPage:groupsPerPage " total-items="totalGroups" current-page="pagination.currentSsFamille" class="align-td-center ">

                        <td >{{item.id}}</td>
                        <td >{{item.name | limitTo:35}}</td>
                        <td >{{item.category.name | limitTo:35}}</td>
                        <td class="div-centred-td">
                            <button class="btn btn-flexo btn-sm" ui-sref="consultationGroup({id : item.id })">Consulter</button>
                            <button class="btn btn-flexo btn-sm" ui-sref="updateGroup({id : item.id })">Modifier</button>
                            <!--button class="btn btn-flexo btn-sm" ng-click="dactivatedGroup(item.id, 0)" ng-show="item.deactivated == 1" style="width: 80px">Activer</button-->
                            <!--button class="btn btn-flexo btn-sm" ng-click="dactivatedGroup(item.id, 1)" ng-show="item.deactivated == 0" style="width: 80px">Désactiver</button-->
                        </td>

                    </tr>
                    </tbody>
                </table>
                <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"  style="float: right"></dir-pagination-controls>


            </div>
           </br></br>
            <button class="btn btn-flexo" style="float: right" ui-sref="addGroup">Ajouter</button>
        </div>
        </div>
    </div>
</div>