{{ block title }}Allocation Task Instructions{{ endblock }}

{{ block content }}
<div class="exp-card">

    {{ dictator_instructions_html|safe }}

    <h3>Example</h3>
    <p>Below is an example of how a situation looks. The numbers in the actual task may be
    different.</p>

    <div style="display:flex; gap:20px; margin:20px 0; justify-content:center;">
        <div style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                    padding:20px; text-align:center;">
            <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                        color:#6b7280; margin-bottom:8px;">Option A</div>
            <svg id="ex-left-viz" width="100%" viewBox="0 0 260 310"
                 style="display:block; margin:8px auto 0; max-width:260px;"></svg>
        </div>
        <div style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                    padding:20px; text-align:center;">
            <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                        color:#6b7280; margin-bottom:8px;">Option B</div>
            <svg id="ex-right-viz" width="100%" viewBox="0 0 260 310"
                 style="display:block; margin:8px auto 0; max-width:260px;"></svg>
        </div>
    </div>

    <p style="color:#6b7280; font-size:.9rem;">
        In Option A, 3 MU are sent to the other person and multiplied by 2, so the other
        person receives 6 MU and you keep 7 MU. In Option B, 5 MU are sent to the other
        person and multiplied by 2.5, so the other person receives 12.5 MU and you keep
        5 MU.
    </p>

</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    {{ next_button }}
</div>

<script>
const ENDOWMENT = {{ dictator_endowment }};

// Fixed example options matching the original instructions
const EX_LEFT  = { own_payoff: 7,   transfer: 3, multiplier: 2   };
const EX_RIGHT = { own_payoff: 5,   transfer: 5, multiplier: 2.5 };

window.addEventListener('DOMContentLoaded', function() {
    drawDictatorCard('ex-left-viz',  EX_LEFT,  ENDOWMENT);
    drawDictatorCard('ex-right-viz', EX_RIGHT, ENDOWMENT);
});

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';
    const MAX_R = 26, W = 260, H = 310;
    const 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;
        const th = Math.max(8, r * 0.55);
        const ry = Math.max(3, r * 0.37);
        const g  = mk('g', {transform: 'translate(' + cx + ',' + cy + ')'});
        g.appendChild(mk('ellipse', {cx:0, cy:th/2,  rx:r,           ry:ry,           fill:'#b8881a', stroke:'none'}));
        g.appendChild(mk('rect',    {x:-r, y:-th/2,  width:r*2,      height:th,       fill:'#b8881a', stroke:'none'}));
        g.appendChild(mk('ellipse', {cx:0, cy:-th/2, rx:r,           ry:ry,           fill:'#e8c86a', stroke:'none'}));
        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 * 0.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);
    }

    function drawArrow(cx, label, isMultiplier) {
        const mUrl = 'url(#' + svgId + '-arr)';
        const bw   = isMultiplier ? 44 : 64;
        svg.appendChild(mk('line', {x1:cx, y1:138, x2:cx, y2:150, stroke:'#666', 'stroke-width':'1.5'}));
        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,
            isMultiplier ? 11 : 10, isMultiplier ? '700' : '400', isMultiplier ? '#333' : '#555'));
        svg.appendChild(mk('line', {x1:cx, y1:169, x2:cx, y2:182,
            stroke:'#666', 'stroke-width':'1.5', 'marker-end':mUrl}));
    }

    const { own_payoff: ownPayoff, transfer, multiplier } = opt;
    const otherInitial = transfer, otherFinal = transfer * multiplier;

    if (ownPayoff    > 0) drawCoin(COL_YOU, 80,  ownPayoff);
    if (otherInitial > 0) drawCoin(COL_OTH, 80,  otherInitial);
    svg.appendChild(mkText(ownPayoff    + ' MU', COL_YOU, 120, 13, '700', '#333'));
    svg.appendChild(mkText(otherInitial + ' MU', COL_OTH, 120, 13, '700', '#333'));

    drawArrow(COL_YOU, 'you keep',              false);
    drawArrow(COL_OTH, '\u00d7 ' + multiplier, true);

    if (ownPayoff  > 0) drawCoin(COL_YOU, 215, ownPayoff);
    if (otherFinal > 0) drawCoin(COL_OTH, 215, otherFinal);
    svg.appendChild(mkText(ownPayoff  + ' MU', COL_YOU, 255, 13, '700', '#333'));
    svg.appendChild(mkText(otherFinal + ' MU', COL_OTH, 255, 13, '700', '#333'));
}
</script>

{{ endblock }}