<div class="caption caption-grid-alarmes" ng-click="vm.clickHeaderGrid()" ng-init="vm.abasGridCarregada = false">
    <p>Alarmes {{vm.tabActive}}
        <i class="icon-arrow"></i>
    </p>
</div>

<ul class="tabs-link-container-alarmes" ng-init="vm.tabActive = 'pendentes'" ng-show="vm.abasGridCarregada">
    <li class="tab-link-alarmes" ng-class="{'active': vm.tabActive === 'pendentes'}" ng-click="vm.tabActive = 'pendentes'; vm.carregarAlarmes()">
        Pendentes
        <small ng-if="vm.gridAlarmesPendentes.data.length > 0">({{vm.gridAlarmesPendentes.data.length}})</small>
    </li>
    <li class="tab-link-alarmes" ng-class="{'active': vm.tabActive === 'válidos'}" ng-click="vm.tabActive = 'válidos'; vm.carregarAlarmes()">
        Válidos
        <small ng-if="vm.gridAlarmesValidos.data.length > 0">({{vm.gridAlarmesValidos.data.length}})</small>
    </li>
    <li class="tab-link-alarmes" ng-class="{'active': vm.tabActive === 'inválidos'}" ng-click="vm.tabActive = 'inválidos'; vm.carregarAlarmes()">
        Inválidos
        <small ng-if="vm.gridAlarmesInvalidos.data.length > 0">({{vm.gridAlarmesInvalidos.data.length}})</small>
    </li>
</ul>

<div class="tabs-content-container-alarmes">
    <loading-footer></loading-footer>

    <div class="tab-content-alarmes table-grid" ng-model="vm.gridAlarmesPendentes" grid ng-class="{'active':vm.tabActive === 'pendentes'}"></div>

    <div class="tab-content-alarmes table-grid" ng-model="vm.gridAlarmesValidos" grid ng-class="{'active':vm.tabActive === 'válidos'}"></div>

    <div class="tab-content-alarmes table-grid" ng-model="vm.gridAlarmesInvalidos" grid ng-class="{'active':vm.tabActive === 'inválidos'}"></div>
</div>
