{{ extends "otree/Page.html" }}
{{ load otree }}

{{ block global_styles  }}
<style>
  :root {
    --ssn-bg-top: #f8fbff;
    --ssn-bg-bottom: #eef4f8;
    --ssn-card: #ffffff;
    --ssn-text: #000000;
    --ssn-muted: #000000;
    --ssn-accent: #1d4ed8;
    --ssn-accent-dark: #1e40af;
    --ssn-border: #dbe3ee;
  }

  body {
    background: linear-gradient(180deg, var(--ssn-bg-top) 0%, var(--ssn-bg-bottom) 100%);
    color: var(--ssn-text);
  }

  .otree-body {
    max-width: 980px;
    margin: 30px auto 40px;
    padding: 28px 32px 30px;
    background: var(--ssn-card);
    border: 1px solid var(--ssn-border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  }

  .otree-content {
    max-width: 840px;
    margin: 0 auto;
  }

  .otree-title {
    font-weight: 700;
    letter-spacing: 0.1px;
    margin-bottom: 10px;
    text-align: center;
  }

  p, li, label, .form-check-label {
    line-height: 1.55;
    color: var(--ssn-text);
  }

  p {
    margin: 0 0 14px;
  }

  ul {
    padding-left: 1.2rem;
    margin: 0 0 14px;
  }

  .otree-form .mb-3,
  .otree-form .form-group,
  .otree-form .form-check,
  .otree-form .otree-form-group {
    margin-bottom: 12px;
  }

  strong, b {
    font-weight: 700;
  }

  em, i {
    font-style: normal;
    color: var(--ssn-text);
  }

  .otree-btn-next.btn-primary,
  .btn-primary.otree-btn-next {
    background-color: var(--ssn-accent);
    border-color: var(--ssn-accent);
    font-weight: 600;
  }

  .otree-btn-next.btn-primary:hover,
  .btn-primary.otree-btn-next:hover {
    background-color: var(--ssn-accent-dark);
    border-color: var(--ssn-accent-dark);
  }

  .otree-form label {
    margin-bottom: 0.3rem;
  }

  .otree-btn-next {
    min-width: 130px;
  }

  form .otree-btn-next {
    display: block;
    margin-left: auto;
    margin-right: 0;
    margin-top: 22px;
  }

  .slider-block {
    --ssn-slider-output-width: 148px;
    margin: 12px auto 20px;
    max-width: 560px;
  }

  .slider-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ssn-slider-output-width);
    gap: 12px;
    align-items: center;
  }

  .slider-output {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 52px;
    min-height: 34px;
    text-align: center;
    font-weight: 700;
    color: var(--ssn-accent-dark);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 4px 8px;
  }

  .slider-output.is-empty {
    color: #64748b;
    background: #f8fafc;
    border-style: dashed;
    border-color: #cbd5e1;
    max-width: 148px;
    padding: 6px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.15;
    white-space: normal;
  }

  .slider-output.is-empty::before {
    content: 'Cliquez pour choisir';
  }

  .slider-ends {
    margin-top: 6px;
    width: calc(100% - var(--ssn-slider-output-width) - 12px);
    display: flex;
    justify-content: space-between;
    color: var(--ssn-muted);
    font-size: 0.9rem;
  }

  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: #dbeafe;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ssn-accent);
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.22);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  input[type="range"]::-moz-range-track {
    height: 6px;
    border: none;
    border-radius: 999px;
    background: #dbeafe;
  }

  input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ssn-accent);
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.22);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  input[type="range"].range-unset::-webkit-slider-thumb {
    opacity: 0;
    transform: scale(0.01);
  }

  input[type="range"].range-unset::-moz-range-thumb {
    opacity: 0;
    transform: scale(0.01);
  }

  input[type="range"].range-unset::-webkit-slider-runnable-track {
    background: #e2e8f0;
  }

  input[type="range"].range-unset::-moz-range-track {
    background: #e2e8f0;
  }

  input[type="range"]:focus-visible {
    outline: none;
  }

  input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.18);
  }

  input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.18);
  }

  .moral-scale-labels {
    margin: 10px auto 12px;
    max-width: 560px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    font-size: 0.86rem;
    color: var(--ssn-muted);
    text-align: center;
  }

  #ssn-debug-sticky {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 5000;
    font-size: 11px;
    line-height: 1.3;
    padding: 7px 9px;
    border-radius: 8px;
    color: #0b3b66;
    background: rgba(224, 242, 254, 0.88);
    border: 1px solid #7dd3fc;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    max-width: 240px;
    white-space: normal;
  }

  #ssn-hard-pass {
    position: fixed;
    top: 10px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 5000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: rgba(255, 251, 235, 0.88);
    color: #92400e;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .powered-by-otree {
    display: none;
  }

  .debug-info {
    max-width: 760px;
    margin: 0 auto 24px;
  }

  [id="wait-msg"] {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #475569 !important;
  }

  @media (max-width: 768px) {
    .otree-body {
      margin: 16px auto 24px;
      padding: 20px 18px 22px;
      border-radius: 12px;
    }

    .otree-content {
      max-width: none;
    }
  }

  /* Enforce black text across the experiment for visual consistency. */
  .otree-body,
  .otree-body p,
  .otree-body li,
  .otree-body label,
  .otree-body span,
  .otree-body small,
  .otree-body .form-check-label,
  .otree-body .slider-ends,
  .otree-body .moral-scale-labels,
  .otree-body em,
  .otree-body i {
    color: #000 !important;
  }

  .next-bottom-right {
    position: static !important;
    left: auto !important;
    transform: none !important;
    bottom: auto !important;
    margin-top: 24px !important;
    text-align: right !important;
  }
