<footer class="main-footer" ng-class="vm.statusRodape">
    <div class="passos">
        <!-- função navegar está na diretiva main-footer - testar se funciona -->
        <a href="#" class="status-etapa" data-etapa="1" ng-class="{'current': _etapa === 'Etapa01'}"
            ng-click="vm.navegar($event)">
            <span class="marker-etapa">1</span>
            <span class="label-etapa">Criar e Ajustar Rota</span>
            <i class="icon-arrow"></i>
        </a>

        <a href="#" class="status-etapa" data-etapa="2" ng-class="{'locked': !nav2, 'current': _etapa === 'Etapa02'}"
            ng-click="vm.navegar($event)">
            <span class="marker-etapa">2</span>
            <span class="label-etapa">Classificar Rota</span>
            <i class="icon-arrow"></i>
        </a>

        <a href="#" class="status-etapa" data-etapa="3" ng-class="{'locked': !nav3, 'current': _etapa === 'Etapa03'}"
            ng-click="vm.navegar($event)">
            <span class="marker-etapa">3</span>
            <!-- <span class="label-etapa">Tratar Inconformidades</span> -->
            <span class="label-etapa">Ativar Rota</span>
        </a>
    </div>

    <div class="acoes" ng-include src="etapa.url"></div>

    <!-- etapa 1-->
    <script type="text/ng-template" id="etapa1.html">
        <button class="btn-base btn-color-default btn-size-s btn-footer btn-salvar" ng-disabled="vm.statusRodape == 'salvando' || !vm.viewHasChanged " ng-click="vm.salvarEtapa()">
            {{vm.statusRodape === 'salvando' ? 'Salvando...' : 'Salvar'}}
        </button>
        <button class="btn-base btn-color-default btn-size-s btn-footer" ng-disabled="!vm.isValid || vm.statusRodape == 'avancando'"   ng-click="vm.avancarEtapa()">Avançar</button>
        <a href="#" ng-show="vm.permiteExcluir" class="link-footer" ng-click="vm.excluirRotaRodape()"><i class="icon-cross"></i>{{ vm.informacoesRotaAtual.CodigoRotaAtiva != null ? 'Excluir clone' : 'Excluir rota' }}</a>
    </script>

    <!-- etapa 2-->
    <script type="text/ng-template" id="etapa2.html">
        <button class="btn-base btn-color-default btn-size-s btn-footer btn-salvar" ng-disabled="vm.statusRodape == 'salvando' || !vm.viewHasChanged " ng-click="vm.salvarEtapa()">
            {{vm.statusRodape === 'salvando' ? 'Salvando...' : 'Salvar'}}
        </button>
        <button class="btn-base btn-color-default btn-size-s btn-footer" ng-disabled="!vm.isValid || vm.statusRodape == 'avancando'" ng-click="vm.avancarEtapa()">Avançar</button>
        <a href="#" ng-show="vm.permiteExcluir" class="link-footer" ng-click="vm.excluirRotaRodape()"><i class="icon-cross"></i>{{ vm.informacoesRotaAtual.CodigoRotaAtiva != null ? 'Excluir clone' : 'Excluir rota' }}</a>
    </script>

    <!-- etapa 3 -->
    <script type="text/ng-template" id="etapa3.html">
        <button class="btn-base btn-color-default btn-size-s btn-footer btn-salvar" ng-disabled="vm.statusRodape == 'salvando' || !vm.viewHasChanged" ng-click="vm.salvarEtapa($event)">
            {{vm.statusRodape === 'salvando' ? 'Salvando...' : 'Salvar'}}
        </button>
        <button ng-show="vm.informacoesRotaAtual.Ativo == 'T'" class="btn-base btn-color-mix btn-size-s btn-footer" ng-click="vm.alterarAtivacaoRota(false)">Inativar rota</button>
        <button ng-show="vm.informacoesRotaAtual.Ativo !== 'T' && vm.informacoesRotaAtual.DataAgendamento" class="btn-base btn-color-default btn-size-s btn-footer" ng-click="vm.abrirModalAtivacaoRota()">Alterar agendamento</button>
        <button ng-show="vm.informacoesRotaAtual.Ativo !== 'T' && !vm.informacoesRotaAtual.DataAgendamento" class="btn-base btn-color-default btn-size-s btn-footer" ng-click="vm.abrirModalAtivacaoRota()">{{ vm.informacoesRotaAtual.CodigoRotaAtiva != null ? 'Ativar clone' : 'Ativar Rota' }}</button>
        <button ng-show="vm.permiteClonar" class="btn-base btn-color-default btn-size-s btn-footer" ng-click="vm.clonarRota()">Clonar Rota</button>
        <a href="#" ng-show="vm.permiteExcluir" class="link-footer" ng-click="vm.excluirRotaRodape()"><i class="icon-cross"></i>{{ vm.informacoesRotaAtual.CodigoRotaAtiva != null ? 'Excluir clone' : 'Excluir rota' }}</a>
    </script>
</footer>
