<div class="pop-over-container tool" ng-class="{'open': vm.toolOpen == 'question'}">
    <button class="pop-over-trigger tool-btn btn-base btn-size-m btn-color-default"
        ng-click="vm.toolOpen = 'question'; vm.setarValidacaoFormContestacao()">
        <i class="icon-question icon-size-l"
            ng-class="'icon-tool-open-contestacao-' + vm.contestacao.Contestacao.StatusContestacao"></i>
    </button>
    <div class="pop-over-content to-right tool-content">
        <form id="pop-over-contestacao" name="formContestacao" class="form-contestacao"
            ng-submit="formContestacao.$valid && (vm.contestacao.Contestacao.StatusContestacao != 5 ? vm.editarContestacao() : vm.salvarContestacao(1))"
            novalidate form-validation-directive>
            <header class="pop-over-header">
                <h3 class="title">Contestação</h3>
                <i class="close icon-close" ng-click="vm.toolOpen = 'none'"></i>
            </header>

            <div class="pop-over-main">
                <div class="ferramenta-contestacao" id="scroll-ferramenta-contestacao" scroll-glue>
                    <h3 class="status-contestacao" ng-if="vm.contestacao">
                        <i class="icon-question icon-size-m"
                            ng-class="'contestacao-' + vm.contestacao.Contestacao.StatusContestacao"></i>
                        <span>{{vm.contestacao.DescricaoStatus}}</span>
                    </h3>

                    <input ng-if="vm.contestacao.Contestacao.StatusContestacao === 5" id="contestacao-ponto"
                        type="button" class="btn-selecionar-ponto" value="Selecionar novo ponto" style="width:100%"
                        ng-click="vm.toggleSelecao('ponto')" />

                    <input ng-if="vm.contestacao.Contestacao.StatusContestacao === 5 && !vm.contestacaoPonto"
                        id="contestacao-pacman" type="button" class="btn-selecionar-ponto"
                        value="Selecionar novo trecho" style="width:100%" ng-click="vm.toggleSelecao('pacman')" />

                    <div class="pop-over-section"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao === 5 && vm.listaPontosSelecionados && vm.listaPontosSelecionados.length > 0">
                        <p class="titulo-secao">Pontos a contestar:</p>

                        <div ng-repeat="ponto in vm.listaPontosSelecionados">
                            <div class="lista-trechos-selecionados" ng-class="{ 'justificado' : ponto.Justificado }"
                                ng-click="vm.toogleAccordionJustificativa(ponto)">
                                <span
                                    class="ponto">{{ponto.Pacman ? ponto.Trecho + ' - Rota ' + ponto.Rota : ponto.Rua }}</span>
                                <div class="acoes-ponto">
                                    <i class="icon-map-point ponto-icone" title="Exibir ponto"
                                        ng-click="vm.centralizarPontoMapa(ponto)"></i>
                                    <i class="icon-cross ponto-icone" title="Remover ponto"
                                        ng-click="vm.removerTrechoSelecionado(ponto)"></i>
                                </div>
                            </div>
                            <div id="justificativa-trecho-{{ponto.CodigoTrecho}}" class="justificativa-trecho"
                                ng-if="ponto.Justificado">
                                <span>{{ponto.Justificativa}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="section-mensagens"
                        ng-repeat="contestacaoHistorico in vm.contestacao.Contestacao.ContestacaoHistorico">
                        <p class="ticket" ng-class="contestacaoHistorico.Operador === 'T' ? 'operador' : 'responsavel'">
                            <i class="icon-man-user user"></i>
                            <span class="empresa">{{contestacaoHistorico.Usuario.Empresa.Descricao}}</span>
                            <span class="nome">{{contestacaoHistorico.Usuario.Nome}}</span>
                            <span class="data">{{contestacaoHistorico.DataCadastroDisplay}}</span>
                        </p>

                        <p class="txt-comentario">{{contestacaoHistorico.Observacao}}</p>

                        <div class="container-anexos" ng-if="contestacaoHistorico.ContestacaoHistoricoAnexo">
                            <p class="titulo-secao-anexos">Anexos:</p>
                            <div>
                                <a class="links-anexos" href="#"
                                    title="{{contestacaoHistorico.ContestacaoHistoricoAnexo.Anexo}}"
                                    ng-repeat="anexo in contestacaoHistorico.ContestacaoHistoricoAnexo"
                                    ng-click="vm.downloadFile(anexo)">{{anexo.Anexo}}</a>
                            </div>
                        </div>

                        <p class="lista-trechos-respondidos"
                            ng-repeat="trecho in contestacaoHistorico.ContestacaoHistoricoTrecho">
                            <strong
                                ng-if="!trecho.ContestacaoTrecho.CodigoTrecho">{{trecho.ContestacaoTrecho.Endereco}}</strong>
                            <strong ng-if="trecho.ContestacaoTrecho.CodigoTrecho">Trecho
                                {{trecho.ContestacaoTrecho.Sequencia}} - Rota
                                {{trecho.ContestacaoTrecho.SetorRota.Descricao}} </strong>
                            <br>
                            <span>{{trecho.Observacao}}</span>
                        </p>
                    </div>

                    <div class="lista-trechos-placeholder-container" ng-if="vm.contentLoaderPlaceholder">
                        <div class="animated-background"
                            ng-style="{'height': ((vm.trechosContestadosLength.length * 35) -5)+'px'}">
                            <div class="lista-trechos-placeholder-bar"
                                ng-repeat="item in vm.trechosContestadosLength track by $index"></div>
                        </div>
                    </div>

                    <div class="section-pontos-contestados" ng-if="vm.contestacao.Contestacao.StatusContestacao === 2 && vm.configuracaoEmpresaObj.PermitirRecontestar
                        && vm.pacmansContestadosPlotados.length > 0 && !vm.contentLoaderPlaceholder">
                        <p class="titulo-secao">Pontos a contestar:</p>

                        <input ng-model="vm.algumTrechoSelecionado" required type="hidden"
                            name="algumTrechoSelecionado">
                        <div class="validacao-algum-trecho-selecionado"
                            ng-class="{'invalid': !formContestacao.algumTrechoSelecionado.customValidation}">Selecione
                            ao menos um trecho</div>

                        <div class="lista-trechos" ng-class="{'open': pacman.ItemSelecionado}"
                            ng-repeat="pacman in vm.pacmansContestadosPlotados">
                            <fieldset class="field-observacao-por-pacman"
                                ng-class="{'invalid': !formContestacao['observacaoPorPacman-[{{pacman.CodigoTrecho}}]'].customValidation}">

                                <span class="checkbox">
                                    <span>
                                        <input id="pacman-{{pacman.CodigoTrecho}}" type="checkbox"
                                            ng-model="pacman.CodigoTrechoSelecionado"
                                            ng-change="vm.selecionarPacmanContestado(pacman)">

                                        <label class="pacmans-recontestar" ng-if="!pacman.Pacman"
                                            for="pacman-{{pacman.CodigoTrecho}}" title="{{pacman.Rota}}">{{pacman.Rota}}
                                        </label>

                                        <label class="pacmans-recontestar" ng-if="pacman.Pacman"
                                            for="pacman-{{pacman.CodigoTrecho}}"
                                            title="Trecho: {{pacman.Sequencia}} - Rota: {{pacman.Rota}}">
                                            Trecho: {{pacman.Sequencia}} - Rota: {{pacman.Rota}} </label>
                                    </span>
                                </span>
                                <textarea title="comentários" class="textarea-default"
                                    name="observacaoPorPacman-[{{pacman.CodigoTrecho}}]"
                                    ng-required="pacman.CodigoTrechoSelecionado" ng-model="pacman.Descricao"
                                    maxlength="250"></textarea>
                                <span class="message">Informe uma observação geral</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="section-observacoes-gerais"
                        ng-if="(vm.contestacao.Contestacao.StatusContestacao === 5 || vm.contestacao.Contestacao.StatusContestacao === 2) && !vm.contentLoaderPlaceholder">

                        <fieldset class="field-observacao-geral"
                            ng-class="{'invalid': !formContestacao.observacaoContestacaoStatus.customValidation}">

                            <label for="observacaoContestacao-status" class="label-default">Observação Geral:</label>
                            <textarea id="observacaoContestacao-status" name="observacaoContestacaoStatus" required
                                ng-model="vm.contestacao.Contestacao.observacaoGeral" class="textarea-default"
                                maxlength="250"></textarea>
                            <span class="message">Informe uma observação geral</span>
                        </fieldset>

                        <fieldset class="field-upload">
                            <div class="container-btns file-upload">
                                <input type="file" id="listaArquivosContestacaoInput" class="btn-upload"
                                    data-file-upload="vm.listaNovosArquivosContestacao"
                                    ng-model="vm.contestacao.Contestacao.anexosContestacao" name="anexosContestacao"
                                    value="Subir arquivo" multiple
                                    accept="application/pdf,image/jpg,image/jpeg,image/png">

                                <span class="btn-upload-trigger" file-upload-trigger>
                                    <i class="icon icon-plus_02"></i>Subir arquivo
                                </span>
                            </div>
                        </fieldset>

                        <div class="arquivos-wrapper">
                            <div ng-repeat="arquivo in vm.listaArquivosContestacao" title="{{arquivo.name}}">
                                <span class="arquivo-contestacao">{{arquivo.name}}</span>
                                <i class="icon icon-cross" ng-click="vm.onRemoveFile(arquivo)"></i>
                            </div>
                        </div>

                        <span class="messagem-validacao-arquivos"
                            ng-if="vm.contestacaoMessagem !== null">{{vm.contestacaoMessagem}}</span>

                        <p class="assinatura">
                            <span>{{vm.contestacao.EmpresaLogada}}</span> -
                            <span>{{vm.contestacao.UsuarioLogado}}</span>
                        </p>
                    </div>

                    <div class="section-observacoes-gerais-placeholder-container"
                        ng-class="{'initial-load': !vm.contestacao}" ng-if="vm.contentLoaderPlaceholder">
                        <div class="animated-background">
                            <div class="section-observacoes-gerais-placeholder bar-1"></div>
                            <div class="section-observacoes-gerais-placeholder bar-2"></div>
                            <div class="section-observacoes-gerais-placeholder bar-3"></div>
                            <div class="section-observacoes-gerais-placeholder bar-4"></div>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="pop-over-footer"
                ng-if="vm.contestacao.Contestacao.StatusContestacao === 5 || vm.contestacao.Contestacao.StatusContestacao === 2">
                <a href="#" class="cancel-link" ng-click="vm.cancelarContestacao(); vm.toolOpen = 'none';">
                    <i class="icon-cross"></i> Cancelar
                </a>

                <div class="buttons-container">
                    <button type="button" class="btn-base btn-color-positive btn-size-s btn-ferramenta-contestacao"
                        ng-click="vm.contestacao.Contestacao.Codigo > 0 ? vm.finalizarContestacao(3) : vm.salvarContestacao(3)">
                        Aprovar Coleta
                    </button>

                    <button type="button" class="btn-base btn-color-negative btn-size-s btn-ferramenta-contestacao"
                        ng-click="vm.finalizarContestacao(4)"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao !== 5">
                        Recusar Coleta
                    </button>

                    <input type="submit" class="btn-base btn-color-featured btn-size-s btn-ferramenta-contestacao"
                        value="Contestar" ng-if="vm.contestacao.Contestacao.StatusContestacao === 5">

                    <input type="submit" class="btn-base btn-color-featured btn-size-s btn-ferramenta-contestacao"
                        value="Enviar"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao === 2 && vm.configuracaoEmpresaObj.PermitirRecontestar">
                </div>
            </footer>
        </form>
    </div>
</div>
