<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-help-web-button 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.responderContestacao()" novalidate form-validation-directive>
            <header class="pop-over-header">
                <h3 class="infowindow-header">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" auto-scroll>
                    <h3 class="status-contestacao">
                        <i class="icon-help-web-button icon-size-m"
                            ng-class="'contestacao-' + vm.contestacao.Contestacao.StatusContestacao"></i>
                        <span>{{vm.contestacao.DescricaoStatus}}</span>
                    </h3>

                    <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:</p>
                            <div>
                                <a class="links-anexos" href="#"
                                    title="{{contestacaoHistorico.ContestacaoHistoricoAnexo.Anexo}}"
                                    ng-repeat="anexo in contestacaoHistorico.ContestacaoHistoricoAnexo"
                                    ng-click="vm.downloadFileContestacao(anexo)">{{anexo.Anexo}}</a>
                            </div>
                        </div>

                        <p class="lista-trechos-respondidos"
                            ng-repeat="trecho in contestacaoHistorico.ContestacaoHistoricoTrecho">
                            <a class="ultimos-enderecos-contestados" href="#"
                                ng-click="vm.toggleTrechoContestacao(trecho)"
                                ng-if="$parent.$index + 1 == vm.contestacao.Contestacao.ContestacaoHistorico.length">
                                <i class="icon-map-point-area icon-size-m"></i>
                                {{!trecho.ContestacaoTrecho.CodigoTrecho ? trecho.ContestacaoTrecho.Endereco : 'Trecho ' + trecho.ContestacaoTrecho.Sequencia + ' - Rota ' + trecho.ContestacaoTrecho.SetorRotaPacman.SetorRota.Descricao}}
                            </a>
                            <strong
                                ng-if="$parent.$index + 1 != vm.contestacao.Contestacao.ContestacaoHistorico.length">
                                {{!trecho.ContestacaoTrecho.CodigoTrecho ? trecho.ContestacaoTrecho.Endereco : 'Trecho ' + trecho.ContestacaoTrecho.Sequencia + ' - Rota ' + trecho.ContestacaoTrecho.SetorRotaPacman.SetorRota.Descricao}}
                            </strong>
                            <br>
                            <span>{{trecho.Observacao}}</span>
                        </p>
                    </div>

                    <div class="section-pontos-contestados" id="scroll-to-message-contestacao"
                        ng-class="{'error': vm.contemPontosInvalidos}"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao === 1 && vm.contestacao.Contestacao.ContestacaoTrecho.length > 0">
                        <p class="titulo-secao">Pontos contestados:</p>

                        <span class="message">Preencha os campos obrigatórios</span>

                        <div class="collapse-box lista-trechos" collapse-box
                            ng-repeat="trecho in vm.contestacao.Contestacao.ContestacaoTrecho"
                            ng-class="{'error': !formContestacao.observacaoTrecho{{$index}}.customValidation || !formContestacao.justificativaTrecho{{$index}}.customValidation}"
                            id="trecho-{{trecho.Codigo}}">

                            <div class="collapse-caption" data-collapse-trigger>
                                <div class="title-container">
                                    <i class="icon icon-arrow accordion-header-icon"></i>
                                    <span class="sub-title" ng-if="!trecho.CodigoTrecho">{{trecho.Endereco}}</span>
                                    <span class="sub-title" ng-if="trecho.CodigoTrecho">Trecho
                                        {{trecho.Sequencia}} - Rota {{trecho.SetorRota.Descricao}}</span>
                                </div>
                            </div>

                            <div class="collapse-content" data-collapse-target>
                                <fieldset class="field-observacao-geral"
                                    ng-class="{'invalid': !formContestacao.observacaoTrecho{{$index}}.customValidation}">
                                    <textarea id="observacaoTrecho{{$index}}" name="observacaoTrecho{{$index}}" required
                                        ng-model="trecho.Descricao" class="textarea-default" maxlength="250"></textarea>
                                </fieldset>

                                <fieldset class="field-justificativa"
                                    ng-class="{'invalid': !formContestacao.justificativaTrecho{{$index}}.customValidation}">
                                    <div class="container-file-upload">
                                        <span class="select">
                                            <select id="justificativaTrecho{{$index}}"
                                                name="justificativaTrecho{{$index}}" required
                                                ng-model="trecho.Justificativa" ng-init="trecho.Justificativa = ''">
                                                <option value="">Selecionar categoria</option>
                                                <option ng-repeat="justificativa in vm.listaJustificativas"
                                                    ng-value="justificativa.CodigoGrupo">{{ justificativa.Descricao }}
                                                </option>
                                            </select>
                                        </span>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>

                    <div class="section-observacoes-gerais" ng-if="vm.contestacao.Contestacao.StatusContestacao === 1"
                        ng-class="{'error': !formContestacao.observacaoContestacaoStatus.customValidation || !formContestacao.justificativaObservacaoGeral.customValidation}">

                        <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>
                        </fieldset>

                        <fieldset class="field-justificativa"
                            ng-class="{'invalid': !formContestacao.justificativaObservacaoGeral.customValidation}">
                            <div class="container-file-upload file-upload">
                                <span class="select">
                                    <select id="justificativaObservacaoGeral" name="justificativaObservacaoGeral"
                                        required ng-model="vm.contestacao.Contestacao.Justificativa"
                                        ng-init="vm.contestacao.Contestacao.Justificativa = ''">
                                        <option value="">Selecionar categoria</option>
                                        <option ng-repeat="justificativa in vm.listaJustificativas"
                                            ng-value="justificativa.CodigoGrupo">{{ justificativa.Descricao }}</option>
                                    </select>
                                </span>

                                <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>

                        <fieldset class="field-copiar-resposta">
                            <span class="checkbox">
                                <span>
                                    <input type="checkbox" name="copiarResposta" id="copiar-resposta"
                                        ng-model="vm.copiarResposta">
                                    <label for="copiar-resposta">Aplicar resposta a todos os pontos</label>
                                </span>
                            </span>
                        </fieldset>

                        <span class="message">Preencha os campos obrigatórios</span>

                        <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.validacaoArquivoMensagem !== null">{{vm.validacaoArquivoMensagem}}</span>

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

            <footer class="pop-over-footer"
                ng-if="vm.contestacao.Contestacao.StatusContestacao === 5 || vm.contestacao.Contestacao.StatusContestacao === 1">
                <a href="#" class="cancel-link" ng-click="vm.cancelarContestacao(); vm.toolOpen = 'none';"
                    ng-if="vm.contestacao.Contestacao.StatusContestacao === 1">
                    <i class="icon-cross"></i> Cancelar
                </a>
                <div class="buttons-container"
                    ng-class="{'full-width': vm.contestacao.Contestacao.StatusContestacao === 5}">
                    <button type="button" class="btn-justificativa btn-base btn-color-featured btn-size-s"
                        ng-click="vm.toggleJustificativa()"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao === 5">Adicionar Justificativa
                    </button>

                    <input type="submit" class="btn-base btn-color-featured btn-size-s" value="Responder"
                        ng-if="vm.contestacao.Contestacao.StatusContestacao === 1">
                </div>
            </footer>
            <footer class="pop-over-footer" ng-if="(vm.contestacao.Contestacao.StatusContestacao === 3 ||
                vm.contestacao.Contestacao.StatusContestacao === 4) &&
                vm.usuarioLogado.TipoUsuario.Descricao.substring(0, 10).toUpperCase() == 'SUPERVISOR'">
                <div class="buttons-container">
                    <input type="submit" class="btn-base btn-color-featured btn-size-s" value="Reabrir contestação">
                </div>
            </footer>
        </form>
    </div>
</div>