</style>
{{ endblock }}
{{ block global_scripts  }}
<script>
  (function () {
    function midpointForInput(input) {
      var min = input.min === '' ? 0 : Number(input.min);
      var max = input.max === '' ? 100 : Number(input.max);
      var step = input.step && input.step !== 'any' ? Number(input.step) : 1;

      if (!Number.isFinite(min) || !Number.isFinite(max)) {
        return input.value || '';
      }

      var midpoint = min + ((max - min) / 2);
      if (Number.isFinite(step) && step > 0) {
        midpoint = min + (Math.round((midpoint - min) / step) * step);
      }
      midpoint = Math.min(max, Math.max(min, midpoint));

      if (Number.isFinite(step) && step >= 1) {
        midpoint = Math.round(midpoint);
      }

      return String(midpoint);
    }

    function getRangeOutput(input) {
      var outputId = input.dataset.rangeOutput;
      return outputId ? document.getElementById(outputId) : null;
    }

    function formatRangeValue(input, value) {
      var format = input.dataset.rangeFormat || 'value';
      if (format === 'percent') {
        return value + '%';
      }
      if (format === 'stars') {
        var max = Number(input.dataset.rangeStarsMax || input.max || 5);
        var numericValue = Number(value) || 1;
        numericValue = Math.max(1, Math.min(max, numericValue));
        return '★'.repeat(numericValue) + '☆'.repeat(max - numericValue);
      }
      return String(value);
    }

    function renderRangeOutput(input, answered) {
      var output = getRangeOutput(input);
      if (!output) {
        return;
      }

      output.classList.toggle('is-empty', !answered);
      output.textContent = answered ? formatRangeValue(input, input.value) : '';
    }

    function ensureRangeProxy(input) {
      if (input.dataset.rangeProxyReady === 'true') {
        return;
      }

      var form = input.form;
      if (!form || !input.name) {
        return;
      }

      var hidden = document.createElement('input');
      hidden.type = 'hidden';
      hidden.name = input.name;
      hidden.id = (input.id || ('range_' + Math.random().toString(36).slice(2))) + '__value';
      hidden.dataset.rangeProxy = 'true';
      form.appendChild(hidden);

      input.dataset.rangeProxyReady = 'true';
      input.dataset.rangeProxyId = hidden.id;
      input.dataset.originalName = input.name;
      input.removeAttribute('name');
    }

    function getRangeProxy(input) {
      var proxyId = input.dataset.rangeProxyId;
      return proxyId ? document.getElementById(proxyId) : null;
    }

    function setAnsweredValue(input, value, dispatchEvent) {
      ensureRangeProxy(input);
      if (typeof value !== 'undefined') {
        input.value = value;
      }

      var proxy = getRangeProxy(input);
      if (proxy) {
        proxy.value = input.value;
      }

      input.dataset.rangeAnswered = 'true';
      input.classList.remove('range-unset');
      renderRangeOutput(input, true);

      if (dispatchEvent !== false) {
        input.dispatchEvent(new CustomEvent('range:answered', { bubbles: true }));
      }
    }

    function setUnansweredValue(input, fallbackValue) {
      ensureRangeProxy(input);
      if (typeof fallbackValue !== 'undefined') {
        input.value = fallbackValue;
      }

      var proxy = getRangeProxy(input);
      if (proxy) {
        proxy.value = '';
      }

      input.dataset.rangeAnswered = 'false';
      input.classList.add('range-unset');
      renderRangeOutput(input, false);
    }

    function scheduleAnsweredUpdate(input) {
      window.requestAnimationFrame(function () {
        setAnsweredValue(input);
      });
    }

    function prepareRangeInput(input) {
      if (input.dataset.rangeNoDefaultReady === 'true') {
        return;
      }

      input.dataset.rangeNoDefaultReady = 'true';
      ensureRangeProxy(input);

      var initialValue = input.dataset.initialValue || '';
      if (initialValue !== '') {
        setAnsweredValue(input, initialValue, false);
      } else {
        setUnansweredValue(input, midpointForInput(input));
      }

      input.addEventListener('input', function () {
        setAnsweredValue(input);
      });
      input.addEventListener('change', function () {
        setAnsweredValue(input);
      });
      input.addEventListener('click', function () {
        scheduleAnsweredUpdate(input);
      });
      input.addEventListener('pointerup', function () {
        scheduleAnsweredUpdate(input);
      });
      input.addEventListener('touchend', function () {
        scheduleAnsweredUpdate(input);
      });
      input.addEventListener('keydown', function (event) {
        var selectionKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
        if (selectionKeys.indexOf(event.key) !== -1) {
          window.setTimeout(function () {
            setAnsweredValue(input);
          }, 0);
        }
      });
    }

    function prepareAllRanges() {
      document.querySelectorAll('input[type="range"]:not([disabled])').forEach(prepareRangeInput);
    }

    window.SSNRange = {
      prepareAll: prepareAllRanges,
      hasAnswer: function (input) {
        return input.dataset.rangeAnswered === 'true';
      },
      setAnsweredValue: function (input, value) {
        setAnsweredValue(input, value);
      },
      setUnansweredValue: function (input, fallbackValue) {
        setUnansweredValue(input, fallbackValue);
      },
      renderOutput: function (input) {
        renderRangeOutput(input, input.dataset.rangeAnswered === 'true');
      },
      getProxy: getRangeProxy,
    };

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', prepareAllRanges);
    } else {
      prepareAllRanges();
    }
  })();
