{{ block title }}
    Political, Social Views and Personality
{{ endblock }}

{{ block content }}

{# ============================================================
   SCALE 1 — Individualism / Communitarianism
   ============================================================ #}
<h2 class="scale-heading">Part 1 — Political &amp; Social Views</h2>
<p class="scale-intro">
    Below are a number of statements about society and government.
    For each statement, please indicate how much you agree or disagree.
    There are no right or wrong answers.
</p>

{# Desktop matrix #}
<div class="matrix-wrap desktop-matrix">
    <table class="matrix-table">
        <thead>
            <tr>
                <th class="matrix-stub"></th>
                <th class="matrix-col-label">Strongly<br>disagree</th>
                <th class="matrix-col-label">Disagree</th>
                <th class="matrix-col-label">Do not agree<br>nor disagree</th>
                <th class="matrix-col-label">Agree</th>
                <th class="matrix-col-label">Strongly<br>agree</th>
            </tr>
        </thead>
        <tbody>
            {% for item in ic_items %}
            <tr class="matrix-row {{ item.row_class }}" id="row-{{ item.name }}">
                <td class="matrix-label">{{ item.label }}</td>
                {% for choice_value, choice_label in likert_choices %}
                <td class="matrix-cell">
                    <label class="matrix-hit">
                        <input
                            type="radio"
                            name="{{ item.name }}"
                            value="{{ choice_value }}"
                            class="matrix-radio"
                            aria-label="{{ choice_label }}"
                        >
                    </label>
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# Mobile accordion #}
<div class="mobile-matrix" id="mob-section-ic">
    {% for item in ic_items %}
    <div class="mob-item" id="mob-{{ item.name }}" data-name="{{ item.name }}">
        <button type="button" class="mob-header" id="hdr-{{ item.name }}">
            <span class="mob-q-number">{{ forloop.counter }}</span>
            <span class="mob-q-text">{{ item.label }}</span>
            <span class="mob-answer-badge" id="badge-{{ item.name }}"></span>
            <span class="mob-chevron">&#8964;</span>
        </button>
        <div class="mob-options" id="opts-{{ item.name }}" style="display:none;">
            {% for choice_value, choice_label in likert_choices %}
            <label class="mob-option-label" data-field="{{ item.name }}" data-value="{{ choice_value }}">
                <span class="mob-option-number">{{ choice_value }}</span>
                <span class="mob-option-text">{{ choice_label }}</span>
                <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="mob-radio-hidden">
                <span class="mob-checkmark">&#10003;</span>
            </label>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

{# ============================================================
   SCALE 2 — Big Five (TIPI)
   ============================================================ #}
<h2 class="scale-heading" style="margin-top: 2.5rem;">Part 2 — Personality</h2>
<p class="scale-intro">
    Below are a number of personality traits that may or may not apply to you.
    Please indicate the extent to which you agree or disagree with each statement.
    You should rate the extent to which the pair of traits applies to you,
    even if one characteristic applies more strongly than the other.
</p>

{# Desktop matrix #}
<div class="matrix-wrap desktop-matrix">
    <table class="matrix-table">
        <thead>
            <tr>
                <th class="matrix-stub"></th>
                <th class="matrix-col-label">Strongly<br>disagree</th>
                <th class="matrix-col-label">Disagree</th>
                <th class="matrix-col-label">Do not agree<br>nor disagree</th>
                <th class="matrix-col-label">Agree</th>
                <th class="matrix-col-label">Strongly<br>agree</th>
            </tr>
        </thead>
        <tbody>
            {% for item in big5_items %}
            <tr class="matrix-row {{ item.row_class }}" id="row-{{ item.name }}">
                <td class="matrix-label">{{ item.label }}</td>
                {% for choice_value, choice_label in likert_choices %}
                <td class="matrix-cell">
                    <label class="matrix-hit">
                        <input
                            type="radio"
                            name="{{ item.name }}"
                            value="{{ choice_value }}"
                            class="matrix-radio"
                            aria-label="{{ choice_label }}"
                        >
                    </label>
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# Mobile accordion #}
<div class="mobile-matrix" id="mob-section-big5">
    {% for item in big5_items %}
    <div class="mob-item" id="mob-{{ item.name }}" data-name="{{ item.name }}">
        <button type="button" class="mob-header" id="hdr-{{ item.name }}">
            <span class="mob-q-number">{{ forloop.counter }}</span>
            <span class="mob-q-text">{{ item.label }}</span>
            <span class="mob-answer-badge" id="badge-{{ item.name }}"></span>
            <span class="mob-chevron">&#8964;</span>
        </button>
        <div class="mob-options" id="opts-{{ item.name }}" style="display:none;">
            {% for choice_value, choice_label in likert_choices %}
            <label class="mob-option-label" data-field="{{ item.name }}" data-value="{{ choice_value }}">
                <span class="mob-option-number">{{ choice_value }}</span>
                <span class="mob-option-text">{{ choice_label }}</span>
                <input type="radio" name="{{ item.name }}" value="{{ choice_value }}" class="mob-radio-hidden">
                <span class="mob-checkmark">&#10003;</span>
            </label>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

{# ============================================================
   JavaScript
   ============================================================ #}
<script>
(function () {
    var BREAKPOINT = 640;

    var IC_FIELDS   = {{ ic_fields_order }};
    var BIG5_FIELDS = {{ big5_fields_order }};
    var ALL_FIELDS  = IC_FIELDS.concat(BIG5_FIELDS);

    function openPanel(name) {
        var opts = document.getElementById('opts-' + name);
        var hdr  = document.getElementById('hdr-'  + name);
        if (opts) opts.style.display = 'block';
        if (hdr)  hdr.classList.add('open');
    }

    function closePanel(name) {
        var opts = document.getElementById('opts-' + name);
        var hdr  = document.getElementById('hdr-'  + name);
        if (opts) opts.style.display = 'none';
        if (hdr)  hdr.classList.remove('open');
    }

    function openNext(fields, currentName) {
        var idx = fields.indexOf(currentName);
        if (idx >= 0 && idx < fields.length - 1) {
            openPanel(fields[idx + 1]);
        }
    }

    function initSection(fields, sectionId) {
        var section = document.getElementById('mob-section-' + sectionId);
        if (!section) return;

        if (window.innerWidth < BREAKPOINT) {
            openPanel(fields[0]);
        }

        fields.forEach(function (name) {
            var hdr = document.getElementById('hdr-' + name);
            if (!hdr) return;
            hdr.addEventListener('click', function () {
                var opts = document.getElementById('opts-' + name);
                if (opts.style.display === 'none') { openPanel(name); }
                else                               { closePanel(name); }
            });
        });

        var optionLabels = section.querySelectorAll('.mob-option-label');
        for (var i = 0; i < optionLabels.length; i++) {
            optionLabels[i].addEventListener('click', function () {
                var fieldName  = this.getAttribute('data-field');
                var value      = this.getAttribute('data-value');
                var choiceText = this.querySelector('.mob-option-text').textContent;

                var radio = this.querySelector('input[type="radio"]');
                if (radio) radio.checked = true;

                var desktopRadios = document.querySelectorAll(
                    'input[name="' + fieldName + '"].matrix-radio'
                );
                for (var j = 0; j < desktopRadios.length; j++) {
                    desktopRadios[j].checked = (desktopRadios[j].value === value);
                }

                var siblings = section.querySelectorAll(
                    '.mob-option-label[data-field="' + fieldName + '"]'
                );
                for (var k = 0; k < siblings.length; k++) {
                    siblings[k].classList.remove('selected');
                }
                this.classList.add('selected');

                var badge = document.getElementById('badge-' + fieldName);
                if (badge) badge.textContent = value + ' \u2013 ' + choiceText;

                closePanel(fieldName);
                openNext(fields, fieldName);
            });
        }

        fields.forEach(function (name) {
            var dRadios = document.querySelectorAll('input[name="' + name + '"].matrix-radio');
            for (var i = 0; i < dRadios.length; i++) {
                dRadios[i].addEventListener('change', function () {
                    var val   = this.value;
                    var fname = this.name;
                    var mobLbl = section.querySelector(
                        '.mob-option-label[data-field="' + fname + '"][data-value="' + val + '"]'
                    );
                    if (mobLbl) {
                        var mobRadio = mobLbl.querySelector('input');
                        if (mobRadio) mobRadio.checked = true;
                        mobLbl.click();
                    }
                });
            }
        });
    }

    initSection(IC_FIELDS,   'ic');
    initSection(BIG5_FIELDS, 'big5');

    ALL_FIELDS.forEach(function (name) {
        var radios = document.querySelectorAll('input[name="' + name + '"]');
        for (var i = 0; i < radios.length; i++) {
            radios[i].addEventListener('change', function () {
                var n    = this.name;
                var row  = document.getElementById('row-' + n);
                if (row)  row.classList.remove('row-error');
                var card = document.getElementById('mob-' + n);
                if (card) card.classList.remove('error');
            });
        }
    });

    document.querySelector('form').addEventListener('submit', function (e) {
        var isMobile = window.innerWidth < BREAKPOINT;
        var missing  = [];

        ALL_FIELDS.forEach(function (name) {
            var radios   = document.querySelectorAll('input[name="' + name + '"]');
            var answered = false;
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) { answered = true; break; }
            }
            if (!answered) {
                missing.push(name);
                if (isMobile) {
                    var card = document.getElementById('mob-' + name);
                    if (card) card.classList.add('error');
                    openPanel(name);
                } else {
                    var row = document.getElementById('row-' + name);
                    if (row) row.classList.add('row-error');
                }
            }
        });

        if (missing.length > 0) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
            alert('Please answer all statements before continuing.');
        }
    });

})();
</script>

<style>
.scale-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #0d6efd;
}

.scale-intro {
    color: #555;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.matrix-wrap { overflow-x: auto; margin-bottom: 2rem; }

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9rem;
}

.matrix-table thead tr { border-bottom: 2px solid #dee2e6; }

.matrix-stub {
    width: 45%;
    text-align: left;
    padding: 0.5rem 0.75rem 0.75rem;
    font-weight: 600;
    color: #343a40;
}

.matrix-col-label {
    text-align: center;
    padding: 0.5rem 0.25rem 0.75rem;
    font-weight: 600;
    color: #495057;
    font-size: 0.8rem;
    line-height: 1.3;
    width: calc(55% / 5);
}

.row-odd  { background: #ffffff; }
.row-even { background: #f8f9fa; }
.matrix-row:hover { background: #e8f4ff; }
.matrix-row.row-error td { background: #fff3f3; }
.matrix-row.row-error .matrix-label { color: #dc3545; }

.matrix-label {
    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
    vertical-align: middle;
    color: #212529;
    line-height: 1.45;
    border-bottom: 1px solid #e9ecef;
}

.matrix-cell {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    padding: 0;
}

.matrix-hit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

.matrix-radio {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: #0d6efd;
    pointer-events: none;
}

.mobile-matrix { display: none; margin-bottom: 2rem; }

.mob-item {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
    transition: border-color 0.15s;
}
.mob-item.error { border-color: #dc3545; }

.mob-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    background: #f8f9fa;
    border: none;
    padding: 0.85rem 1rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    color: #212529;
    line-height: 1.45;
    transition: background 0.15s;
}
.mob-header.open {
    background: #e8f4ff;
    border-bottom: 1px solid #dee2e6;
}

.mob-q-number {
    flex-shrink: 0;
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.05rem;
}

.mob-q-text { flex: 1; }

.mob-answer-badge {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #198754;
    font-weight: 600;
    text-align: right;
    max-width: 40%;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.mob-chevron {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #6c757d;
    transition: transform 0.2s;
}
.mob-header.open .mob-chevron { transform: rotate(180deg); }

.mob-options { background: #fff; }

.mob-option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.mob-option-label:last-child { border-bottom: none; }
.mob-option-label:active,
.mob-option-label:hover { background: #f0f7ff; }
.mob-option-label.selected { background: #e8f4ff; }

.mob-option-number {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #495057;
    transition: background 0.15s, border-color 0.15s;
}
.mob-option-label.selected .mob-option-number {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.mob-option-text { flex: 1; font-size: 0.9rem; color: #212529; }

.mob-checkmark {
    flex-shrink: 0;
    font-size: 1rem;
    color: #198754;
    opacity: 0;
    transition: opacity 0.15s;
}
.mob-option-label.selected .mob-checkmark { opacity: 1; }

.mob-radio-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .desktop-matrix { display: none; }
    .mobile-matrix  { display: block; }
}
</style>

{{ next_button }}

{{ endblock }}