{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc D" %}
<p>Parmi les deux Associations Reconnues d’Utilité Publique suivantes, quelle est selon vous le pourcentage de chances que l’association ait été choisie pour recevoir les dons réalisés dans le cadre de cette expérience ?</p>
{% if arup_order == 1 %}
<div class="slider-block">
  <label><strong>{{ arup1 }}</strong></label>
  <div class="slider-row">
    <input type="range" id="arup1" name="arup_belief_1" min="0" max="100" data-range-output="arup1_value" data-range-format="percent">
    <output id="arup1_value" class="slider-output is-empty"></output>
  </div>
  <div class="slider-ends">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>
<div class="slider-block">
  <label><strong>{{ arup2 }}</strong></label>
  <div class="slider-row">
    <input type="range" id="arup2" name="arup_belief_2" min="0" max="100" data-range-output="arup2_value" data-range-format="percent">
    <output id="arup2_value" class="slider-output is-empty"></output>
  </div>
  <div class="slider-ends">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>
{% else %}
<div class="slider-block">
  <label><strong>{{ arup2 }}</strong></label>
  <div class="slider-row">
    <input type="range" id="arup2" name="arup_belief_2" min="0" max="100" data-range-output="arup2_value" data-range-format="percent">
    <output id="arup2_value" class="slider-output is-empty"></output>
  </div>
  <div class="slider-ends">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>
<div class="slider-block">
  <label><strong>{{ arup1 }}</strong></label>
  <div class="slider-row">
    <input type="range" id="arup1" name="arup_belief_1" min="0" max="100" data-range-output="arup1_value" data-range-format="percent">
    <output id="arup1_value" class="slider-output is-empty"></output>
  </div>
  <div class="slider-ends">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>
{% endif %}
{{ next_button }}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    function syncBeliefs(changed) {
      var a1 = document.getElementById('arup1');
      var a2 = document.getElementById('arup2');
      if (!a1 || !a2 || !window.SSNRange) {
        return;
      }

      if (changed === 'arup1') {
        window.SSNRange.setAnsweredValue(a1, a1.value);
        window.SSNRange.setAnsweredValue(a2, String(100 - parseInt(a1.value || 0, 10)));
      } else {
        window.SSNRange.setAnsweredValue(a2, a2.value);
        window.SSNRange.setAnsweredValue(a1, String(100 - parseInt(a2.value || 0, 10)));
      }
    }

    function bindSync(input, key) {
      ['input', 'change', 'click'].forEach(function (eventName) {
        input.addEventListener(eventName, function () {
          window.requestAnimationFrame(function () {
            syncBeliefs(key);
          });
        });
      });
    }

    var a1 = document.getElementById('arup1');
    var a2 = document.getElementById('arup2');
    if (!a1 || !a2) {
      return;
    }

    bindSync(a1, 'arup1');
    bindSync(a2, 'arup2');
  });
</script>
{% endblock %}