{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc E" %}
<style>
  .final-wrap {
    text-align: center;
    padding: 10px 0 8px;
  }

  .final-code {
    display: inline-block;
    margin: 10px 0 18px;
    padding: 10px 18px;
    border: 2px solid #1d4ed8;
    border-radius: 10px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000;
    background: #eff6ff;
  }

  .final-end-btn {
    min-width: 170px;
  }

  .final-hint {
    margin-top: 12px;
  }
</style>
<div class="final-wrap">
  <p><strong>L’étude est terminée.</strong></p>
  <p>Merci de votre participation. Le code de validation qui vous sera nécessaire pour obtenir le paiement de vos gains est :</p>
  <div class="final-code">{{ code_validation }}</div>
  <div>
    <button type="button" class="btn btn-primary final-end-btn" onclick="this.disabled=true; this.textContent='Terminé'; document.getElementById('final-hint').style.display='block';">
      Fin de l’enquête
    </button>
  </div>
  <p id="final-hint" class="final-hint" style="display:none;">Vous pouvez maintenant fermer cette fenêtre.</p>
</div>
{% endblock %}