<style>
  #loading-msg {
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #6e8cd7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

#loading-msg.show {
  visibility: visible;
  opacity: 1;
}

#loading-msg p {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}

#loading-bar {
  width: 0%;
  height: 10px;
  background-color: #6e8cd7;
}
</style>

<div class="row">
  <div style="display: {{ERROR_hide|safe}};">
    <div class="alert alert-danger" role="alert" >
      <center><strong>Erro: {{ERROR|safe}} - Entre em contato com o suporte.</strong></center><br>
      
    </div>
  </div>
  <div class="col-sm-12">
    <h4 class="page-title">Seja Bem vindo ao assistente de atualizações da loja</h4>
  </div>
</div>
<div class="panel panel-default form-horizontal">
  <div class="panel-heading"> 
    <h3 class="panel-title">
      Atualizações do sistema
      <a href="index.php?ToDo=appalteracoes" class="pull-right btn btn-primary btn-sm"><strong>Changelog</strong></a>
    </h3> 
  </div> 

  <div class="panel-body " style="padding: 0">
    <table class="table" border="0" cellpadding="0" cellspacing="0">
      {% if Productedicao|safe >= '11' %}
        <tr id="alertav11" style="display: none;">
          <th style="width: 10%;">
            Mensagem Importante:
          </th>
          <td>
            <div id="aviso-content"></div>
          </td>
        </tr>
      {% endif %}
      <tr>
        <th style="width: 10%;">
          Edição do produto:
        </th>
        <td>
          {{ Productedicao|safe }}
        </td>
      </tr>
      <tr>
        <th>
          Atualizações:
        </th>
        <td>
          {{ EdicaoAtual|safe }}
        </td>
      </tr>
    </table>
  </div>
</div>

<script>
    function carregarAvisos() {
        var avisoContainer = document.getElementById('aviso-content');
        var avisoFiles = ['11.html','12.html'];
        avisoFiles.forEach(function(avisoFile) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var avisoDiv = document.createElement('div');
                    avisoDiv.innerHTML = xhr.responseText;
                    avisoContainer.appendChild(avisoDiv);
                    document.getElementById('alertav11').style.display = 'table-row';
                }
            };

            xhr.open('GET', 'avisos/' + avisoFile, true);
            xhr.send();
        });
    }
    carregarAvisos();
</script>