{{ block title }}
  <span class="title-left">Decision</span>
  <span class="title-right">
    <span class="chat-round">Round {{ cur_round }} / {{ num_rounds }}</span>
    <span class="chat-dot">•</span>
  </span>
{{ endblock }}

{{ block content }}

<!-- Game info card -->
<div class="card info-card">
  <div class="card__header">
    <h4>Reminder</h4>
  </div>

  <div class="card__body">
    <div class="info-grid two-col">
      <!-- Left column: endowment, group size, threshold requirement -->
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Endowment</div>
          <div class="info-val"><span class="badge badge-neutral">{{ endowment }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Group Size</div>
          <div class="info-val"><span class="badge badge-neutral">{{ players_per_group }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Threshold A Requirement</div>
          <div class="info-val"><span class="badge badge-neutral">{{ threshold }}</span></div>
        </div>
      </div>

      <!-- Right column: threshold gain, cost A, cost B -->
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Threshold A Gain</div>
          <div class="info-val"><span class="badge badge-neutral">{{ public_good }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Cost if you play A</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_one }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Cost if you play B</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_zero }}</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Read-only chat card (same look as chat page) -->
<div class="chat-card">
  <div class="chat-header">
    <h4>Group Chat (Read-Only)</h4>
    <div class="chat-subtitle">The chat transcript is locked. You can scroll to read past messages, but you can’t send new ones.</div>
  </div>

  <div id="chat-log-only">
    {{ chat channel=chat_channel }}
  </div>
</div>

{{ formfield_errors 'mix_prob' }}

<!-- Slider card -->
<div class="card slider-card">
  <div class="card__header">
    <h4>Your Decision</h4>
    <div class="card__subtitle">Click the blue bar to reveal the slider, then pick your probability of playing A.</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 to make your decision.</div>
  </div>
</div>

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

<!-- ===== Styles (chat + slider) ===== -->
<style>
  /* --------- Chat card --------- */
  .chat-card{
    max-width: 900px;
    margin: 18px auto 8px auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
  .chat-header{
    padding: 14px 18px 8px 18px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafafa;
    border-radius: 10px 10px 0 0;
  }
  .chat-header h4{ margin:0; font-weight:600; font-size:18px; }
  .chat-subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  #chat-log-only{ padding: 10px 14px 6px 14px; }
  #chat-log-only .otree-chat__messages{
    max-height: 360px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fbfcfe;
  }
  #chat-log-only .otree-chat__messages li{
    list-style: none;
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }
  #chat-log-only .otree-chat__messages li:nth-child(odd){ background:#fdfefe; }
  #chat-log-only .otree-chat__sender{ font-weight:600; color:#374151; margin-right:6px; }
  #chat-log-only .otree-chat__timestamp{ color:#9ca3af; font-size:12px; margin-left:6px; }
  #chat-log-only .otree-chat__message{ margin-top:4px; white-space:pre-wrap; line-height:1.35; }
  .chat-note{ padding: 8px 18px 14px 18px; color:#6b7280; }

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

  /* Hide/remove any composer/inputs/buttons so it’s truly read-only */
  #chat-log-only form,
  #chat-log-only .otree-chat__composer,
  #chat-log-only .otree-chat__form,
  #chat-log-only .otree-chat__message-input,
  #chat-log-only .otree-chat__btn-send,
  #chat-log-only input[type="text"],
  #chat-log-only textarea,
  #chat-log-only button[type="submit"]{
    display:none !important;
  }

  /* --------- Generic card shell shared by slider --------- */
  .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; }

  /* --------- 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;   /* inherit your page font */
    color: #111827;         /* same body text color you’re using */
  }

  /* Min/Max boxes (“0” and “1”) */
  .slider-card .mgslider-limit {
    font-size: 14px;        /* align with your info card text size */
    font-weight: 600;       /* same weight as badges/titles if you like */
  }

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

  /* The numeric value itself */
  .slider-card b.mgslider-value {
    font-weight: 600;       /* consistent semi-bold, not default <b> bold */
    color: #111827;         /* same as main text */
    font-variant-numeric: tabular-nums; /* keeps the number steady */
  }

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


  /* Polished Next button to match cards */
  .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 */
  .otree-title {
    max-width: 900px;
    margin: 6px auto 14px auto !important;
    padding: 6px 2px 0 2px;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    color: #111827;
    border: 0;
  }

  /* Title as a flex row with right-aligned meta */
  .otree-title{
    max-width:900px; margin:6px auto 14px auto !important; padding:6px 2px 0 2px;
    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; }
  .title-right{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:600; font-size:13px; color:#111827;
  }
  .chat-round{ white-space:nowrap; }
  .chat-dot{ color:#9ca3af; }

  /* ==== Info card layout (neutral style) ==== */
  .info-card .card__subtitle{ margin-top: 2px; }

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

  /* Neutral badges for all values */
  .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; }
    .info-kv{ grid-template-columns: 1fr auto; }
  }

  /* chat testing */
  /* Scope to both live chat (#chat-wrapper) and read-only chat (#chat-log-only) */
  #chat-wrapper .otree-chat__messages,
  #chat-log-only .otree-chat__messages{
    background: #f9fbff;           /* soft panel */
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
  }

  /* Each message bubble */
  #chat-wrapper .otree-chat__messages li,
  #chat-log-only .otree-chat__messages li{
    list-style: none;
    margin: 10px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e6ecf8;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }

  /* Sender name (neutral, bold) */
  #chat-wrapper .otree-chat__sender,
  #chat-log-only .otree-chat__sender,
  #chat-wrapper .otree-chat__nickname,
  #chat-log-only .otree-chat__nickname,
  /* catch-all in case oTree uses <strong> for sender */
  #chat-wrapper .otree-chat__messages li > strong:first-child,
  #chat-log-only .otree-chat__messages li > strong:first-child{
    color: #1f2937 !important;   /* neutral dark gray */
    font-weight: 700 !important;
  }

  /* Some themes add .text-warning / labels to the nickname: neutralize */
  #chat-wrapper .otree-chat__messages .text-warning,
  #chat-log-only .otree-chat__messages .text-warning{
    color: #1f2937 !important;
  }

  /* Hide timestamps entirely */
  #chat-wrapper .otree-chat__timestamp,
  #chat-log-only .otree-chat__timestamp{
    display: none !important;
  }

  /* Message text a touch smaller & comfy line-height */
  #chat-wrapper .otree-chat__message,
  #chat-log-only .otree-chat__message{
    margin-top: 6px;
    font-size: 15px;             /* slightly smaller */
    line-height: 1.4;
    color: #111827;
    white-space: pre-wrap;
  }
</style>
<!-- ===== End styles ===== -->

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

<script>
  $(document).ready(function () {
    const slider = new mgslider("mix_prob", 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%');
  });

  // Final safety: remove any inputs/buttons if present and neutralize send hooks
  document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('chat-log-only');
    if (!root) return;
    root.querySelectorAll('form, input, textarea, button').forEach(el => {
      if (!el.closest('.otree-chat__messages')) el.remove();
    });
    if (typeof window.liveSend === 'function') {
      window.liveSend = function(){};
    }
  });

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




{{ endblock }}