</script>
<script>
  (function () {
    function patchNextButtons() {
      var buttons = document.querySelectorAll('.otree-btn-next');
      buttons.forEach(function (btn) {
        if (btn.tagName === 'INPUT') {
          btn.value = 'Continuer';
        } else {
          btn.textContent = 'Continuer';
        }
      });
    }
    patchNextButtons();
    setTimeout(patchNextButtons, 0);
    setTimeout(patchNextButtons, 300);
  })();
</script>
<script>
  (function () {
    function setupRangeInteractionGuard() {
      if (window.SSNRange) {
        window.SSNRange.prepareAll();
      }

      document.querySelectorAll('form').forEach(function (form) {
        if (form.dataset.rangeInteractionGuardReady === 'true') {
          return;
        }

        var rangeInputs = Array.from(form.querySelectorAll('input[type="range"]:not([disabled])'));
        if (!rangeInputs.length) {
          return;
        }

        form.dataset.rangeInteractionGuardReady = 'true';
        var submitButtons = form.querySelectorAll('.otree-btn-next, button[type="submit"], input[type="submit"]');
        var touched = rangeInputs.some(function (input) {
          return window.SSNRange && window.SSNRange.hasAnswer(input);
        });
        var validationMessage = 'Veuillez déplacer au moins un curseur avant de continuer.';

        function setGuardState(active) {
          rangeInputs.forEach(function (input) {
            input.setCustomValidity(active ? validationMessage : '');
          });
          submitButtons.forEach(function (button) {
            button.disabled = active;
          });
        }

        function unlockGuard() {
          if (touched) {
            return;
          }
          touched = true;
          setGuardState(false);
        }

        setGuardState(!touched);

        rangeInputs.forEach(function (input) {
          input.addEventListener('input', unlockGuard, { once: true });
          input.addEventListener('change', unlockGuard, { once: true });
          input.addEventListener('range:answered', unlockGuard, { once: true });
        });

        form.addEventListener('submit', function (event) {
          if (touched) {
            return;
          }
          event.preventDefault();
          event.stopPropagation();
          if (rangeInputs[0]) {
            rangeInputs[0].reportValidity();
            rangeInputs[0].focus();
          }
        });
      });
    }

    function mountRangeInteractionGuard() {
      setupRangeInteractionGuard();
      setTimeout(setupRangeInteractionGuard, 0);
      setTimeout(setupRangeInteractionGuard, 300);
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', mountRangeInteractionGuard);
    } else {
      mountRangeInteractionGuard();
    }
  })();
