<div class="pop-over-container historico-apontamentos-component"
     ng-class="{'open' : ui.popoverHistoricoApontamentosOpen === true}">

    <button class="btn-base btn-color-featured btn-size-m pop-over-trigger " title="Histórico de Apontamentos"
            ng-click="ui.popoverHistoricoApontamentosOpen = !ui.popoverHistoricoApontamentosOpen">
        <i class="icon-newsletter icon icon-size-m"></i>
    </button>

    <div class="pop-over-content to-left historico-apontamentos-content">
        <header class="pop-over-header">
            <h3 class="infowindow-header">Histórico de Apontamentos</h3>
            <i class="close icon-close" ng-click="ui.popoverHistoricoApontamentosOpen = 'none'"></i>
        </header>

        <div class="pop-over-main apontamentos-container">
            <div class="tabs-link-container" perfect-scrollbar>
                <div class="tab-link-veiculo" ng-repeat="veiculo in vm.listaVeiculosApontamentos"
                     ng-click="ui.veiculoAtivo = veiculo.codigo"
                     ng-class="{'active' : ui.veiculoAtivo === veiculo.codigo }">
                    <div class="tab-link-content">
                        <i class="icon icon-garbage-truck icone-veiculo"></i>
                        <span class="identificador-veiculo"> Veículo
                            <br/> {{veiculo.identificador}} </span>
                    </div>
                    <div class="linha"></div>
                </div>
            </div>

            <div class="tabs-content-container" ng-init="ui.veiculoAtivo = vm.listaVeiculosApontamentos[0].codigo">
                <div class="tab-content-veiculo" ng-repeat="veiculo in vm.listaVeiculosApontamentos"
                     ng-class="{'active' : ui.veiculoAtivo === veiculo.codigo }">

                    <div class="table-scrollable-wrapper">
                        <div class="table-scrollable-container">
                            <table class="table-scrollable table-apontamentos" summary="This is an example of a table">
                                <thead>
                                <tr>
                                    <th colspan="2"  title="Atividades do veículo: {{veiculo.identificador}}">
                                        Atividades do veículo {{veiculo.identificador}}
                                        <div class="heading-content">
                                            <span>Atividades do veículo {{veiculo.identificador}}</span>
                                        </div>
                                    </th>
                                    <th colspan="3"  title="Tempo em operação: {{veiculo.tempoTotal}}">
                                        Tempo em operação: {{veiculo.tempoTotal}}
                                        <div class="heading-content">
                                            <span>
                                                <i class="icon-wall-clock icone-tempo-em-operacao"></i>
                                                Tempo em operação: {{veiculo.tempoTotal}}
                                                <i ng-if="veiculo.editada" class="icon-editar icone-tempo-em-operacao" title="Editada"></i>
                                            </span>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th>
                                        COD
                                        <div class="heading-content">
                                            <span>COD</span>
                                        </div>
                                    </th>
                                    <th>
                                        Descrição
                                        <div class="heading-content">
                                            <span>Descrição</span>
                                        </div>
                                    </th>
                                    <th>
                                        Data / Hora
                                        <div class="heading-content">
                                            <span>Data / Hora</span>
                                        </div>
                                    </th>
                                    <th>
                                        Duração
                                        <div class="heading-content">
                                            <span>Duração</span>
                                        </div>
                                    </th>
                                    <th>
                                        Distância
                                        <div class="heading-content">
                                            <span>Distância</span>
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>Abertura</td>
                                    <td>{{veiculo.apontamentos[0].DataHoraFormatado}}</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr ng-repeat="apontamento in veiculo.apontamentos"
                                    ng-click="vm.selecionarApontamentoGrid(apontamento, veiculo)">
                                    <td>{{apontamento.ValorString}}</td>
                                    <td title="{{apontamento.DescricaoFormatada}}">{{apontamento.DescricaoFormatada}}</td>
                                    <td>{{apontamento.DataHoraFormatado}}</td>
                                    <td>{{apontamento.DiferencaTempo}}</td>
                                    <td>{{apontamento.DiferencaHodometro}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
