<div class="pop-over-container tool" ng-class="{'open': vm.toolOpen == 'pin'}">
    <button class="pop-over-trigger tool-btn btn-base btn-size-m btn-color-default" ng-click="vm.toolOpen = 'pin'">
        <i class="icon-map-point icon-size-l"></i>
    </button>

    <div class="pop-over-content to-right tool-content">
        <header class="pop-over-header">
            <h3 class="infowindow-header">Referências</h3>
            <i class="close icon-close" ng-click="vm.toolOpen = 'none'"></i>
        </header>

        <div class="pop-over-main ferramenta-referencias">
            <fieldset class="field-filtro">
                <label class="label-default" for="filtro-referencias">Localizar Referencias ou Clientes</label>
                <input id="filtro-referencias" class="input-default" type="search" ng-model="vm.referenciaFiltrada"
                       ng-change="vm.filtrarReferencias()">
            </fieldset>
            <div class="collapse-box-clientes-referencias container-level-0" collapse-box data-accordion="true"
                 ng-repeat="classificacao in vm.listaReferencias">
                <div class="collapse-caption-clientes-referencias">
                    <span class="checkbox">
                        <span>
                            <input id="collapse-classificacao-{{classificacao.tipo}}" type="checkbox"
                                   ng-model="classificacao.checked"
                                   ng-change="vm.selecionarClassificacao(classificacao)">
                            <label for="collapse-classificacao-{{classificacao.tipo}}" class="label-level-0">{{classificacao.descricao}}</label>
                        </span>
                    </span>
                    <span class="icon-arrow" data-collapse-trigger></span>
                </div>

                <div class="collapse-content-clientes-referencias" data-collapse-target>
                    <p class="message-empty" ng-if="classificacao.tipos.length === 0">
                        <i class="icon-warning"></i>Nenhuma referência encontrada</p>

                    <div class="collapse-box-clientes-referencias" collapse-box data-accordion="true"
                         ng-repeat="tipo in classificacao.tipos" ng-if="tipo.visivel">
                        <div class="collapse-caption-clientes-referencias">
                            <span class="checkbox">
                                <span>
                                    <input id="collapse-tipo-{{tipo.codigo}}" type="checkbox"
                                           ng-model="tipo.checked"
                                           ng-change="vm.selecionarTipo(classificacao, tipo, tipo.referencias)">
                                    <label for="collapse-tipo-{{tipo.codigo}}">{{tipo.descricao}}</label>
                                </span>
                            </span>
                            <span class="icon-arrow" data-collapse-trigger></span>
                        </div>

                        <div class="collapse-content-clientes-referencias" data-collapse-target>
                            <span class="checkbox checkbox-level-2"
                                  ng-repeat="referencia in tipo.referencias" ng-if="referencia.visivel">
                                <span >
                                    <input id="collapse-referencia-{{referencia.codigo}}" type="checkbox"
                                           ng-model="referencia.checked"
                                           ng-change="vm.selecionarReferencia(classificacao, tipo, referencia)">
                                    <label
                                        for="collapse-referencia-{{referencia.codigo}}">{{referencia.descricao | lowercase}}</label>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="pop-over-footer">
            <a href="#" class="cancel-link" ng-click="vm.limparReferencias()">
                <i class="icon-cross"></i> Limpar todas as referências
            </a>
        </footer>
    </div>
</div>