</script>
{% if session.config.debug %}
<script>
  (function () {
    var pageClass = '{{ view.__class__.__name__ }}';
    var mapping = {
      Consent: ['0', '0'],
      Debug: ['A', 'DBG'],
      ConditionPicker: ['A', 'A1.1-BETA'],
      WelcomeA: ['A', 'A1.1'],
      InfoDelay: ['A', 'A1.1.1'],
      CompensationIntro: ['A', 'A1.2'],
      Age: ['A', 'A2'],
      Education: ['A', 'A3'],
      Employment: ['A', 'A4'],
      Income: ['A', 'A5'],
      Gender: ['A', 'A6'],
      MaritalStatus: ['A', 'A7'],
      Children: ['A', 'A8'],
      AttentionCheck: ['B', 'B1.0'],
      DecisionIntro: ['B', 'B1.1'],
      InfoChoice: ['B', 'B1.1.1'],
      InfoNoChoice: ['B', 'B1.1.1'],
      InfoDefaultChoice: ['B', 'B1.1.1'],
      ShowARUP: ['B', 'B1.1.2'],
      DecisionObserversInfo: ['B', 'B1.2'],
      DecisionObserversType: ['B', 'B1.3'],
      Decision: ['B', 'B1.3'],
      DecisionRecorded: ['B', 'B2.1'],
      DecisionBeliefRating: ['B', 'B2.2'],
      DecisionBeliefGive: ['B', 'B3'],
      EvaluationIntro: ['C', 'C1.1'],
      EvalInfoChoice: ['C', 'C1.1.1'],
      EvalInfoDefaultChoice: ['C', 'C1.1.1'],
      EvalShowARUP: ['C', 'C1.1.2'],
      Evaluation: ['C', 'C1.2'],
      EvaluationBeliefRating: ['C', 'C2'],
      EvaluationBeliefGive: ['C', 'C3'],
      PostIntro: ['D', 'D0'],
      AssocBeliefIntro: ['D', 'D1.1'],
      AssocBelief: ['D', 'D1.2'],
      AssocBenefit: ['D', 'D2.1'],
      AssocBudget: ['D', 'D2.2'],
      Altruism: ['D', 'D5'],
      SelfEsteem: ['D', 'D6'],
      Results: ['E', 'E1'],
      FinalCode: ['E', 'E1']
    };
    var resolved = mapping[pageClass] || ['?', pageClass || 'UNKNOWN'];
    var node = document.createElement('div');
    node.id = 'ssn-debug-sticky';
    node.textContent = 'Bloc ' + resolved[0] + ' | Screen ' + resolved[1] + ' | Page ' + (pageClass || 'UNKNOWN');
    document.body.appendChild(node);
  })();
