<div class="sidebar-overlay" ng-class="{'open': vm.sidebarOuterOpen}">
    <aside class="sidebar-outer">
        <header class="sidebar-outer-header">
            <h2 class="heading">
                <i class="icon-config"></i>Configuração</h2>
            <i class="icon-direction link-close" ng-click="vm.toggleSidebarOuter()"></i>
        </header>

        <div class="sidebar-outer-main">
            <div id="sidebarOuterNotificationOuter" class="notification-modal"></div>

            <form name="formConfiguracoes" class="form-configuracoes" ng-submit="formConfiguracoes.$valid && vm.salvarConfiguracoes()"
                novalidate form-validation-directive>

                <div class="collapses-container">
                    <div class="collapse-box" collapse-box>
                        <div class="collapse-caption">
                            <i class="icon-arrow"></i>
                            <h3 class="sub-title">Eficiência no Setor</h3>
                        </div>

                        <div class="collapse-content">
                            <p>
                                Defina um valor mínimo para indicação da
                                <span>
                                    eficiência da rota dentro do setor
                                </span> na cor vermelha.
                            </p>

                            <div class="validation" ng-class="{'invalid': !formConfiguracoes.eficienciaSetor.customValidation}">
                                <div class="data-field">
                                    <label for="eficiencia-setor" class="label-default">Valores abaixo de:</label>
                                    <input type="number" class="input-icon-sufix" id="eficiencia-setor" name="eficienciaSetor" min="0" max="100" required ng-model="vm.configuracoes.EficienciaSetor">
                                    <span class="sufix">%</span>
                                </div>
                                <span class="message">{{formConfiguracoes.eficienciaSetor.serverMsg || 'Insira um valor de 0 à 100.'}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="collapse-box" collapse-box>
                        <div class="collapse-caption">
                            <i class="icon-arrow"></i>
                            <h3 class="sub-title">Eficiência da Operação</h3>
                        </div>

                        <div class="collapse-content">
                            <p>
                                Defina um valor mínimo para indicação da
                                <span>eficiência da rota completa da operação </span>
                                na cor vermelha.
                            </p>

                            <div class="validation" ng-class="{'invalid': !formConfiguracoes.eficienciaOperacao.customValidation}">
                                <div class="data-field">
                                    <label for="eficiencia-operacao" class="label-default">Valores abaixo de:</label>
                                    <input type="number" class="input-icon-sufix" id="eficiencia-operacao" name="eficienciaOperacao" min="0" max="100" required
                                        ng-model="vm.configuracoes.EficienciaOperacao">
                                    <span class="sufix">%</span>
                                </div>
                                <span class="message">{{formConfiguracoes.eficienciaOperacao.serverMsg || 'Insira um valor de 0 à 100.'}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="collapse-box" collapse-box>
                        <div class="collapse-caption">
                            <i class="icon-arrow"></i>
                            <h3 class="sub-title">Camadas de Visualização</h3>
                        </div>

                        <div class="collapse-content">
                            <p>
                                Selecione as camadas que deseja visualizar por padrão no momento de carregamento da tela.
                            </p>
                            <ul class="lista-camada">
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" ng-model="vm.todasCamadas" name="check-mini-layers-config-01" id="check-mini-layers-config-01" ng-click="vm.toggleCamadas()">
                                        <label for="check-mini-layers-config-01">
                                            <span>Todas as camadas</span>
                                        </label>
                                    </span>
                                </li>
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" name="camada-setor" ng-model="vm.configuracoes.Setor" ng-change="vm.camadaToggled()" id="config-setor" ng-checked="">
                                        <label for="config-setor">Setor</label>
                                    </span>
                                </li>
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" name="camada-pacmans" ng-model="vm.configuracoes.Pacmans" ng-change="vm.camadaToggled()" id="config-pacmans" ng-checked="">
                                        <label for="config-pacmans">Pacmans</label>
                                    </span>
                                </li>
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" name="camada-sentido" ng-model="vm.configuracoes.Sentido" ng-change="vm.camadaToggled()" id="config-sentido" ng-checked="">
                                        <label for="config-sentido">Sentido da rota</label>
                                    </span>
                                </li>
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" name="camada-rotas" ng-model="vm.configuracoes.Rotas" ng-change="vm.camadaToggled()" id="config-rotas" ng-checked="">
                                        <label for="config-rotas">Rotas</label>
                                    </span>
                                </li>
                                <li class="checkbox">
                                    <span>
                                        <input type="checkbox" name="camada-inicio-fim" ng-model="vm.configuracoes.InicioFim" ng-change="vm.camadaToggled()" id="config-inicio-fim" ng-checked="">
                                        <label for="config-inicio-fim">Início e Fim</label>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="collapse-box" collapse-box>
                        <div class="collapse-caption">
                            <i class="icon-arrow"></i>
                            <h3 class="sub-title">Paginação do Grid</h3>
                        </div>

                        <div class="collapse-content">
                            <p>Selecione a quantidade de registros apresentados no grid.</p>

                            <div class="data-field">
                                <label for="paginacao-grid">Até</label>
                                <span class="select">
                                    <select name="paginacaoGrid" id="paginacao-grid" ng-model="vm.configuracoes.PaginacaoGrid" ng-init="vm.configuracoes.PaginacaoGrid"
                                        ng-options="item.text as item.value for item in vm.selectPaginacaoGrid"></select>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="collapse-box" collapse-box>
                        <div class="collapse-caption">
                            <i class="icon-arrow"></i>
                            <h3 class="sub-title">Estilo do Mapa</h3>
                        </div>
                        <div class="collapse-content">
                            <ul class="lista-camada">
                                <li ng-repeat="style in vm.mapStyles track by $index">
                                    <span class="radio-mini">
                                        <span>
                                            <input type="radio" ng-model="vm.configuracoes.StyleMapa" ng-value="style.value" name="radio-style-configuracao" id="radio-style-configuracao{{$index}}">
                                            <label for="radio-style-configuracao{{$index}}">{{ style.name }}</label>
                                        </span>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <fieldset class="buttons-field">
                    <button class="btn-base btn-size-m btn-color-default btn-action">
                        {{formConfiguracoes.custom_status == 'SENDING' ? 'Salvando Configurações...' : (formConfiguracoes.custom_status == 'SEND_SUCCESS'
                        ? 'Configurações salvas' : 'Salvar Configurações')}}
                    </button>
                </fieldset>
            </form>
        </div>

    </aside>
</div>
