<div class="pop-over-container contestacoes-pendentes-component" ng-class="{'open' : vm.rightSidePopover === 'contestacoesPendentes'}">

    <div class="pop-over-trigger" ng-click="vm.rightSidePopover = (vm.rightSidePopover  == 'contestacoesPendentes'? 'none' : 'contestacoesPendentes')">
        <button class="btn-base btn-color-featured btn-size-m" title="Contestações pendentes">
            <i class="icon-help-web-button  icon icon-size-l"></i>
        </button>
        <span ng-if="vm.totalContestacoes > 0" class="length-indicator count-contestacoes-pendentes">{{vm.totalContestacoes > 99? '99+' : vm.totalContestacoes }}</span>
    </div>

    <div class="pop-over-content to-left contestacoes-pendentes-content">
        <header class="pop-over-header">
            <h3 class="infowindow-header">Setores contestados aguardando resposta</h3>
            <i class="close icon-close" ng-click="vm.rightSidePopover = 'none'"></i>
        </header>

        <div ng-if="vm.listaContestacoesPendentes.length > 0" class="pop-over-main contestacao-container">
            <div class="contestacoes-pendentes-paginador">
                <a class="link-navigation" ng-class="{'disable': !vm.hasPreviousContestacoesPendentes}" ng-click="vm.navigateContestacaoPendente(false)">
                    <i class="icon-arrow icon-size-m prev"></i>
                </a>
                <span class="pager-data">{{vm.listaContestacoesPendentesFiltrada.Data}}</span>
                <a class="link-navigation " ng-class="{'disable': !vm.hasNextContestacoesPendentes}" ng-click="vm.navigateContestacaoPendente(true)">
                    <i class="icon-arrow icon-size-m next"></i>
                </a>
            </div>
            <div ng-if="vm.listaContestacoesPendentesFiltrada.Setores.length > 0">
                <div class="table-scroll" perfect-scrollbar>
                    <table class="table-default table-contestacoes-pendentes" float-thead>
                        <colgroup>
                            <col span="1" style="width: 30%;">
                            <col span="1" style="width: 15%;">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>Setor</th>
                            <th>Detalhes</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="contestacao in vm.listaContestacoesPendentesFiltrada.Setores" ng-click="vm.selecionarContestacaoPendente(contestacao)">
                            <td title="{{contestacao.Descricao}}">{{contestacao.Descricao}}</td>
                            <td>
                                <a ng-click="vm.navegarPaginaDeDetalhes(contestacao.Codigo, contestacao.Data)">
                                    <i class="icon-eye icon icon-size-m"></i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div ng-if="vm.listaContestacoesPendentesFiltrada.Setores.length === 0" class="table-scroll contestacao-pendente-message">
                Não existem mais notificações para essa data.
            </div>
        </div>
        <div ng-if="vm.listaContestacoesPendentes.length === 0" class="contestacao-pendente-message">
            Você não tem nenhuma contestação pendente.
        </div>
    </div>
</div>
