{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc C" %}
<p>Nous allons maintenant vous demander d’observer et d’évaluer la décision qui a été prise par un autre participant, qui sera informé de l’évaluation qui a été faite de sa décision.</p>
<p>Les deux écrans qui ont été présentés au participant avant de prendre sa décision sont affichés ci-dessous{% if game == 4 %} <strong>et sont strictement identiques à ceux qui vous ont été présentés dans la partie précédente</strong>{% endif %}.</p>
<div class="screen-carousel-shell">
  <div class="screen-carousel-stage">
    <section class="screen-pane is-active" data-screen-index="0" aria-hidden="false">
      {% if screen_b11_image_url %}
      <img src="{{ screen_b11_image_url }}" alt="Capture de l’écran B1.1" class="screen-capture-image">
      {% else %}
      <div class="screen-capture-mock">
        <div class="screen-capture-mock-inner">
          <p>Un tirage au sort sera effectué à la fin de l’expérience et vous avez une chance sur 20 d’obtenir {{ endowment }} euros.</p>
          <p>Sur l’écran suivant, nous vous demanderons de choisir entre deux possibilités : vous pouvez décider <strong>soit de conserver cette somme</strong>, soit d’aider <strong>une Association Reconnue d’Utilité Publique</strong> qui a été choisie avant le début de cette étude.</p>
          <ul class="screen-capture-list">
            <li>Si vous décidez de <strong>conserver la somme</strong> {{ endowment }} euros, ce montant sera ajouté au total de vos gains et vous sera versé à l’issue de l’expérience.</li>
            <li>Si vous décidez de <strong>renoncer à cette somme pour aider cette association</strong>, nous ferons une donation de {{ don }} euros en votre nom. Vous recevrez un message confirmant la réception du don. Veuillez noter que ce don ne donnera pas lieu à une déduction fiscale.</li>
          </ul>
        </div>
      </div>
      {% endif %}
    </section>
    <section class="screen-pane" data-screen-index="1" aria-hidden="true">
      {% if screen_b12_image_url %}
      <img src="{{ screen_b12_image_url }}" alt="Capture de l’écran B1.2" class="screen-capture-image">
      {% else %}
      <div class="screen-capture-mock">
        <div class="screen-capture-mock-inner">
          <p>Vous allez maintenant décider si vous souhaitez aider cette association.</p>
          <p>Votre décision sera présentée à <strong>3 autres participants à qui nous demanderons d’évaluer votre décision</strong> sur une échelle de ★☆☆☆☆ (très immoral) à ★★★★★ (très moral). Ces participants auront également la possibilité d’écrire un message permettant de compléter leur évaluation.</p>
          <p><strong>À la fin de l’étude, nous montrerons au participant l’évaluation moyenne réalisée par ces trois participants</strong> ainsi que leurs commentaires à propos du choix qu’il a décidé de faire.</p>
        </div>
      </div>
      {% endif %}
    </section>
  </div>
  <div class="screen-carousel-nav" aria-label="Navigation entre les écrans">
    <button type="button" id="carousel-prev" class="btn btn-outline-secondary screen-nav-btn" disabled>
      Écran précédent
    </button>
    <button type="button" id="carousel-next" class="btn btn-outline-secondary screen-nav-btn">
      Écran suivant
    </button>
  </div>
</div>
<p id="wait-msg" style="display:none;">Le bouton continuer apparaîtra très bientôt.</p>
<div id="next-container" class="next-bottom-right" style="display:none;">
  <button class="btn btn-primary otree-btn-next" type="submit">Continuer</button>
</div>
<style>
  .screen-carousel-shell {
    margin: 16px 0 18px;
  }

  .screen-carousel-nav {
    margin: 14px auto 0;
    width: min(760px, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .screen-nav-btn {
    min-width: 180px;
    padding: 8px 14px;
  }

  .screen-carousel-stage {
    position: relative;
  }

  .screen-pane {
    display: none;
  }

  .screen-pane.is-active {
    display: block;
  }

  .screen-capture-image {
    width: min(760px, 100%);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
  }
  .screen-capture-mock {
    width: min(760px, 100%);
    margin: 0 auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #000;
    padding: 18px;
  }
  .screen-capture-mock-inner {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: 18px 20px;
  }
  .screen-capture-question {
    margin-bottom: 14px;
  }
  .screen-capture-list {
    margin: 12px 0 0 0;
    padding-left: 22px;
  }
  .screen-capture-list li + li {
    margin-top: 10px;
  }
  #wait-msg {
    width: 100%;
    margin: 24px 0 0;
    text-align: right;
    color: #000 !important;
  }

  .next-bottom-right { display: flex; justify-content: flex-end; margin-top: 24px; }
</style>
<script>
  (function () {
    var delayMs = 10000;
    var panes = Array.prototype.slice.call(document.querySelectorAll('[data-screen-index]'));
    var prevButton = document.getElementById('carousel-prev');
    var nextButton = document.getElementById('carousel-next');
    var nextContainer = document.getElementById('next-container');
    var msg = document.getElementById('wait-msg');
    var currentIndex = 0;
    var delayStarted = false;
    var delayElapsed = false;
    var hasViewedSecondScreen = false;

    function startDelayIfNeeded() {
      if (delayStarted) return;
      delayStarted = true;
      if (msg) {
        msg.textContent = "Le bouton continuer apparaîtra très bientôt.";
        msg.style.display = 'block';
      }
      setTimeout(function () {
        delayElapsed = true;
        updateContinueButton();
      }, delayMs);
    }

    function updateContinueButton() {
      var onSecondScreen = currentIndex === 1;
      var canContinue = delayElapsed && hasViewedSecondScreen && onSecondScreen;
      if (!nextContainer || !msg) return;
      if (canContinue) {
        msg.style.display = 'none';
        nextContainer.style.display = 'flex';
      } else {
        nextContainer.style.display = 'none';
        if (onSecondScreen && hasViewedSecondScreen) {
          msg.textContent = "Le bouton continuer apparaîtra très bientôt.";
          msg.style.display = 'block';
        } else {
          msg.style.display = 'none';
        }
      }
    }

    function renderPane(index) {
      currentIndex = Math.max(0, Math.min(index, panes.length - 1));
      panes.forEach(function (pane, paneIndex) {
        var isActive = paneIndex === currentIndex;
        pane.classList.toggle('is-active', isActive);
        pane.setAttribute('aria-hidden', isActive ? 'false' : 'true');
      });
      if (currentIndex === 1) {
        hasViewedSecondScreen = true;
        startDelayIfNeeded();
      }
      if (prevButton) {
        prevButton.disabled = currentIndex === 0;
      }
      if (nextButton) {
        nextButton.disabled = currentIndex === panes.length - 1;
      }
      updateContinueButton();
    }

    if (prevButton) {
      prevButton.addEventListener('click', function () {
        renderPane(currentIndex - 1);
      });
    }
    if (nextButton) {
      nextButton.addEventListener('click', function () {
        renderPane(currentIndex + 1);
      });
    }

    renderPane(0);
  })();
</script>
{% endblock %}