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

{% block content %}

{{ formfield_errors 'cq_slider_p' }}

<!-- Slider card (identical look/behavior to Decision page) -->
<div class="card slider-card">
  <div class="card__header">
    <h4>Set the Slider</h4>
    <div class="card__subtitle">Please set your probability of playing action A to <strong>{{ target }}</strong>.</div>
  </div>

  <div class="card__body">
    <div id="slider_here"></div>
    <div class="slider-hint">Tip: you can drag or click anywhere on the slider.</div>
  </div>
</div>

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

<!-- ===== Styles (same shell & slider styling you use on Decision) ===== -->
<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; }

  .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; }

  /* Info grid */
  .info-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 18px; }
  .info-kv{ display:grid; grid-template-columns:1fr auto; align-items:center; }
  .info-key{ color:#6b7280; font-size:13px; }
  .info-val{ font-variant-numeric: tabular-nums; }
  .badge{ display:inline-block; padding:4px 10px; border-radius:999px; line-height:1.1; font-weight:600; font-size:13px; }
  .badge-neutral{ background:#f5f7fb; border:1px solid #e2e8f0; color:#111827; }
  @media (max-width:640px){ .info-grid{ grid-template-columns:1fr; } }

  /* Slider visuals (identical to Decision) */
  .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:pointer;
  }
  .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:focus::-webkit-slider-runnable-track{ border-color:#d1d5db; }
  .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); }
  .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-hint{ margin-top:10px; color:#6b7280; font-size:12px; }

  /* Polished Next button (your global) */
  .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);
  }
  .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;
  }
</style>
<!-- ===== End styles ===== -->

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

<script>
  $(document).ready(function () {
    const slider = new mgslider("cq_slider_p", 0, 1, 0.01);
    slider.recall = false;

    // ---------- DISPLAY: show integers 0..100 + complementary line ----------
    slider.feedback = function (value) {
      // value is the saved decimal in [0,1]
      const p = Math.round(value * 100);     // displayed as integer 0..100
      const q = 100 - p;                     // complementary integer
      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>";
    };

    // ---------- SAVE: keep hidden input as clean decimals (avoid 0.7700000001) ----------
    // Override change_from_slider so the hidden input is always rounded to the step
    slider.change_from_slider = function (sliderEl) {
      const raw = this.from_internal(sliderEl.value);                 // may have float noise
      const snapped = Math.round(raw / this.step) * this.step;        // snap to step grid
      const clean = snapped.toFixed(this.digits);                     // "0.00".."1.00"
      document.getElementById(this.id("input")).value = clean;        // saved value
      this.change();
    };

    // Also override set() for reveal/recall paths
    slider.set = function (new_value) {
      document.getElementById(this.id()).style.display = "block";
      document.getElementById(this.id("before")).style.display = "none";
      document.getElementById(this.id("show")).style.visibility = "visible";

      const snapped = Math.round(new_value / this.step) * this.step;
      const clean = snapped.toFixed(this.digits);

      document.getElementById(this.id("input")).value = clean;
      document.getElementById(this.id()).value = this.to_internal(parseFloat(clean));

      return this.change();
    };

    // ---------- Visual-only: update CSS --fill to color the track up to the thumb ----------
    slider.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 + '%');
    };

    slider.print(document.getElementById("slider_here"));

    // ---------- Relabel endpoints visually: 0 and 100 ----------
    (function () {
      const container = document.getElementById("slider_here");
      if (!container) return;
      const limits = container.querySelectorAll(".mgslider-limit");
      if (limits.length >= 2) {
        limits[0].textContent = "0";
        limits[1].textContent = "100";
      }
    })();

    // Initialize fill to 0% until reveal/first move
    const inputEl = document.getElementById(slider.id());
    if (inputEl) inputEl.style.setProperty('--fill', '0%');
  });

</script>

{% endblock %}