</script>
{% endif %}
{% if session.config.condition_picker or session.config.debug %}
<script>
  (function () {
    function trigger(el, eventName) {
      if (!el) return;
      el.dispatchEvent(new Event(eventName, { bubbles: true }));
    }

    function setValue(input, value) {
      if (!input) return;
      input.value = value;
      trigger(input, 'input');
      trigger(input, 'change');
    }

    function defaultValueForInput(input) {
      var name = input.name || '';
      var explicitDefaults = {
        yapper_id: '123456',
        age: '30',
        attention_check: '5',
        family_support: '6',
        math_agreement: '7',
        expected_moral_rating: '3',
        expected_give_rate: '50',
        expected_peer_rating: '3',
        expected_peer_give: '50',
        arup_belief_1: '50',
        arup_belief_2: '50',
        arup_budget_percent: '50',
      };
      if (explicitDefaults[name] !== undefined) {
        return explicitDefaults[name];
      }

      var min = input.getAttribute('min');
      var max = input.getAttribute('max');
      if (min !== null && max !== null && min !== '' && max !== '') {
        var minNum = Number(min);
        var maxNum = Number(max);
        if (!Number.isNaN(minNum) && !Number.isNaN(maxNum)) {
          return String(Math.round((minNum + maxNum) / 2));
        }
      }
      return input.value || '1';
    }

    function unlockUi() {
      document.querySelectorAll('#wait-msg').forEach(function (node) {
        node.style.display = 'none';
      });
      document.querySelectorAll('[id="next-container"]').forEach(function (node) {
        node.style.display = 'block';
      });
      document.querySelectorAll('.otree-btn-next, button[type="submit"], input[type="submit"]').forEach(function (btn) {
        btn.disabled = false;
        btn.hidden = false;
        btn.style.display = '';
        btn.style.visibility = 'visible';
      });
    }

    function fillForm(form) {
      var radiosByName = {};
      form.querySelectorAll('input[type="radio"]:not([disabled])').forEach(function (input) {
        if (!input.name) return;
        if (!radiosByName[input.name]) {
          radiosByName[input.name] = [];
        }
        radiosByName[input.name].push(input);
      });

      Object.keys(radiosByName).forEach(function (name) {
        var radios = radiosByName[name];
        if (radios.some(function (radio) { return radio.checked; })) {
          return;
        }
        var preferred = radios.find(function (radio) {
          return radio.value === 'True' || radio.value === 'true' || radio.value === 'keep';
        });
        var chosen = preferred || radios[0];
        if (chosen) {
          chosen.checked = true;
          trigger(chosen, 'input');
          trigger(chosen, 'change');
        }
      });

      form.querySelectorAll('input[type="checkbox"]:not([disabled])').forEach(function (input) {
        if (!input.checked) {
          input.checked = true;
          trigger(input, 'input');
          trigger(input, 'change');
        }
      });

      form.querySelectorAll('input[type="range"]:not([disabled])').forEach(function (input) {
        setValue(input, defaultValueForInput(input));
      });

      form.querySelectorAll('input[type="number"]:not([disabled]), input[type="text"]:not([disabled])').forEach(function (input) {
        if ((input.value || '').trim() !== '') {
          trigger(input, 'input');
          trigger(input, 'change');
          return;
        }
        setValue(input, defaultValueForInput(input));
      });

      form.querySelectorAll('select:not([disabled])').forEach(function (select) {
        if (select.value) return;
        var firstValid = Array.from(select.options).find(function (option) {
          return option.value !== '';
        });
        if (firstValid) {
          select.value = firstValid.value;
          trigger(select, 'change');
        }
      });
    }

    function hardPass() {
      unlockUi();
      var form = document.querySelector('form');
      if (!form) {
        var finalBtn = document.querySelector('.final-end-btn');
        if (finalBtn) {
          finalBtn.click();
        }
        return;
      }

      fillForm(form);
      unlockUi();

      if (typeof form.requestSubmit === 'function') {
        form.requestSubmit();
        return;
      }

      var submitBtn = form.querySelector('.otree-btn-next, button[type="submit"], input[type="submit"]');
      if (submitBtn) {
        submitBtn.click();
        return;
      }
      form.submit();
    }

    function mountHardPassButton() {
      if (document.getElementById('ssn-hard-pass')) return;
      var button = document.createElement('button');
      button.id = 'ssn-hard-pass';
      button.type = 'button';
      button.style.position = 'fixed';
      button.style.top = '10px';
      button.style.right = '12px';
      button.style.bottom = 'auto';
      button.style.left = 'auto';
      button.style.zIndex = '5000';
      button.style.display = 'inline-flex';
      button.style.alignItems = 'center';
      button.style.gap = '8px';
      button.style.padding = '9px 13px';
      button.style.border = '1px solid #f59e0b';
      button.style.borderRadius = '999px';
      button.style.background = 'rgba(255, 251, 235, 0.88)';
      button.style.color = '#92400e';
      button.style.boxShadow = '0 4px 12px rgba(245, 158, 11, 0.2)';
      button.style.fontSize = '12px';
      button.style.fontWeight = '700';
      button.style.cursor = 'pointer';
      button.textContent = 'Hard pass';
      button.title = 'Mode test: remplit la page et passe au screen suivant';
      button.addEventListener('click', hardPass);
      document.body.appendChild(button);
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', mountHardPassButton);
    } else {
      mountHardPassButton();
    }
  })();
</script>
{% endif %}
{{ endblock }}