{% block title %}Decision {{ player.round_number }} out of 3{% endblock %}
{% block content %}
<style>
  :root {
    --primary: #0ea5e9;
    --border: #e5e7eb;
    --muted: #6b7280;
    --card-bg: #ffffff;
  }

  .intro {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 20px;
  }
  @media (max-width: 980px) {
    .cards-grid { grid-template-columns: 1fr; }
  }

  .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }
  .card-body { padding: 20px; }

  .preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  #avatarWrapperPreview, .avatar-frame {
    position: relative;
    width: 150px;
    height: 155px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
  }
  #avatarImagePreview, .avatar-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
  }

  .preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 1.1rem;
    color: #111827;
    margin-top: 12px;
  }
  .preview-grid div {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
  }

  .muted { color: var(--muted); font-size: 0.9rem; }

  .slider-row {
    display: flex; align-items: center; gap: 12px; margin: 18px 0;
  }
  .tick { font-weight: 700; font-size: 16px; }

  .slider-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }

  /* Updated Slider Track setup for dynamic background */
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 5px;
    /* Default background before JS kicks in */
    background: #e5e7eb;
    outline: none;
    margin: 0;
    cursor: pointer;
  }

  /* Make the native track transparent so our JS gradient shows through */
  .slider::-webkit-slider-runnable-track {
    background: transparent;
    border-radius: 5px;
    height: 12px;
  }
  .slider::-moz-range-track {
    background: transparent;
    border-radius: 5px;
    height: 12px;
  }

  /* The "Zero" Tick Mark */
  .zero-marker {
    position: absolute;
    left: 33.3%; /* Exact 0 point between -50 and 100 */
    width: 3px;
    height: 35px;
    background-color: #000000; /* Slightly darker so it stands out */
    z-index: 1;
    pointer-events: none;
  }

  /* Slider Thumb (The Dot) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    margin-top: -5px;
    margin-left: -3px;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }

  .slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #04AA6D;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }

  .slider:active::-webkit-slider-thumb,
  .slider:focus::-webkit-slider-thumb,
  .slider:focus-visible::-webkit-slider-thumb {
    transform: scale(1.1);
    transition: transform 100ms ease;
  }
  .slider:active::-moz-range-thumb,
  .slider:focus::-moz-range-thumb,
  .slider:focus-visible::-moz-range-thumb {
    transform: scale(1.1);
    transition: transform 100ms ease;
  }

</style>

<div class="intro">
  <p>
    You are endowed with <strong>100 tokens </strong> and the matched participant shown below is endowed with <strong>50 tokens</strong>.
  </p>
  <p>
    You can choose to <strong>send</strong> up to 100 of your tokens to the matched participant, OR you can choose to <strong>take</strong> up to 50 tokens from the matched participant.
    This is a <strong>one-time decision</strong> and cannot be changed after submission.
  Please use the slider below to make your decision.</p>

</div>

<div class="cards-grid">
  <div class="card">
    <div class="card-body">
      <div class="preview-header">
        <h3 style="margin:0;">You</h3>
      </div>

      <div id="senderAvatarFrame" class="avatar-frame">
        <img id="senderAvatarImg" class="avatar-img" src="" alt="Your avatar">
      </div>

       <p style="text-align:center; margin:10px 0 0 0;">
         Prolific ID: <strong id="pv_prolific">—</strong>
       </p>

      <div class="preview-grid">
        <div>Month of Birth:<br><strong><span>{{ participant.QoB }}</span></strong></div>
          <div>Country of Birth:<br><strong><span>{{ participant.country_of_birth }}</span></strong></div>
          <div>Gender:<br><strong> <span>{{ participant.genderSelect }}</span></strong></div>
          <div>First language:<br><strong><span>{{ participant.first_language }}</span></strong></div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="preview-header">
        <h3 style="margin:0;">Matched participant {{ player.round_number }}</h3>
      </div>

      <div id="receiverAvatarFrame" class="avatar-frame">
        <img id="receiverAvatarImg" class="avatar-img" src="" alt="Receiver avatar">
      </div>

      <p style="text-align:center; margin:10px 0 0 0;">
        Prolific ID: <strong>{{ receiver_profile.id }}</strong>
      </p>

      <div class="preview-grid">
        <div>Month of Birth:<br><strong><span>{{ receiver_profile.qob }}</span></strong></div>
          <div>Country of Birth:<br><strong><span>{{receiver_profile.country}}</span></strong></div>
        <div>Gender:<br><strong><span>{{ receiver_profile.gender }}</span></strong></div>
          <div>First Language:<br><strong><span>{{ receiver_profile.language }}</span></strong></div>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="slider-row">
  <span class="tick">Take 50</span>
  <div class="slider-container">
    <div class="zero-marker"></div>
    <input id="giveSlider" type="range" name="transfer" min="-50" max="100" step="1" class="slider" oninput="updateDescription(this)" value="0" aria-label="Tokens to send or take">
  </div>
  <span class="tick">Send 100</span>
</div>
<p id="description" style="font-weight: bold; font-size: 1.1rem; color: #0ea5e9; min-height: 2rem;"></p>

{{ next_button }}

<script>
  const participantLabelRaw = "{{ participant.label}}";
  const participantLabelShown = (String(participantLabelRaw).slice(0, 5)) + ".....";

  document.addEventListener('DOMContentLoaded', function () {
    const pvProlific = document.getElementById('pv_prolific');
    if (pvProlific) {
      pvProlific.innerText = participantLabelShown || '-----';
    }

    // Trigger the description & visual update immediately when the page loads
    const slider = document.getElementById('giveSlider');
    if (slider) {
        updateDescription(slider);
    }
  });

  function generateAvatar(frameId, imgId, clothingType, clothingColor, topType, bgFilename){
    const url = `https://avataaars.io/?avatarStyle=Transparent&skinColor=Yellow&topType=${topType}&clotheType=${clothingType}&clotheColor=${clothingColor}&graphicType=Deer`;
    const img = document.getElementById(imgId);
    const frame = document.getElementById(frameId);

    if (img) img.src = url;

    if (frame) {
        const bgPath = bgFilename ? `/static/global/${bgFilename}` : `/static/global/Pic_1.jpeg`;
        frame.style.backgroundImage = `url('${bgPath}')`;
    }
  }

  (function initSender(){
    const top1 = js_vars.hair1;
    const clothing1 = (js_vars.topc || "Hoodie-Gray01").split("-");
    generateAvatar('senderAvatarFrame', 'senderAvatarImg', clothing1[0], clothing1[1], top1, js_vars.backgroundim);
  })();

  (function initReceiver(){
    const rTop = js_vars.rec_hair;
    const rClothType = js_vars.rec_clothingType;
    const rClothColor = js_vars.rec_clothingColor;
    const rBg = js_vars.rec_background;
    generateAvatar('receiverAvatarFrame', 'receiverAvatarImg', rClothType, rClothColor, rTop, rBg);
  })();

  function updateDescription(input){
    const val = parseInt(input.value || 0, 10);
    let desc = "";

    // --- NEW: Calculate the center-out fill for the slider ---
    const min = parseInt(input.min, 10); // -50
    const max = parseInt(input.max, 10); // 100
    const range = max - min; // 150 total steps

    // Calculate percentages for the background gradient
    const zeroPercent = (0 - min) / range * 100; // This will equal 33.33%
    const valPercent = (val - min) / range * 100;

    let fillStart, fillEnd;

    if (val < 0) {
        // If taking, fill from current value up to 0
        fillStart = valPercent;
        fillEnd = zeroPercent;
    } else {
        // If sending, fill from 0 up to current value
        fillStart = zeroPercent;
        fillEnd = valPercent;
    }

    // Apply the gradient dynamically to the slider input
    input.style.background = `linear-gradient(to right,
        #e5e7eb 0%,
        #e5e7eb ${fillStart}%,
        #0ea5e9 ${fillStart}%,
        #0ea5e9 ${fillEnd}%,
        #e5e7eb ${fillEnd}%,
        #e5e7eb 100%)`;


    // --- Existing description update logic ---
    const senderFinal = 100 - val;
    const receiverFinal = 50 + val;

    if (val > 0) {
        desc = `You will send ${val} tokens to the matched participant.
        You will end up with ${senderFinal} tokens, and the matched participant will end up with ${receiverFinal} tokens.`;
    } else if (val < 0) {
        const absVal = Math.abs(val);
        desc = `You will take ${absVal} tokens from the matched participant.
        You will end up with ${senderFinal} tokens, and the matched participant will end up with ${receiverFinal} tokens.`;
    } else {
        desc = `You will send 0 and take 0.
        You will keep your 100 tokens, and the matched participant will keep their 50 tokens.`;
    }

    document.getElementById('description').innerText = desc;
  }
</script>
{% endblock %}