{% block title %}
  <span class="title-left">Questionnaire</span>
{% endblock %}

{% block content %}

<div class="card">
  <div class="card__header">
    <h4>Demographics and Reasoning</h4>
    <div class="card__subtitle">Please answer the following.</div>
  </div>

  <div class="card__body">
    <div class="form-list">
      {{ formfield 'gender' }}
      {{ formfield 'age' }}
      {{ formfield 'grade' }}
      {{ formfield 'major' }}
      {{ formfield 'reasoning' }}
      {{ formfield 'interior' }}
    </div>
  </div>
</div>

<!-- ===== Sliders (use same look/feel as decision page) ===== -->
<div class="card slider-card">
  <div class="card__header">
    <h4>Slider Questions</h4>
  </div>

  <div class="card__body">
    <div class="qblock">
      <label class="qtitle">7. What do you think the <strong>average probability</strong> that others will choose as their probability of playing action A?</label>
      <div class="slider-narrow">
        <div id="belief_slider_here"></div>
      </div>
    </div>

    <div class="qblock">
      <label class="qtitle">8. Suppose you knew <strong>everyone else</strong> in your group’s realized action was action <strong>A</strong>. What probability would you select to play action A?</label>
      <div class="slider-narrow">
        <div id="free_riding_slider_here"></div>
      </div>
    </div>

    <div class="qblock">
      <label class="qtitle">9. Suppose you knew <strong>everyone else</strong> in your group’s realized action was action <strong>B</strong>. What probability would you select to play action A?</label>
      <div class="slider-narrow">
        <div id="altruism_slider_here"></div>
      </div>
    </div>

    <div class="qblock">
      <label class="qtitle">10. Suppose you knew <strong>1 other</strong> in your group’s realized action was action <strong>A</strong> and <strong>3 others</strong> was action <strong>B</strong>. What probability would you select to play action A?</label>
      <div class="slider-narrow">
        <div id="pivotality_slider_here"></div>
      </div>
    </div>

    <div class="slider-hint">Tip: you can drag or click anywhere on the slider.</div>
  </div>
</div>
<!-- ===== End sliders ===== -->

<div class="card">
  <div class="card__header">
    <h4>Feedback</h4>
  </div>
  <div class="card__body">
    <div class="form-list">
      {{ formfield 'clarity' }}
      {{ formfield 'feedback' }}
    </div>
  </div>
</div>

<div class="next-wrap">
  {{ next_button }}
</div>

<!-- Library (same as decision page) -->
<script src="{{ static 'mgslider.js' }}"></script>

<script>
  // Utility: wire up a slider instance into a specific mount, relabel min/max to B/A,
  // and keep the decision-page hook for track fill.
  function wireSlider(instance, mountEl){
    instance.recall = false;
    instance.yourvalue = "Probability of action A";

    instance.feedback = function (value) {
    const p = Math.round(value * 100);
    const q = 100 - p;
    return ""
      + "Your probability of playing action A: "
      + "<b class='mgslider-value'>" + p + "</b><br>"
      + "Your probability of playing action B: "
      + "<b class='mgslider-value'>" + q + "</b>";
  };

    instance.hook = function (sl, value) {
      const input = document.getElementById(sl.id());
      if (!input) return;
      const minI = 10000;
      const maxI = Math.round(sl.to_internal(sl.right()));
      const curI = parseFloat(input.value);
      const pct = Math.max(0, Math.min(100, 100 * (curI - minI) / (maxI - minI)));
      input.style.setProperty('--fill', pct + '%');
    };

    instance.print(mountEl);

    // Relabel the limit boxes within this mount only
    const limits = mountEl.querySelectorAll('.mgslider-limit');
    if (limits.length >= 2){
      limits[0].textContent = '0';
      limits[1].textContent = '100';
    }

    // Initialize the track fill
    const rangeEl = mountEl.querySelector('input.mgslider[type="range"]');
    if (rangeEl) rangeEl.style.setProperty('--fill', '0%');
  }

  document.addEventListener('DOMContentLoaded', function(){
    const beliefMount = document.getElementById('belief_slider_here');
    if (beliefMount){
      const s = new mgslider('belief', 0, 1, 0.01);
      wireSlider(s, beliefMount);
    }

    const frMount = document.getElementById('free_riding_slider_here');
    if (frMount){
      const s = new mgslider('free_riding', 0, 1, 0.01);
      wireSlider(s, frMount);
    }

    const altMount = document.getElementById('altruism_slider_here');
    if (altMount){
      const s = new mgslider('altruism', 0, 1, 0.01);
      wireSlider(s, altMount);
    }

    const pivMount = document.getElementById('pivotality_slider_here');
    if (pivMount){
      const s = new mgslider('pivotality', 0, 1, 0.01);
      wireSlider(s, pivMount);
    }
  });

  // next button ==> 'Submit Decision'
   document.addEventListener('DOMContentLoaded', function(){
    const b = document.querySelector('.otree-btn-next');
    if (b) b.textContent = 'Submit Responses';
  });
