{{ block title }}Similarity to Others{{ endblock }}

{{ block content }}
<div class="exp-card">
    <p>Before you continue to the next part of the study, we would like to ask you one
    question about how you see yourself in relation to the people in the earlier group.</p>

    <p style="margin-top:16px;">Below you see a series of diagrams showing two circles —
    one labelled <strong>Self</strong> and one labelled <strong>Earlier Group</strong> —
    that overlap to different degrees. Please select the diagram that best represents how
    similar you perceive the people in the earlier group to be to yourself.</p>

    <p style="color:#6b7280; font-size:.9rem; margin-top:6px;">
        Complete separation indicates that you think the others are not at all similar
        to you; near-complete overlap indicates that you think the others are extremely
        similar to you.
    </p>

    <div id="ios-container" style="margin-top:28px;">
        <div style="display:flex; flex-wrap:wrap; gap:16px; justify-content:center;">
        </div>
    </div>

    <!-- Hidden oTree field -->
    <input type="hidden" name="ios_scale" id="ios-field" value="">
    <div style="display:none">{{ formfield_errors 'ios_scale' }}</div>

    <p id="ios-error" style="color:#c0392b; font-size:.9rem; margin-top:12px; display:none;">
        ⚠ Please select one of the diagrams before continuing.
    </p>
</div>

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

<style>
.ios-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 8px;
    border: 2px solid #ddd8ce;
    transition: border-color .15s, background .15s;
    user-select: none;
    width: 220px;
}
.ios-option:hover { border-color: #2a6e7c; background: #e8f4f7; }
.ios-option.selected { border-color: #2a6e7c; background: #e8f4f7; }
.ios-label {
    font-size: .8rem;
    color: #6b7280;
    margin-top: 8px;
    text-align: center;
}
</style>

<script>
const IOS_CONFIGS = [
    { value: 1, overlap: 0.00, label: '1' },
    { value: 2, overlap: 0.15, label: '2' },
    { value: 3, overlap: 0.30, label: '3' },
    { value: 4, overlap: 0.45, label: '4' },
    { value: 5, overlap: 0.60, label: '5' },
    { value: 6, overlap: 0.75, label: '6' },
    { value: 7, overlap: 0.88, label: '7' },
];

const R   = 52;   // circle radius
const PAD = 6;    // padding so circles don't clip at SVG edge
const W   = (R * 2 + PAD) * 2 + 20;  // wide enough for two non-overlapping circles + gap
const H   = (R + PAD) * 2;
const CY  = H / 2;

function buildSVG(overlap) {
    const minDist = R * 0.18;
    const maxDist = R * 2.0;
    const dist = maxDist - overlap * (maxDist - minDist);
    const cx1 = W / 2 - dist / 2;
    const cx2 = W / 2 + dist / 2;

    const ns = 'http://www.w3.org/2000/svg';
    const svg = document.createElementNS(ns, 'svg');
    svg.setAttribute('width', '100%');
    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');

    function circle(cx, fill, label) {
        const c = document.createElementNS(ns, 'circle');
        c.setAttribute('cx', cx); c.setAttribute('cy', CY);
        c.setAttribute('r', R);
        c.setAttribute('fill', fill);
        c.setAttribute('fill-opacity', '0.45');
        c.setAttribute('stroke', fill === '#2a6e7c' ? '#1a4f5a' : '#7c5cbf');
        c.setAttribute('stroke-width', '1.5');
        svg.appendChild(c);

        const t = document.createElementNS(ns, 'text');
        t.setAttribute('x', cx); t.setAttribute('y', CY);
        t.setAttribute('text-anchor', 'middle');
        t.setAttribute('dominant-baseline', 'central');
        t.setAttribute('font-size', '12');
        t.setAttribute('font-family', 'Arial, sans-serif');
        t.setAttribute('fill', '#1e2228');
        t.setAttribute('font-weight', '600');
        t.textContent = label;
        svg.appendChild(t);
    }

    circle(cx1, '#2a6e7c', 'Self');
    circle(cx2, '#7c5cbf', 'Earlier\nGroup');

    // Replace last text with two-line tspan version
    const texts = svg.querySelectorAll('text');
    const lastText = texts[texts.length - 1];
    lastText.textContent = '';
    const ts1 = document.createElementNS(ns, 'tspan');
    ts1.setAttribute('x', cx2); ts1.setAttribute('dy', '-5');
    ts1.textContent = 'Earlier';
    const ts2 = document.createElementNS(ns, 'tspan');
    ts2.setAttribute('x', cx2); ts2.setAttribute('dy', '11');
    ts2.textContent = 'Group';
    lastText.appendChild(ts1);
    lastText.appendChild(ts2);

    return svg;
}

let selected = null;

function renderOptions() {
    const wrap = document.querySelector('#ios-container > div');
    IOS_CONFIGS.forEach(cfg => {
        const div = document.createElement('div');
        div.className = 'ios-option';
        div.dataset.value = cfg.value;
        div.appendChild(buildSVG(cfg.overlap));
        const lbl = document.createElement('div');
        lbl.className = 'ios-label';
        lbl.textContent = cfg.label;
        div.appendChild(lbl);
        div.addEventListener('click', () => selectOption(cfg.value, div));
        wrap.appendChild(div);
    });
}

function selectOption(value, el) {
    document.querySelectorAll('.ios-option').forEach(d => d.classList.remove('selected'));
    el.classList.add('selected');
    selected = value;
    document.getElementById('ios-field').value = value;
    document.getElementById('ios-error').style.display = 'none';
}

function submitIOS() {
    if (!selected) {
        document.getElementById('ios-error').style.display = '';
        return;
    }
    const form = document.querySelector('form');
    if (form) form.submit();
}

window.addEventListener('DOMContentLoaded', renderOptions);
</script>

{{ endblock }}