<div class="pop-over-container tool" ng-class="{'open': vm.toolOpen == 'layer'}">
    <button class="pop-over-trigger tool-btn btn-base btn-size-m btn-color-default" ng-click="vm.toolOpen = 'layer'">
        <i class="icon-layers icon-size-l"></i>
    </button>
    <div class="pop-over-content to-right tool-content">
        <header class="pop-over-header">
            <h3 class="title">Camadas</h3>
            <i class="close icon-close" ng-click="vm.toolOpen = 'none'"></i>
        </header>
        <div class="pop-over-main ferramenta-camadas">
            <div class="collapse-box" collapse-box data-accordion="true">
                <div class="collapse-caption identificador-veiculo" data-collapse-trigger>
                    <i class="icon-arrow"></i>
                    <div class="title-container">
                        <h3 class="sub-title">Veiculos</h3>
                    </div>
                </div>
                <div class="collapse-content" data-collapse-target>
                    <p class="warning-camadas" ng-if="vm.camadas.Veiculos.length === 0">
                        Não há registros de histórico de
                        veículo
                    </p>
                    <div class="identificador-veiculo lista-checkbox checkbox"
                        ng-repeat="veiculo in vm.camadas.Veiculos">
                        <span>
                            <input id="veiculo-{{veiculo.Identificador}}-viagem" type="checkbox"
                                ng-model="veiculo.checked" ng-change="vm.toggleHistoricoVeiculo(veiculo)"
                                ng-checked="veiculo.checked">
                            <label class="sub-title" for="veiculo-{{veiculo.Identificador}}-viagem">
                                Veículo
                                {{veiculo.Identificador | lowercase}}
                            </label>
                            <input type="color" name="" id="veiculo-{{veiculo.Identificador}}-cor"
                                ng-value="veiculo.CorVeiculo.CorHtml" ng-model="colorModel"
                                ng-change="vm.setColorHistorico(veiculo, colorModel)">
                        </span>
                    </div>
                </div>
            </div>
            <div class="collapse-box" collapse-box data-accordion="true">
                <div class="collapse-caption identificador-veiculo" data-collapse-trigger>
                    <i class="icon-arrow"></i>
                    <div class="title-container">
                        <h3 class="sub-title">Rotas planejadas</h3>
                    </div>
                </div>
                <div class="collapse-content" data-collapse-target>
                    <div class="camada-loading" ng-if="vm.configCamadas.rotasPlan.carregando">Carregando...</div>
                    <table class="table-slim" ng-if="!vm.configCamadas.rotasPlan.carregando">
                        <thead>
                            <tr>
                                <th>
                                    <span class="checkbox">
                                        <span>
                                            <input id="camada-rotas-planejadas" type="checkbox"
                                                ng-model="vm.configCamadas.rotasPlan.toggleAll"
                                                ng-checked="vm.configCamadas.rotasPlan.toggleAll"
                                                ng-change="vm.toggleTodasRotaPlanejadas()">
                                            <label for="camada-rotas-planejadas"></label>
                                        </span>
                                    </span>
                                </th>
                                <th> ROTA </th>
                                <th> DISTÂNCIA (m) </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in vm.camadas.Planejado">
                                <td>
                                    <span class="checkbox">
                                        <span>
                                            <input id="camada-rota-planejada-item-{{item.Codigo}}" type="checkbox"
                                                ng-model="item.checked" ng-checked="item.checked"
                                                ng-change="vm.toggleRotaPlanejada(item, true)">
                                            <label for="camada-rota-planejada-item-{{item.Codigo}}"></label>
                                        </span>
                                    </span>
                                </td>
                                <td title="{{item.Descricao}}">
                                    <span class="text-overflow">
                                        {{item.Descricao}}
                                    </span>
                                </td>
                                <td>{{item.Distancia}}</td>
                                <td>
                                    <span class="color-picker">
                                        <input type="color" name="" id="camada-rota-planejada-cor-{{item.Codigo}}"
                                            ng-value="item.CorSetorRota.Cor.CorHtml" ng-model="colorModel"
                                            ng-change="vm.setColorRotaPlanejada(item, colorModel, true)">
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="collapse-box" collapse-box data-accordion="true">
                <div class="collapse-caption identificador-veiculo"
                    data-collapse-trigger>
                    <i class="icon-arrow"></i>
                    <div class="title-container">
                        <h3 class="sub-title">Rotas completas por veículo</h3>
                    </div>
                </div>
                <div class="collapse-content" data-collapse-target>
                    <div class="camada-loading" ng-if="vm.configCamadas.rotasCompletas.carregando">Carregando...</div>
                    <span ng-if="!vm.configCamadas.rotasCompletas.carregando" class="checkbox">
                        <span>
                            <input id="camada-rotas-completas" type="checkbox"
                                ng-model="vm.configCamadas.rotasCompletas.toggleAll"
                                ng-checked="vm.configCamadas.rotasCompletas.toggleAll"
                                ng-change="vm.toggleTodasRotasCompletas()">
                            <label for="camada-rotas-completas">Todos</label>
                        </span>
                    </span>
                    <span class="checkbox color-picker" ng-repeat="item in vm.rotasCompletas">
                        <span>
                            <input id="camada-rotas-completas-item-{{item.codigo}}" type="checkbox"
                                ng-model="item.checked" ng-change="vm.toggleHistoricoRotaCompletaVeiculo(item, camada)"
                                ng-checked="item.checked">
                            <label for="camada-rotas-completas-item-{{item.codigo}}">{{item.descricao}}</label>
                            <input type="color" name="" id="rotas-completas-cor-{{item.codigo}}" ng-value="item.cor"
                                ng-model="colorModel" ng-change="vm.setColorRotasCompletas(item, colorModel)">
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <footer class="pop-over-footer">
            <a href="#" class="cancel-link" ng-click="vm.hideAll()">
                <i class="icon-cross"></i> Limpar todas as camadas
            </a>
        </footer>
    </div>
</div>
