//Variavel botão, capaz de dar incio a todo o painel de configuração de ambientes, como modelo de seguraça pode ter um outro script que reconhece o usuário lirando ou não esse botão. 
var BotaoAmbienteConfig = document.getElementById('StatusAmbiente');
BotaoAmbienteConfig.addEventListener('click', surgirAmbiente);


//Nessa função, é inserido uma estrutura estatica da tela de congiguração para ambientes, sendo somente os pontos que não passam por auterações, também é definido o link css para estilizar toda essa estrutura.
function surgirAmbiente() {
    //Link css que será manipulado 
    var estilo = document.getElementById('conexao');
    //Div que  vai receber a estrutura html
    var painel = document.getElementById('preenchimento');

    //Implementação de estrutura html e caminho de css
    estilo.href = '../Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css';
    painel.innerHTML = EstruturaPrincipal();

    //Alinhando funções importantes para a tela de ambientes 

    AlinhamentoAmbientesAlertas();
    AlinhamentoAmbientesRelatorios();
    AlinhamentoAmbientes();
}


//Estrutura Html que está sendo usada
function EstruturaPrincipal() {

    return `
    
    <main class="bloco_ambiente">

        <div class="seguimento_1">
            <section class="capitulo_1">
                <div class="titulo_Cap">
                    <h2>Ambientes</h2>
                </div>

                <div class="painel_Cap">
                    <div class="coluna_1">
                        <div class="insercao_ambiente">
                            <button id="criarAmbiente">+</button>
                        </div>
                        <div class="pesquisa">
                            <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
                            <button id="pesquisa">
                            <img src="../Acessts/Imagens/Iconis/lupa.png">
                            </button>
                        </div>
                    </div>
                    <div class="coluna_2" id="apresentarAmbientes"></div>
                </div>

            </section>
        </div>
        <div class="seguimento_2">

            <section class="capitulo_2">
                <div class="titulo_Cap">
                    <h2>Status dos Ambientes</h2>
                </div>

                <div class="painel_Cap" id="ListadeAlertas"></div>

            </section>
            <section class="capitulo_3" id="ListeRelatorios">
                
            </section>

        </div>

        <div class="PopResposta" id="PopResposta"></div>
        <div class="PopPainel" id="PopPainel"></div>

    </main>

    
    `;



}


//Implementando script responsavel pela construção de ambientes e das funções em volta desse componente
var AmbientesCriador = document.createElement('script');
AmbientesCriador.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js';
AmbientesCriador.type = 'text/javascript';
AmbientesCriador.id = 'AmbientesCriador_11';
document.body.appendChild(AmbientesCriador);


//Implementando script responsavel pela construção de Alertas de ambientes e das funções em volta desse componente
var AmbientesAlertas = document.createElement('script');
AmbientesAlertas.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js';
AmbientesAlertas.type = 'text/javascript';
AmbientesAlertas.id = 'AmbientesAlertas_11';
document.body.appendChild(AmbientesAlertas);

//Implementando script responsavel pela construção de Relatorios de ambientes e das funções em volta desse componente

var AmbientesRelatorios = document.createElement('script');
AmbientesRelatorios.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js';
AmbientesRelatorios.type = 'text/javascript';
AmbientesRelatorios.id = 'AmbientesRelatoriso_11';
document.body.appendChild(AmbientesRelatorios);