<div class="tool">
    <i class="icon-filter" ng-click="toggleTool($event)"></i>
    <span class="tool-label">Filtro</span>
    <div class="tool-content filtro-dds">
        <header>
            <h1 class="title">Filtro</h1>
            <i class="close icon-plus-cross" ng-click="closeTool($event)"></i>
        </header>

        <div class="main float-footer">
            <div class="area-esquerda">
                <div class="menu-filtro">
                    <!-- Menu com itens que podem ser arrastados para a área de filtro -->
                    <ul id="lista-a" class="lista-a listas">
                        <li ng-repeat="itemFiltro in vm.listaFiltroInativa" data-obj="{{itemFiltro}}">{{itemFiltro.Titulo}}</li>
                    </ul>
                </div>
            </div>

            <div class="area-direita">
                <div class="area-filtro">
                    <p class="legend">Arraste suas opções aqui:</p>
                    <div class="area-menu-filtro">
                        <ul id="lista-b" class="lista-b listas"></ul>
                    </div>

                    <!-- Formulários -->
                    <div class="conteudo-filtro" ng-include src="vm.listaFiltroAtiva.currentItem.template" ng-class="vm.hasFieldRequiredFilter ? 'has-error-filter' : ''">
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <a href="#" class="clear-filter" ng-click="vm.resetFiltro()">
                <i class="icon-cross"></i> Limpar filtro</a>
            <input type="button" class="btn-base btn-color-default btn-size-s" value="Filtrar" ng-click="vm.filtrarGrid($event)">
        </footer>
    </div>
</div>