</script>

<style>

  /* =========================
   Canonical card styling
   (force consistent across pages)
   ========================= */

.card{
  max-width:900px !important;
  margin:16px auto !important;
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.06) !important;
}

.card__header{
  padding:14px 18px 10px 18px !important;
  border-bottom:1px solid #f0f2f5 !important;
  background:#fafafa !important;
  border-radius:10px 10px 0 0 !important;
}

.card__header h4{
  margin:0 !important;
  font-weight:600 !important;
  font-size:18px !important;
}

.card__subtitle{
  margin-top:4px !important;
  color:#6b7280 !important;
  font-size:13px !important;
}

.card__body{
  padding:16px 18px 18px 18px !important;
}


  /* Keep your existing card/title/button styles from this app.
     Below is exactly the slider CSS you asked to incorporate, scoped to .slider-card. */

  /* --------- Clean slider look (no behavior changes) --------- */
  .slider-card .mgslider-wrapper{
    width:100%;
    border-spacing:10px !important;
    table-layout:fixed;
  }
  .slider-card .mgslider-limit{
    width:12%;
    min-width:90px;
    height:44px;
    line-height:44px;
    text-align:center;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:8px;
    font-variant-numeric:tabular-nums;
    color:#374151;
  }
  .slider-card .mgslider-show{
    text-align:center;
    padding-top:4px;
    color:#374151;
  }
  .slider-card .mgslider-value{ font-variant-numeric:tabular-nums; }
  .slider-card .mgslider-feedback{ user-select:none; -webkit-user-select:none; -ms-user-select:none; }

  /* Initial “blue reveal” bar */
  .slider-card .mgslider-before{
    width:100%;
    height:18px;
    border-radius:999px;
    background:linear-gradient(90deg,#1e5bff 0%, #5b85ff 100%);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
    cursor:pointer;
  }

  /* Range input core (styled via CSS var --fill) */
  .slider-card .mgslider{
    -webkit-appearance:none; appearance:none;
    width:100%;
    background:transparent;
    margin:14px 0 0 0;
    position:relative;
    outline:none;
    --fill: 0%;
  }

  /* Track (WebKit/Blink) */
  .slider-card .mgslider::-webkit-slider-runnable-track{
    height:14px; border-radius:999px;
    background:
      linear-gradient(to right, #1e5bff 0 var(--fill), #e5edff var(--fill) 100%);
    border:1px solid #e5e7eb;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
  }
  .slider-card .mgslider:focus::-webkit-slider-runnable-track{
    border-color:#d1d5db;
  }

  /* Thumb (WebKit/Blink) */
  .slider-card .mgslider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:22px; height:22px; margin-top:-4px;
    border-radius:50%;
    background:#1e5bff; border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    cursor:pointer;
  }
  .slider-card .mgslider:focus::-webkit-slider-thumb{
    box-shadow:0 0 0 6px rgba(30,91,255,.15);
  }

  /* Firefox track & thumb */
  .slider-card .mgslider::-moz-range-track{
    height:14px; border-radius:999px;
    background:
      linear-gradient(to right, #1e5bff 0 var(--fill), #e5edff var(--fill) 100%);
    border:1px solid #e5e7eb;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
  }
  .slider-card .mgslider::-moz-range-thumb{
    width:22px; height:22px;
    border-radius:50%;
    background:#1e5bff; border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    cursor:pointer;
  }
  .slider-card .mgslider:focus::-moz-range-thumb{
    box-shadow:0 0 0 6px rgba(30,91,255,.15);
  }

  .slider-hint{ margin-top:10px; color:#6b7280; font-size:12px; }

  @media (max-width: 600px){
    .chat-card{ border-radius:8px; }
    #chat-log-only .otree-chat__messages{ max-height:280px; }
  }

  /* Make slider labels & feedback match the site typography/colors */
  .slider-card .mgslider-wrapper,
  .slider-card .mgslider-limit,
  .slider-card .mgslider-show,
  .slider-card .mgslider-value {
    font-family: inherit;
    color: #111827;
  }

  /* Min/Max boxes (“0” and “1”) */
  .slider-card .mgslider-limit {
    font-size: 14px;
    font-weight: 600;
  }

  /* “Your value: XX” line */
  .slider-card .mgslider-show {
    font-size: 14px;
    color: #374151;
  }

  /* The numeric value itself */
  .slider-card b.mgslider-value {
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
  }

  /* Make sure the <input type="range"> doesn’t bring its own font */
  .slider-card .mgslider { font: inherit; }

  /* --- Spacing & non-stretched width for survey sliders --- */
  .qblock{ margin: 18px 0 14px 0; }
  .qtitle{ display:block; margin-bottom:8px; color:#374151; font-weight:600; font-size:14px; }

  /* keep sliders from stretching to the card edges */
  .slider-narrow{
    max-width: 720px;  /* narrower than 900px card */
    margin: 0 auto;    /* center within the card */
  }

  .form-list{ display:grid; grid-template-columns:1fr; gap:18px; }

  .next-wrap{
    max-width: 900px;
    margin: 10px auto 0 auto;
    display:flex;
    justify-content:flex-end;
  }
  .next-wrap .btn{ border-radius:8px !important; padding:8px 16px !important; }

  .next-wrap .btn,
  .otree-btn-next,
  button[type="submit"].btn {
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    border: 1px solid #dbe2f3;
    background: linear-gradient(180deg, #f4f7ff 0%, #e9efff 100%);
    color: #1e3a8a;
    box-shadow: 0 4px 10px rgba(30, 91, 255, 0.08);
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
  }
  .next-wrap .btn:hover,
  .otree-btn-next:hover,
  button[type="submit"].btn:hover {
    background: linear-gradient(180deg, #eaf0ff 0%, #dee7ff 100%);
    box-shadow: 0 6px 14px rgba(30, 91, 255, 0.12);
  }
  .next-wrap .btn:active,
  .otree-btn-next:active,
  button[type="submit"].btn:active {
    transform: translateY(1px);
  }
  .next-wrap .btn:focus,
  .otree-btn-next:focus,
  button[type="submit"].btn:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgba(30, 91, 255, .15);
  }
  .next-wrap .btn:disabled,
  .otree-btn-next:disabled,
  button[type="submit"].btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Make the built-in oTree title match the card aesthetic */
  /* Title bar — align with card content */
  .otree-title{
  max-width: 900px;
  margin: 6px auto 14px auto !important;

  /* match .card__header / .card__body horizontal padding */
  padding-left: 2px !important;
  padding-right: 2px !important;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: #111827;
  border: 0;
}

.title-left{ line-height: 1.1; }
}



</style>

{% endblock %}