<footer class="table-grid-molecule">
    <div class="loading-inlog-modulo" style="display: none"></div>
    <div class="caption" ng-click="toggleGrid()">
        <p>
            <i class="icon-arrow"></i>Setores
            <small>({{vm.dataGrid.length}}/{{vm.quantidadeTotal}})</small>
        </p>

        <button class="btn-base btn-size-s btn-color-positive" ng-click="vm.abrirModalCriarRota()">
            <i class="icon icon-size-s icon-onLeft icon-plus"></i>Criar rota
        </button>
    </div>

    <div when-scroll-ends="loadMoreRecords()" class="scroll-table">
        <table class="grid">
            <thead>
            <tr>
                <th ng-repeat="column in columns" ng-click="SortColumn(column);">{{column.name}}</th>
                <th>Detalhes</th>
                <th></th>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="item in vm.dataGrid track by $index" ng-dblclick="vm.consultaSetor(item, true);"
                in-click="vm.consultaSetor(item, false);"
                ng-class="item.chave == vm.chave ? 'active' : ''" repeat-end="onEnd()">
                <td>{{item.MacroSetor}}</td>
                <td>{{item.Setor}}</td>
                <td>{{item.Descricao}}</td>
                <td>{{item.Rota}}</td>
                <td>{{item.QtdPacmans}}</td>
                <td>{{item.KmTotal}}</td>
                <td>{{item.KmColeta}}</td>
                <td>{{item.KmDeslocamento}}</td>
                <td>{{item.KmManual}}</td>

                <td ng-class="item.EficienciaSetor < vm.configuracoesGerais.EficienciaSetor && vm.configuracoesGerais.EficienciaSetor != 0 ? 'critico' : ''">
                    {{item.EficienciaSetor}}%
                </td>
                <td ng-class="item.EficienciaOperacao < vm.configuracoesGerais.EficienciaOperacao && vm.configuracoesGerais.EficienciaOperacao != 0 ? 'critico' : ''">
                    {{item.EficienciaOperacao}}%
                </td>
                <td>{{item.Etapa == 0 ? '---' : item.Etapa + '/3'}}</td>
                <td>
                        <span class="edit-badge">
                            {{item.DataAtivacaoDescricao}}
                            <i ng-show="item.DataAtivacaoDescricao && item.DataAtivacaoDescricao != '-&#45;&#45;' && item.StatusDescricao != 'Ativa'"
                               class="icon-pencil" ng-click="vm.abrirModalAlterarAtivacaoRota(item)"></i>
                        </span>
                </td>
                <td class="strong-cell">{{item.StatusDescricao}}</td>
                <td>
                    <button class="btn-grid"
                            ng-disabled="(((item.StatusDescricao | uppercase) == 'SEM ROTA'))"
                            ng-click="vm.abrirDetalhes(item)">
                        <i class="icon-eye"></i>Detalhes
                    </button>
                </td>
                <td class="action-cell">
                    <i ng-show="(
                                    (
                                       (item.StatusDescricao | uppercase) == 'COMPLETA' || (item.StatusDescricao | uppercase) == 'INCOMPLETA' || (item.StatusDescricao | uppercase) == 'INATIVA'
                                    )
                            )" ng-click="vm.abrirModalExcluirRota(item)" class="icon-cross"></i>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="loading-inlog-modulo loader-footer">
        <div class="socket">
            <div class="gel center-gel">
                <div class="hex-brick " style="width:22px; height:22px;"></div>
            </div>
            <div class="gel c1 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c2 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c3 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c4 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c5 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c6 r1">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c7 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c8 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c9 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c10 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c11 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c12 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c13 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c14 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c15 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c16 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c17 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c18 r2">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c21 r3">
                <div class="hex-brick" style="width:12px; height:12px;"></div>
            </div>
            <div class="gel c22 r3">
                <div class="hex-brick" style="width:12px; height:12px;"></div>
            </div>
            <div class="gel c25 r3">
                <div class="hex-brick" style="width:12px; height:12px;"></div>
            </div>
            <div class="gel c26 r3">
                <div class="hex-brick" style="width:12px; height:12px;"></div>
            </div>
            <div class="gel c28 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c29 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c30 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c31 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c33 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c34 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c35 r3">
                <div class="hex-brick"></div>
            </div>
            <div class="gel c36 r3">
                <div class="hex-brick"></div>
            </div>
        </div>

    </div>
</footer>
