<div ng-controller="ConfiguracaoRodaPeController">
    <div class="config-footer">
        <h3 class="title-section">Selecione um item para a visualização das informações do rodapé:</h3>

        <div ng-if="!ConfiguracaoRodaPe.ExibirSaidasPrevistas && !ConfiguracaoRodaPe.ExibirMensagensCustomizaveis" class="config-footer-empty">
            <p>Nenhum item selecionado.</p>
        </div>

        <div class="config-footer-saidas-previstas">
            <div class="checkbox">
                <span>
                    <input type="checkbox" name="check-saida-prev" id="check-saida-prev"
                           ng-change="setCollapseCheck(ConfiguracaoRodaPe.ExibirSaidasPrevistas ? 1 : 0)" ng-model="ConfiguracaoRodaPe.ExibirSaidasPrevistas">
                    <label for="check-saida-prev"></label>
                </span>
            </div>

            <p ng-click="setCollapse(1)" class="sub-title-2-section">
                Saídas Previstas
                <i ng-class="collapseIsSet(1) ? 'icon-bold-set-up' : 'icon-bold-set-down'" class="icon-bold-set-down icon-arrow"></i>
                <small>Selecione os itens que deseja exibir</small>
            </p>

            <div ng-class="collapseIsSet(1) ? 'open' : 'close'" class="slide-collapse close">
                <div class="col-left">
                    <fieldset class="col-inputs inline">
                        <label for="txt-footer-titulo-secao">Título da Seção</label>
                        <input type="text" class="min" name="txt-footer-titulo-secao" id="txt-footer-titulo-secao" placeholder="Saídas Previstas" ng-model="ConfiguracaoRodaPe.TituloSecaoSaidasPrevistas">
                    </fieldset>

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input disabled checked type="checkbox" name="check-footer-linha" id="check-footer-linha">
                                <label for="check-footer-linha">Linha</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input disabled checked type="checkbox" name="check-footer-linha" id="check-footer-horario">
                                <label for="check-footer-horario">Horário</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-footer-icone-veiculo" id="check-footer-icone-veiculo" ng-model="ConfiguracaoRodaPe.ExibirIconeVeiculoSaidasPrevistas">
                                <label for="check-footer-icone-veiculo">Ícone do Veículo</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-footer-id-veiculo" id="check-footer-id-veiculo" ng-model="ConfiguracaoRodaPe.ExibirIdentificadorVeiculoSaidasPrevistas">
                                <label for="check-footer-id-veiculo">Identificador do Veículo</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-footer-plataforma" id="check-footer-plataforma" ng-model="ConfiguracaoRodaPe.ExibirPlataformaSaidasPrevistas">
                                <label for="check-footer-plataforma">Plataforma</label>
                            </span>
                        </div>
                    </fieldset>
                </div>               

                <div class="col-right">
                    <fieldset class="col-inputs inline">
                        <label for="txt-footer-intervalo">{{(ConfiguracaoRodaPe.ExibirSaidasPrevistas ? '*' : '')}} Exibir saídas no intervalo de 
                            <small>Formato (HH:MM)</small>
                        </label>
                        <input ng-class="{ 'border-red' : ObrigatorioTempoSaidasIntervaloSaidasPrevistas }" type="time" class="min" name="txt-footer-intervalo" id="txt-footer-intervalo" placeholder="hh:mm" ng-model="ConfiguracaoRodaPe.TempoSaidasIntervaloSaidasPrevistas">
                        <div class="more-info" tool-tip>
                            <i class="icon-info2"></i>
                            <div class="tooltip-info">
                                <p>
                                    <span>As linhas inativas serao exibidas a partir do valor indicado.</span>
                                    Ex.: Se for indicado o valor de 1h todas as linhas inativas serão
                                    exibidas 1h antes do seu início.
                                </p>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs inline">
                        <label for="txt-footer-tempo-paginacao">{{(ConfiguracaoRodaPe.ExibirSaidasPrevistas ? '*' : '')}} Tempo de paginação 
                            <small>Formato (MM:SS)</small>
                        </label>
                        <input ng-class="{ 'border-red' : ObrigatorioTempoPaginacaoSaidasPrevistas }" type="time" class="min" name="txt-footer-tempo-paginacao" id="txt-footer-tempo-paginacao" placeholder="mm:ss" ng-model="ConfiguracaoRodaPe.TempoPaginacaoSaidasPrevistas">
                    </fieldset>
                </div>
            </div>
        </div>

        <div class="config-footer-mensagem-custom">
            <div class="checkbox">
                <span>
                    <input type="checkbox" name="check-msg-custom" id="check-msg-custom"
                           ng-change="setCollapseCheck(ConfiguracaoRodaPe.ExibirMensagensCustomizaveis ? 2 : 0)" ng-model="ConfiguracaoRodaPe.ExibirMensagensCustomizaveis">
                    <label for="check-msg-custom"></label>
                </span>
            </div>

            <p ng-click="setCollapse(2)" class="sub-title-2-section">
                Mensagem Customizável
                <i ng-class="collapseIsSet(2) ? 'icon-bold-set-up' : 'icon-bold-set-down'" class="icon-bold-set-down icon-arrow"></i>
                <small>Você pode incluir até 3 mensagens no seu painel</small>
            </p>

            <div ng-class="collapseIsSet(2) ? 'open' : 'close'" class="slide-collapse close">
                <div class="col-left">
                    <fieldset class="col-inputs inline">
                        <label for="txt-footer-titulo-secao-msg">Título da seção</label>
                        <input type="text" class="min" name="txt-footer-titulo-secao-msg" id="txt-footer-titulo-secao-msg" placeholder="Últimas Notícias" ng-model="ConfiguracaoRodaPe.TituloSecaoMensagensCustomizaveis">
                    </fieldset>
                </div>

                <div class="col-right">
                    <fieldset class="col-inputs inline">
                        <label for="txt-footer-tempo-msg">{{(ConfiguracaoRodaPe.ExibirMensagensCustomizaveis ? '*' : '')}} Tempo de mensagem 
                            <small>Formato (MM:SS)</small>
                        </label>
                        <input ng-class="{ 'border-red' : ObrigatorioTempoMensagensCustomizaveis }" type="time" class="min" name="txt-footer-tempo-msg" id="txt-footer-tempo-msg" placeholder="mm:ss" ng-model="ConfiguracaoRodaPe.TempoMensagensCustomizaveis">
                    </fieldset>
                </div>

                <div class="col-full">
                    <fieldset class="col-inputs inline">
                        <span class="count">1</span>
                        <label for="txt-texto-msg-1">{{(ConfiguracaoRodaPe.ExibirMensagensCustomizaveis ? '*' : '')}}Texto da Mensagem <small class="input-info">Até 95 caracteres</small></label>
                        <input ng-class="{ 'border-red' : ObrigatorioMensagemUmMensagensCustomizaveis }" type="text" class="min" name="txt-texto-msg-1" id="txt-texto-msg-1" maxlength="95" placeholder="" ng-model="ConfiguracaoRodaPe.MensagemUmMensagensCustomizaveis">
                    </fieldset>

                    <fieldset class="col-inputs inline">
                        <span class="count">2</span>
                        <label for="txt-texto-msg-2">Texto da Mensagem <small class="input-info">Até 95 caracteres</small></label>
                        <input type="text" class="min" name="txt-texto-msg-2" id="txt-texto-msg-2" maxlength="95" placeholder="" ng-model="ConfiguracaoRodaPe.MensagemDoisMensagensCustomizaveis">
                    </fieldset>

                    <fieldset class="col-inputs inline">
                        <span class="count">3</span>
                        <label for="txt-texto-msg-3">Texto da Mensagem <small class="input-info">Até 95 caracteres</small></label>
                        <input type="text" class="min" name="txt-texto-msg-3" id="txt-texto-msg-3" maxlength="95" placeholder="" ng-model="ConfiguracaoRodaPe.MensagemTresMensagensCustomizaveis">
                    </fieldset>
                </div>

                <h3 class="title-section">Selecione imagens para ilustrar as suas mensagens:</h3>

                <div class="col-full">
                    <div class="img-msg-placeholder-container">
                        <div class="img-msg-placeholder">
                            <span class="count">1</span>
                            <fileupload img-width="280" img-height="120" img-file="{{ ConfiguracaoRodaPe.ExibeImagemUmMensagensCustomizaveis ? ConfiguracaoRodaPe.UrlImagemUmMensagensCustomizaveis : '' }}" tipo-configuracao="RP1" link="Terminais/PainelFinal/UploadLogo"></fileupload>
                        </div>
                    </div>

                    <div class="img-msg-placeholder-container">
                        <div class="img-msg-placeholder">
                            <span class="count">2</span>
                            <fileupload img-width="280" img-height="120" img-file="{{ ConfiguracaoRodaPe.ExibeImagemDoisMensagensCustomizaveis ? ConfiguracaoRodaPe.UrlImagemDoisMensagensCustomizaveis : '' }}" tipo-configuracao="RP2" link="Terminais/PainelFinal/UploadLogo"></fileupload>
                        </div>
                    </div>

                    <div class="img-msg-placeholder-container">
                        <div class="img-msg-placeholder">
                            <span class="count">3</span>
                            <fileupload img-width="280" img-height="120" img-file="{{ ConfiguracaoRodaPe.ExibeImagemTresMensagensCustomizaveis ? ConfiguracaoRodaPe.UrlImagemTresMensagensCustomizaveis : '' }}" tipo-configuracao="RP3"  link="Terminais/PainelFinal/UploadLogo" ></fileupload>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>