{{ block title }}{{ block_label }} — Norm Task{{ endblock }}

{{ block content }}
<div id="task-app">

    <!-- Progress bar -->
    <div style="margin-bottom:24px;">
        <div style="height:6px; background:#ddd8ce; border-radius:3px; overflow:hidden;">
            <div id="progress-fill" style="height:100%; background:#2a6e7c; transition:width .3s; width:0%;"></div>
        </div>
        <div id="progress-label" style="font-size:.8rem; color:#6b7280; margin-top:4px; text-align:right;"></div>
    </div>

    <div class="card">
        <p style="color:#6b7280; margin-bottom:20px; text-align:center;">
            The icons below the options show the decision of the earlier group.
            Which option do you prefer?
        </p>

        <!-- Option boxes -->
        <div style="display:flex; gap:20px; margin:20px 0; justify-content:center;">

            <div id="box-left" onclick="selectOption('left')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Left Option</div>
                <svg id="left-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="left-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:12px; min-height:32px;"></div>
            </div>

            <div id="box-right" onclick="selectOption('right')"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; cursor:pointer; text-align:center;
                        transition:border-color .15s, background .15s; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Right Option</div>
                <svg id="right-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="right-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:12px; min-height:32px;"></div>
            </div>

        </div>

        <input type="hidden" id="id_norm_decisions_data" name="norm_decisions_data" value="{}">

        <div style="display:flex; justify-content:flex-end; margin-top:24px;">
            <button type="button" id="btn-next" onclick="advanceSituation()"
                    style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                           border-radius:8px; font-size:1rem; cursor:pointer;
                           opacity:.4; pointer-events:none;">
                Next →
            </button>
        </div>
    </div>

</div>

<script type="application/json" id="situations-data">{{ situations }}</script>

<script>
const TASK_TYPE          = "{{ task_type }}";
const DICTATOR_ENDOWMENT = {{ dictator_endowment }};
const BLOCK_TOTAL        = {{ block_total }};
const SITUATIONS         = JSON.parse(document.getElementById('situations-data').textContent);

let currentIdx   = 0;
let selectedSide = null;
let sitStartTime = null;
const allDecisions = {};

window.addEventListener('DOMContentLoaded', () => { loadSituation(0); });

function loadSituation(idx) {
    currentIdx   = idx;
    selectedSide = null;
    sitStartTime = Date.now();

    // Reset boxes
    document.getElementById('box-left').style.borderColor  = '#ddd8ce';
    document.getElementById('box-right').style.borderColor = '#ddd8ce';
    document.getElementById('box-left').style.background   = '';
    document.getElementById('box-right').style.background  = '';

    lockNext();

    const btn = document.getElementById('btn-next');
    btn.textContent = (idx === BLOCK_TOTAL - 1) ? 'Submit →' : 'Next →';

    // Progress
    document.getElementById('progress-fill').style.width =
        (idx / BLOCK_TOTAL * 100) + '%';
    document.getElementById('progress-label').textContent =
        (idx + 1) + ' of ' + BLOCK_TOTAL;

    const sit = SITUATIONS[idx];

    if (TASK_TYPE === 'lottery') {
        drawRiskWheel('left-viz',  sit.left);
        drawRiskWheel('right-viz', sit.right);
    } else {
        drawDictatorCard('left-viz',  sit.left,  DICTATOR_ENDOWMENT);
        drawDictatorCard('right-viz', sit.right, DICTATOR_ENDOWMENT);
    }

    renderPeople('left-people',  sit.n_chose_left,        10);
    renderPeople('right-people', 10 - sit.n_chose_left,   10);
}

function selectOption(side) {
    selectedSide = side;
    document.getElementById('box-left').style.borderColor  = side === 'left'  ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-right').style.borderColor = side === 'right' ? '#2a6e7c' : '#ddd8ce';
    document.getElementById('box-left').style.background   = side === 'left'  ? '#e8f4f7' : '';
    document.getElementById('box-right').style.background  = side === 'right' ? '#e8f4f7' : '';
    unlockNext();
}

function lockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity = '.4'; btn.style.pointerEvents = 'none';
}

function unlockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity = '1'; btn.style.pointerEvents = 'auto';
}

function advanceSituation() {
    if (!selectedSide) return;
    const sit = SITUATIONS[currentIdx];
    allDecisions[sit.id] = {
        chosen_side:      selectedSide,
        chosen_option_id: selectedSide === 'left' ? sit.left.option_id : sit.right.option_id,
        decision_time_ms: Date.now() - sitStartTime,
    };

    if (currentIdx < BLOCK_TOTAL - 1) {
        loadSituation(currentIdx + 1);
    } else {
        document.getElementById('id_norm_decisions_data').value = JSON.stringify(allDecisions);
        document.querySelector('form').submit();
    }
}

// ── People pictograms ────────────────────────────────────────────────────────
function renderPeople(containerId, nActive, total) {
    const c = document.getElementById(containerId);
    c.innerHTML = '';
    for (let i = 0; i < total; i++) {
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('width', '24');
        svg.setAttribute('height', '24');
        const active = i < nActive;
        svg.style.fill    = active ? '#2a6e7c' : '#c0bdb5';
        svg.style.opacity = active ? '.85'     : '.4';
        svg.innerHTML = '<circle cx="12" cy="6" r="3.5"/><path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>';
        c.appendChild(svg);
    }
}

// ─── Dictator card visualisation ─────────────────────────────────────────────
function drawDictatorCard(svgId,opt,endowment){const svg=document.getElementById(svgId);if(!svg)return;while(svg.firstChild)svg.removeChild(svg.firstChild);const ns='http://www.w3.org/2000/svg',MAX_R=26,W=260,H=310,COL_YOU=105,COL_OTH=220,DIV_V=162;svg.setAttribute('viewBox','0 0 '+W+' '+H);function mk(tag,attrs){const el=document.createElementNS(ns,tag);for(const [k,v] of Object.entries(attrs))el.setAttribute(k,v);return el;}function mkText(txt,x,y,size,weight,fill){const el=mk('text',{'font-family':'sans-serif','font-size':size||13,'font-weight':weight||'400',fill:fill||'#333','text-anchor':'middle','dominant-baseline':'central',x,y});el.textContent=txt;return el;}const defs=mk('defs',{});const marker=mk('marker',{id:svgId+'-arr',viewBox:'0 0 10 10',refX:8,refY:5,markerWidth:6,markerHeight:6,orient:'auto-start-reverse'});marker.appendChild(mk('path',{d:'M2 1L8 5L2 9',fill:'none',stroke:'#666','stroke-width':'1.5','stroke-linecap':'round','stroke-linejoin':'round'}));defs.appendChild(marker);svg.appendChild(defs);svg.appendChild(mkText('You',COL_YOU,22,13,'600','#444'));svg.appendChild(mkText('Other',COL_OTH,22,13,'600','#444'));svg.appendChild(mk('line',{x1:162,y1:30,x2:162,y2:295,stroke:'#ccc','stroke-width':1}));svg.appendChild(mk('line',{x1:10,y1:DIV_V,x2:255,y2:DIV_V,stroke:'#ccc','stroke-width':1}));[['initial','split',95,107],['final','payouts',228,240]].forEach(([l1,l2,y1,y2])=>{svg.appendChild(mkText(l1,27,y1,11,'400','#888'));svg.appendChild(mkText(l2,27,y2,11,'400','#888'));});function drawCoin(cx,cy,amount){const r=Math.sqrt(amount/endowment)*MAX_R,th=Math.max(8,r*0.55),ry=Math.max(3,r*0.37),g=mk('g',{transform:'translate('+cx+','+cy+')'});g.appendChild(mk('ellipse',{cx:0,cy:th/2,rx:r,ry:ry,fill:'#b8881a'}));g.appendChild(mk('rect',{x:-r,y:-th/2,width:r*2,height:th,fill:'#b8881a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r,ry:ry,fill:'#e8c86a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r*0.85,ry:ry*0.85,fill:'none',stroke:'#c8a030','stroke-width':'1.2','stroke-dasharray':'3 3'}));if(r>=14){const t=mk('text',{'font-family':'serif','font-size':Math.round(r*.72),'font-weight':'700',fill:'#a07010','text-anchor':'middle','dominant-baseline':'central',x:0,y:-th/2});t.textContent='1';g.appendChild(t);}svg.appendChild(g);}const {own_payoff,transfer,multiplier}=opt,otherFinal=Math.round(transfer*multiplier*100)/100;if(own_payoff>0)drawCoin(COL_YOU,80,own_payoff);if(transfer>0)drawCoin(COL_OTH,80,transfer);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,120,13,'700','#333'));svg.appendChild(mkText(transfer+' MU',COL_OTH,120,13,'700','#333'));function drawArrow(cx,label,isMult){const mUrl='url(#'+svgId+'-arr)';svg.appendChild(mk('line',{x1:cx,y1:138,x2:cx,y2:150,stroke:'#666','stroke-width':'1.5'}));const bw=isMult?44:64;svg.appendChild(mk('rect',{x:cx-bw/2,y:150,width:bw,height:19,rx:4,fill:'white',stroke:'#ccc','stroke-width':'0.8'}));svg.appendChild(mkText(label,cx,160,isMult?11:10,isMult?'700':'400',isMult?'#333':'#555'));svg.appendChild(mk('line',{x1:cx,y1:169,x2:cx,y2:182,stroke:'#666','stroke-width':'1.5','marker-end':mUrl}));}drawArrow(COL_YOU,'you keep',false);drawArrow(COL_OTH,'× '+multiplier,true);if(own_payoff>0)drawCoin(COL_YOU,215,own_payoff);if(otherFinal>0)drawCoin(COL_OTH,215,otherFinal);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,255,13,'700','#333'));svg.appendChild(mkText(otherFinal+' MU',COL_OTH,255,13,'700','#333'));}

// ─── Risk wheel visualisation ─────────────────────────────────────────────────
function drawRiskWheel(svgId,opt){const svg=document.getElementById(svgId);if(!svg)return;while(svg.firstChild)svg.removeChild(svg.firstChild);svg.setAttribute('viewBox','-100 -100 200 200');const ns='http://www.w3.org/2000/svg',R=80,ORANGE='#E07B2A',PURPLE='#7C5CBF';function mkEl(tag,attrs){const el=document.createElementNS(ns,tag);for(const [k,v] of Object.entries(attrs))el.setAttribute(k,v);return el;}function mkText(txt,x,y,size){const el=document.createElementNS(ns,'text');Object.entries({x,y,fill:'white','font-family':'sans-serif','font-size':size||16,'font-weight':'700','text-anchor':'middle','dominant-baseline':'central'}).forEach(([k,v])=>el.setAttribute(k,v));el.textContent=txt+' MU';return el;}const pLeft=parseFloat(opt.probability_left),pRight=1-pLeft,lOut=opt.left_outcome,rOut=opt.right_outcome,certain=(lOut===rOut)||pLeft>=0.999;svg.appendChild(mkEl('circle',{cx:0,cy:0,r:R,fill:ORANGE}));if(!certain){const halfSweep=pRight*Math.PI,tx=Math.cos(-halfSweep)*R,ty=Math.sin(-halfSweep)*R,bx=Math.cos(halfSweep)*R,by=Math.sin(halfSweep)*R;svg.appendChild(mkEl('path',{d:`M0,0 L${tx},${ty} A${R},${R} 0 ${pRight>.5?1:0},1 ${bx},${by} Z`,fill:PURPLE}));svg.appendChild(mkEl('circle',{cx:0,cy:0,r:R,fill:'none',stroke:'white','stroke-width':'1',opacity:'0.25'}));svg.appendChild(mkText(lOut,-(R*0.48),0,16));svg.appendChild(mkText(rOut,(R*0.48),0,16));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent=Math.round(pLeft*100)+'% / '+Math.round(pRight*100)+'%';}else{svg.appendChild(mkText(lOut,0,0,19));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent='100%';}}
</script>

<style>
.card { background:#fff; border:1px solid #ddd8ce; border-radius:8px; padding:28px 32px; margin-bottom:20px; }
</style>

{{ endblock }}