// Função que alinha os ambientes e exibe os alertas na tela
function AlinhamentoAmbientesAlertas() {
    // Seleciona o elemento onde os alertas serão listados
    const ListaAmbientesAlertas = document.getElementById('ListadeAlertas');

    // Insere o HTML gerado pela função ComponenteAmbientesAlertas dentro do elemento
    ListaAmbientesAlertas.innerHTML = ComponenteAmbientesAlertas();
}

// Função responsável por gerar o HTML de um ambiente de alerta, com informações como nome da empresa, status e botão de exportação
function ComponenteAmbientesAlertas() {
    return `
        <!-- Painel de status do ambiente -->
        <div class="subpainel_Status">

            <!-- Bloco 1: Exibe o nome da empresa -->
            <div class="bloco_1">
                <div class="titulo">
                    <h2>Nome da Empresa</h2>
                </div>
            </div>
            
            <!-- Bloco 2: Exibe informações sobre o ambiente -->
            <div class="bloco_2">

                <!-- Exibe a mensagem de status do ambiente -->
                <div class="Mensagem_ambiente" id="Mensagem_ambiente">
                    <p>mensagem de status do ambiente</p>
                </div>
                
                <!-- Botão de exportação (relacionado a uma possível ação de gerar relatório ou exportar informações) -->
                <div class="button_rel">
                    <button id="Formulario">
                        <img src="../Acessts/Imagens/Iconis/exportar.png" alt="Exportar">
                    </button>
                </div>

                <!-- Exibe o status do ambiente (ON/OFF) -->
                <div class="status_ambiente" id="status_ambiente">
                    <p>OFF</p> <!-- Status inicial, que pode ser alterado dinamicamente -->
                </div>

            </div>

        </div>
    `;
}