<div class="tool">
    <i class="icon-info set-cursor" data-setcursor="cursor-pointer" ng-click="toggleTool($event)"></i>
    <span class="tool-label">Informações da Rota</span>
    <div class="tool-content">
        <header>
            <h1 class="title">Informações da Rota</h1>
            <i class="close icon-plus-cross" ng-click="closeTool($event)"></i>
        </header>

        <div class="main">
            <div class="tool-info-caption">
                <span> {{ vm.informacoesRotaAtual.DescricaoRota }} </span>
                <p>Rota {{ vm.informacoesRotaAtual.Status }}</p>
            </div>

            <ul class="center-default-list">
                <li>
                    <span class="strong">Data de ativação:</span> {{ vm.informacoesRotaAtual.DataAtivacao }} </li>
                <li>
                    <span class="strong">KM Total:</span> {{ vm.informacoesRotaAtual.KmTotal }} </li>
                <li>
                    <span class="strong">KM Coleta:</span> {{ vm.informacoesRotaAtual.KmColeta }} </li>
                <li>
                    <span class="strong">KM Deslocamento:</span> {{ vm.informacoesRotaAtual.KmDeslocamento }} </li>
                <li>
                    <span class="strong">KM Coleta Manual:</span> {{ vm.informacoesRotaAtual.KmManual }} </li>
                <li>
                    <span class="strong">Eficiência do setor:</span>
                    <span ng-class="{'critical' : vm.informacoesRotaAtual.EficienciaSetor < vm.configuracoesGerais.EficienciaSetor}"> {{ vm.informacoesRotaAtual.EficienciaSetor }} % </span>
                </li>
                <li>
                    <span class="strong">Eficiência da operação:</span>
                    <span ng-class="{'critical' : vm.informacoesRotaAtual.EficienciaOperacao < vm.configuracoesGerais.EficienciaOperacao}">
                        {{ vm.informacoesRotaAtual.EficienciaOperacao }} % </span>
                </li>
            </ul>
        </div>
    </div>
</div>
