<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="infowindow-header">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" ng-repeat="camada in vm.camadas">

                <div class="collapse-caption identificador-veiculo" ng-click="vm.carregarCamada(camada)" data-collapse-trigger>
                    <i class="icon-arrow"></i>
                    <div class="title-container">
                        <h3 class="sub-title">{{camada.titulo}}</h3>
                    </div>
                </div>

                <div class="collapse-content lista-checkbox" data-collapse-target>
                    <div ng-if="camada.tipoCamada === vm.tipoCamada.veiculos || camada.tipoCamada === vm.tipoCamada.rotaCompleta">
                            <div ng-if="camada.carregando" class="camada-loading">Carregando...</div>
                        <span class="sub-title" ng-if="camada.motorista != null">Motorista: {{camada.motorista}}</span>
                        <span ng-if="!camada.carregando" class="checkbox">
                            <span>
                                <input id="camada-{{camada.tipoCamada}}-{{camada.codigo}}" type="checkbox" ng-model="camada.checked" ng-checked="camada.checked"
                                    ng-change="vm.toggleTodos(camada)">
                                <label for="camada-{{camada.tipoCamada}}-{{camada.codigo}}">Todos</label>
                            </span>
                        </span>
                        <span class="checkbox color-picker" ng-repeat="item in camada.itens">
                            <span>
                                <input id="camada-{{camada.tipoCamada}}-{{camada.codigo}}-item-{{item.codigo}}" type="checkbox" ng-model="item.checked" ng-change="vm.toggleHistorico(item, camada)"
                                    ng-checked="item.checked">
                                <label for="camada-{{camada.tipoCamada}}-{{camada.codigo}}-item-{{item.codigo}}">{{item.descricao}}</label>
                                <input type="color" name="" id="{{camada.tipoCamada}}-{{camada.codigo}}-cor-{{item.codigo}}" ng-value="item.cor" ng-model="colorModel"
                                    ng-change="vm.setColor(item, colorModel)">
                            </span>
                        </span>
                    </div>
                    <div ng-if="camada.tipoCamada === vm.tipoCamada.rotaPlanejada || camada.tipoCamada === vm.tipoCamada.pacmans">
                        <div ng-if="camada.carregando" class="camada-loading">Carregando...</div>
                        <table ng-if="!camada.carregando" class="table-slim">
                            <thead>
                                <tr>
                                    <th>
                                        <span class="checkbox">
                                            <span>
                                                <input id="camada-{{camada.tipoCamada}}" type="checkbox" ng-model="camada.checked" ng-checked="camada.checked" ng-change="vm.toggleTodos(camada)">
                                                <label for="camada-{{camada.tipoCamada}}"></label>
                                            </span>
                                        </span>
                                    </th>
                                    <th> ROTA </th>
                                    <th> DISTÂNCIA (m) </th>
                                    <th> Nº PACMANS </th>
                                    <th ng-if="camada.tipoCamada === vm.tipoCamada.rotaPlanejada"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in camada.itens">
                                    <td>
                                        <span class="checkbox">
                                            <span>
                                                <input id="camada-{{camada.tipoCamada}}-item-{{item.codigo}}" type="checkbox" ng-model="item.checked" ng-checked="item.checked"
                                                    ng-change="vm.togglePlanejado(item, camada, true)">
                                                <label for="camada-{{camada.tipoCamada}}-item-{{item.codigo}}"></label>
                                            </span>
                                        </span>
                                    </td>
                                    <td title="{{item.descricao}}">
                                        <span class="text-overflow">
                                            <i class="icon-warning-circle icon" ng-if="item.vigencia" title="Vigente até {{item.vigencia}}"></i>
                                            {{item.descricao}}
                                        </span>
                                    </td>
                                    <td>{{item.distancia}}</td>
                                    <td>{{item.quantidade}}</td>
                                    <td ng-if="camada.tipoCamada === vm.tipoCamada.rotaPlanejada">
                                        <span class="color-picker">
                                            <input type="color" name="" id="{{camada.tipoCamada}}-{{camada.codigo}}-cor-{{item.codigo}}" ng-value="item.cor" ng-model="colorModel"
                                                ng-change="vm.setColor(item, colorModel, true)">
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div ng-if="camada.tipoCamada === vm.tipoCamada.contestacao">
                        <span class="checkbox">
                            <span>
                                <input id="camada-{{vm.tipoCamada.contestacao}}" type="checkbox" ng-model="camada.checked" ng-checked="camada.checked" ng-change="vm.toggleOcorrenciasContestacao(camada)">
                                <label for="camada-{{vm.tipoCamada.contestacao}}">Mostrar ocorrências</label>
                            </span>
                        </span>
                    </div>
                </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>
