{% block title %}Comprehension Check{% endblock %}
{% block content %}

<div class="card info-card">
  <div class="card__header">
    <h4>Probability of playing action B</h4>
    <div class="card__subtitle">
      If your probability of playing action A is <strong>{{ for_view_p_a }}</strong>, what is your probability of playing action B?
    </div>
  </div>
  <div class="card__body">
    <!-- Display-only slider preset to given_p_a (e.g., 0.23) -->
    <div class="card slider-card" style="margin:0 0 14px 0;">
      <div class="card__header">
        <h4>In the slider:</h4>
      </div>
      <div class="card__body">
        <div id="slider_demo_here"></div>
      </div>
    </div>

    <!-- Your question input -->
    {{ form.cq_prob_b }}
    <div class="muted small">Enter the probability, from 0 to 100, of playing action B above.</div>
  </div>
</div>

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

<style>

  /* 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;
}

  .card{max-width:900px;margin:16px auto;border:1px solid #e5e7eb;border-radius:10px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.06)}
  .card__header{padding:14px 18px 10px 18px;border-bottom:1px solid #f0f2f5;background:#fafafa;border-radius:10px 10px 0 0}
  .card__header h4{margin:0;font-weight:600;font-size:18px}
  .card__subtitle{margin-top:4px;color:#6b7280;font-size:13px}
  .card__body{padding:16px 18px 18px 18px}
  .muted.small{color:#6b7280;font-size:12px}

  .next-wrap{max-width:900px;margin:10px auto 0;display:flex;justify-content:flex-end}
  .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,.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,.12)
  }

  /* Slider visuals (same as Decision page) */
  .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;font-size:14px;font-weight:600;
  }
  .slider-card .mgslider-show{text-align:center;padding-top:4px;color:#374151;font-size:14px}
  .slider-card .mgslider-value{font-variant-numeric:tabular-nums}
  .slider-card .mgslider-feedback{user-select:none;-webkit-user-select:none;-ms-user-select:none}
  .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:default;
  }
  .slider-card .mgslider{-webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:14px 0 0 0;position:relative;outline:none;--fill:0%}
  .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::-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:default
  }
  .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:default}
  .slider-hint{margin-top:10px;color:#6b7280;font-size:12px}
</style>

<!-- mgslider library -->
<script src="{{ static 'mgslider.js' }}"></script>

<script>
  $(function () {
    // Build a demo slider (NOT part of the form submission)
    const demo = new mgslider("cq_prob_demo", 0, 1, 0.01);
    demo.recall = false;
    demo.yourvalue = "Your probability of playing action A";


    // Fill track color
    demo.hook = function (sl) {
      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 + '%');
    };

    // Render & preset to given_p_a (e.g., 0.23)
    demo.print(document.getElementById("slider_demo_here"));
    demo.set(parseFloat("{{ given_p_a }}"));

    (function () {
    const v = parseFloat("{{ given_p_a }}");
    const p = Math.round(v * 100);
    const show = document.getElementById(demo.id("show"));
    if (show) {
      show.innerHTML = "Your probability of playing action A: "
        + "<b class='mgslider-value'>" + p + "</b>";
      }
    })();

    // Relabel ends visually to B (left) and A (right)
    (function () {
      const container = document.getElementById("slider_demo_here");
      if (!container) return;
      const limits = container.querySelectorAll(".mgslider-limit");
      if (limits.length >= 2) { limits[0].textContent = "0"; limits[1].textContent = "100"; }
    })();

    // Make it display-only: remove name so it won't submit, and disable interactions
    const hidden = document.getElementById(demo.id("input"));
    if (hidden) hidden.removeAttribute("name");
    const rangeEl = document.getElementById(demo.id());
    if (rangeEl) {
      rangeEl.style.pointerEvents = "none";   // no dragging
      rangeEl.tabIndex = -1;                  // skip focus
    }
    const beforeBar = document.getElementById(demo.id("before"));
    if (beforeBar) beforeBar.style.cursor = "default";
  });
</script>

{% endblock %}