{{ extends "global/Page.html" }}
{{ block title }}Task{{ endblock }}

{{ block content }}

<style>
    /* ── Task description ── */
    .task-card {
        background: #f8f9fa;
        border-left: 4px solid #4a90d9;
        border-radius: 6px;
        padding: 16px 20px;
        margin-bottom: 24px;
        font-size: 0.95em;
        line-height: 1.6;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .task-card strong { color: #2c5f9e; }

    /* ── Rating table ── */
    .scale-legend {
        display: flex;
        justify-content: space-between;
        font-size: 0.72em;
        color: #718096;
        padding: 0 0 6px 200px;
        margin-bottom: 2px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .table-wrapper {
        max-width: 800px;
        margin: 0 auto;
        overflow-x: auto;
    }

    .rating-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    .rating-table thead th {
        padding: 8px 4px;
        text-align: center;
        font-weight: 500;
        font-size: 11px;
        color: #718096;
        border-bottom: 1px solid #e2e8f0;
        line-height: 1.3;
    }
    .rating-table thead th.alloc-col {
        text-align: left;
        min-width: 200px;
        padding-left: 10px;
    }
    .rating-table tbody tr {
        border-bottom: 1px solid #f0f4f8;
        transition: background 0.1s;
    }
    .rating-table tbody tr:hover { background: #f7fafc; }
    .rating-table tbody tr:last-child { border-bottom: none; }
    .rating-table td {
        padding: 9px 4px;
        text-align: center;
        vertical-align: middle;
    }
    .rating-table td.alloc-label {
        text-align: left;
        padding-left: 10px;
        font-size: 12px;
        color: #2d3748;
        line-height: 1.5;
    }
    .alloc-badge {
        display: inline-block;
        background: #edf2f7;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 11px;
        color: #4a5568;
    }
    .done-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #48bb78;
        margin-left: 7px;
        vertical-align: middle;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .done-dot.visible { opacity: 1; }

    /* ── Radio buttons ── */
    .radio-cell { position: relative; }
    .radio-cell input[type="radio"] { display: none !important; }
    .radio-cell label {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        border: 1.5px solid #cbd5e0 !important;
        cursor: pointer;
        font-size: 11px !important;
        font-weight: 500;
        color: #718096 !important;
        background: #fff !important;
        transition: all 0.12s;
        margin: 0 !important;
        padding: 0 !important;
    }
    .radio-cell label:hover {
        border-color: #4a90d9 !important;
        color: #4a90d9 !important;
        background: #ebf4ff !important;
    }
    .radio-cell input[type="radio"]:checked + label {
        background: #4a90d9 !important;
        border-color: #4a90d9 !important;
        color: #ffffff !important;
    }
    .neutral-col {
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
    }

    /* ── Progress bar ── */
    .progress-wrap {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .progress-label { font-size: 12px; color: #718096; white-space: nowrap; }
    .progress-track {
        flex: 1;
        height: 5px;
        background: #e2e8f0;
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        width: 0%;
        background: #4a90d9;
        border-radius: 3px;
        transition: width 0.25s;
    }
</style>


<div class="task-card">
    <strong>📋 Social Norms Task</strong>
    Imagine that a person has been given <strong>$9</strong> and must decide how many dollars to keep for
    themselves and how many to give to a charitable organization. The initial allocation is <strong>$4.50</strong> each.
    For each possible allocation below, please rate how <em>socially appropriate</em> you think that
    choice would be, using the 7-point scale.
</div>

<div class="scale-legend">
    <span>Very inappropriate</span>
    <span>Neutral</span>
    <span>Very appropriate</span>
</div>

<div class="table-wrapper">
    <table class="rating-table">
        <thead>
            <tr>
                <th class="alloc-col">Allocation</th>
                <th title="Very socially inappropriate">1</th>
                <th title="Socially inappropriate">2</th>
                <th title="Somewhat socially inappropriate">3</th>
                <th class="neutral-col" title="Neither appropriate nor inappropriate">4</th>
                <th title="Somewhat socially appropriate">5</th>
                <th title="Socially appropriate">6</th>
                <th title="Very socially appropriate">7</th>
            </tr>
        </thead>
        <tbody>

            {{ for alloc in allocations }}
            <tr>
                <td class="alloc-label">
                    <span class="alloc-badge">Keep {{ alloc.keep }} &nbsp;·&nbsp; Give {{ alloc.give }}</span>
                    <span class="done-dot" id="dot-{{ alloc.field_name }}"></span>
                </td>
                {{ for v in "1234567" }}
                <td class="radio-cell {{ if v == '4' }}neutral-col{{ endif }}">
                    <input type="radio"
                           name="{{ alloc.field_name }}"
                           id="{{ alloc.field_name }}_{{ v }}"
                           value="{{ v }}"
                           required>
                    <label for="{{ alloc.field_name }}_{{ v }}">{{ v }}</label>
                </td>
                {{ endfor }}
            </tr>
            {{ endfor }}

        </tbody>
    </table>
</div>

<div class="progress-wrap">
    <span class="progress-label" id="progress-label">0 / 10 answered</span>
    <div class="progress-track">
        <div class="progress-fill" id="progress-fill"></div>
    </div>
</div>


<script>
(function () {
    const total   = 10;
    const fillEl  = document.getElementById('progress-fill');
    const labelEl = document.getElementById('progress-label');

    function updateProgress() {
        let answered = 0;
        for (let i = 0; i <= 9; i++) {
            const name = 'appropriateness_' + i;
            if (document.querySelector('input[name="' + name + '"]:checked')) {
                answered++;
                const dot = document.getElementById('dot-appropriateness_' + i);
                if (dot) dot.classList.add('visible');
            }
        }
        const pct = Math.round(answered / total * 100);
        fillEl.style.width  = pct + '%';
        labelEl.textContent = answered + ' / ' + total + ' answered';
    }

    document.addEventListener('change', function (e) {
        if (e.target && e.target.type === 'radio') updateProgress();
    });
})();
</script>

{{ endblock }}