<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  </head>

  <body>
    
    <section class="wrapper main-wrapper" style=''>
      <div class="row">
          <div class="col-md-1 col-sm-1 com-xs-1"></div>
          <div class="col-md-10 col-sm-10 col-xs-10">
              <div class="r4_counter db_box">
                
                <div>
                      <span class="option glyphicon glyphicon-search icon-success"></span> - Informações rápidas <br />
                      <span class="option fa fa-file-text-o icon-primary"></span> - Visualizar página <br />
                      <span class="option glyphicon glyphicon-remove icon-danger"></span> - Remover grupo
                  </div>
                <div>

                  <!-- Nav tabs -->
                  <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Grupos</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Grupos disponíveis</a></li>
                  </ul>
                
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                      <table class="table table-hover">
                        <tr>
                            <th class="text-center"> Código </th>
                            <th class="text-center"> Nome </th>
                            <th class="text-center"> Descrição </th>
                            <th class="text-center"> Equipamentos </th>
                            <th class="text-center"> Opções </th>
                        </tr>
                        <tr ng-repeat="x in vm.listaGrupos track by x.Id_Grupo" style="cursor:default;">
                            <td class="text-center" ng-click="vm.verPerfilGrupo(x)" style="cursor:zoom-in"> {{x.Id_Grupo}}</td>
                            <td class="text-center" ng-click="vm.verPerfilGrupo(x)" style="cursor:zoom-in"> {{x.Alias_Grupo}}</td>
                            <td class="text-center" ng-click="vm.verPerfilGrupo(x)" style="cursor:zoom-in;max-width:220px;word-wrap: break-word; overflow-wrap: break-word;"> {{x.Descritivo}} </td>
                            <td class="text-center" ng-click="vm.verPerfilGrupo(x)" style="cursor:zoom-in" > {{x.QtdEquipamentos}}</td>
                            <td class="text-center">
                                <span class="option fa fa-search icon-success"
                                      ng-click="vm.verGrupoModal(x)"></span> 
                                <span class="option fa fa-edit icon-warning"
                                      ng-click="vm.alterarGrupoModal(x)"></span>
                                <span class="option fa fa-close icon-danger"
                                      ng-click="vm.deletarGrupoModal(x)" ></span>
                            </td>
                        </tr>
                      </table>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="profile">Tabela de grupos disponiveis</div>
                  </div>
                
                </div>
                
                
                
                  
  
                  <br />
                  
              </div>
          </div>
  
  
      </div>

    </section>
    
  </body>

</html>
// Code goes here

/* Styles go here */