{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc B" %}
<div class="observers-copy">
{% if role_text %}
<p>{{ role_text|safe }}</p>
{% endif %}
<p>{{ info_text }}</p>
</div>
<p id="wait-msg">Le bouton continuer apparaîtra très bientôt.</p>
<div class="decision-button-stack-wrap">
  <div class="decision-button-stack">
    <div class="decision-button-row">
      <button type="button" class="btn btn-light" onclick="back_button()">Revenir à l’écran précédent</button>
    </div>
    <div id="next-container" class="decision-button-row" style="display:none;">
      <button class="btn btn-primary otree-btn-next" type="submit">Continuer</button>
    </div>
  </div>
</div>
<style>
  .observers-copy {
    font-style: normal;
  }

  #wait-msg {
    width: 100%;
    margin: 24px 0 0;
    text-align: right;
    color: #000 !important;
  }

  .decision-button-stack-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 24px;
  }

  .decision-button-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: max-content;
  }

  .decision-button-row {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .decision-button-row .otree-btn-next {
    margin-top: 0 !important;
  }
</style>
<script>
  (function () {
    var delayMs = 10000;
    var el = document.getElementById('next-container');
    var msg = document.getElementById('wait-msg');
    setTimeout(function () {
      if (msg) msg.style.display = 'none';
      el.style.display = 'flex';
    }, delayMs);
  })();
</script>
{% endblock %}