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

{{ block content }}

<p class="ic-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 table
   ============================================================ #}
<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">Somewhat<br>disagree</th>
                <th class="matrix-col-label">Somewhat<br>agree</th>
                <th class="matrix-col-label">Agree</th>
                <th class="matrix-col-label">Strongly<br>agree</th>
            </tr>
        </thead>
        <tbody>
            {% for item in 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-style dropdowns
   ============================================================ #}
<div class="mobile-matrix">
    {% for item in 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>

<script>
(function () {
    var FIELDS = {{ fields_order }};
    var BREAKPOINT = 640;

    /* ---- Mobile accordion logic ---- */
    function openPanel(name) {
        var opts = document.getElementById('opts-' + name);
        var hdr  = document.getElementById('hdr-' + name);
        if (!opts) return;
        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) return;
        opts.style.display = 'none';
        if (hdr) hdr.classList.remove('open');
    }

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

    /* Open first panel on load (mobile only) */
    function initMobile() {
        if (window.innerWidth < BREAKPOINT) {
            openPanel(FIELDS[0]);
        }
    }

    /* Header click: toggle current panel */
    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);
            }
        });
    });

    /* Option click: record answer, update badge, open next */
    var optionLabels = document.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;

            /* Check the hidden radio */
            var radio = this.querySelector('input[type="radio"]');
            if (radio) radio.checked = true;

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

            /* Mark all options in this panel: highlight selected */
            var siblings = document.querySelectorAll(
                '.mob-option-label[data-field="' + fieldName + '"]'
            );
            for (var k = 0; k < siblings.length; k++) {
                siblings[k].classList.remove('selected');
            }
            this.classList.add('selected');

            /* Update answer badge on header */
            var badge = document.getElementById('badge-' + fieldName);
            if (badge) badge.textContent = value + ' – ' + choiceText;

            /* Close current, open next */
            closePanel(fieldName);
            openNext(fieldName);
        });
    }

    /* Sync desktop radio → mobile (in case of page reload) */
    FIELDS.forEach(function (name) {
        var desktopRadios = document.querySelectorAll('input[name="' + name + '"].matrix-radio');
        for (var i = 0; i < desktopRadios.length; i++) {
            desktopRadios[i].addEventListener('change', function () {
                var val = this.value;
                var fname = this.name;
                var mobRadio = document.querySelector(
                    '.mob-option-label[data-field="' + fname + '"][data-value="' + val + '"] input'
                );
                if (mobRadio) {
                    mobRadio.checked = true;
                    mobRadio.closest('.mob-option-label').click();
                }
            });
        }
    });

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

        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.');
        }
    });

    /* Clear error state on answer */
    var allRadios = document.querySelectorAll('input[type="radio"]');
    for (var i = 0; i < allRadios.length; i++) {
        allRadios[i].addEventListener('change', function () {
            var name = this.name;
            var row  = document.getElementById('row-' + name);
            if (row) row.classList.remove('row-error');
            var card = document.getElementById('mob-' + name);
            if (card) card.classList.remove('error');
        });
    }

    initMobile();
})();
</script>

<style>
/* ============================================================
   Shared
   ============================================================ */
.ic-intro {
    color: #555;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================================
   Desktop matrix
   ============================================================ */
.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: 42%;
    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(58% / 6);
}

.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;
}

/* Large clickable hit area — the label fills the entire cell */
.matrix-hit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 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; /* clicks handled by the label */
}

/* ============================================================
   Mobile accordion
   ============================================================ */
.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;
    margin-top: -0.1rem;
}

.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;
}

/* The actual radio is hidden — selection is handled visually */
.mob-radio-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

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

{{ next_button }}

{{ endblock }}