{{ block title }}
    Social-Demographic Questionnaire
{{ endblock }}

{{ block content }}

<p class="dem-intro">
    This is the last part of our experiment.
    Please answer the following questions.
</p>

{# ============================================================
   DESKTOP: individual cards, one per question
   ============================================================ #}
<div class="desktop-cards">
    {% for item in items %}
    <div class="dem-card" id="card-{{ item.name }}">

        <p class="dem-card-label">
            <span class="dem-q-number">{{ forloop.counter }}</span>
            {{ item.label }}
        </p>

        <div class="dem-options-wrap">
            {% for choice_value, choice_label in item.choices %}
            <label class="dem-card-option">
                <input
                    type="radio"
                    name="{{ item.name }}"
                    value="{{ choice_value }}"
                    class="dem-card-radio"
                    aria-label="{{ choice_label }}"
                >
                <span class="dem-card-circle"></span>
                <span class="dem-card-text">{{ choice_label }}</span>
            </label>
            {% endfor %}
        </div>

    </div>
    {% endfor %}
</div>

{# ============================================================
   MOBILE: accordion, one panel per question
   ============================================================ #}
<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 item.choices %}
            <label
                class="mob-option-label"
                data-field="{{ item.name }}"
                data-value="{{ choice_value }}"
                data-label="{{ choice_label }}"
            >
                <span class="mob-option-pip"></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;

    /* ============================================================
       Desktop card selection
       ============================================================ */
    var desktopOptions = document.querySelectorAll('.dem-card-option');
    for (var i = 0; i < desktopOptions.length; i++) {
        desktopOptions[i].addEventListener('click', function () {
            var radio = this.querySelector('input[type="radio"]');
            if (!radio) return;

            /* Check the radio */
            radio.checked = true;

            /* Remove selected from all options in the same card */
            var fname    = radio.name;
            var siblings = document.querySelectorAll(
                '.dem-card-option input[name="' + fname + '"]'
            );
            for (var s = 0; s < siblings.length; s++) {
                siblings[s].closest('.dem-card-option').classList.remove('selected');
            }

            /* Add selected to clicked option */
            this.classList.add('selected');

            /* Clear card error highlight */
            var card = document.getElementById('card-' + fname);
            if (card) card.classList.remove('card-error');

            /* Sync to mobile */
            var val    = radio.value;
            var mobOpt = document.querySelector(
                '.mob-option-label[data-field="' + fname + '"][data-value="' + val + '"]'
            );
            if (mobOpt) {
                var hiddenRadio = mobOpt.querySelector('input[type="radio"]');
                if (hiddenRadio) hiddenRadio.checked = true;
                var mobSiblings = document.querySelectorAll(
                    '.mob-option-label[data-field="' + fname + '"]'
                );
                for (var ms = 0; ms < mobSiblings.length; ms++) {
                    mobSiblings[ms].classList.remove('selected');
                }
                mobOpt.classList.add('selected');
                var badge = document.getElementById('badge-' + fname);
                if (badge) badge.textContent = mobOpt.getAttribute('data-label');
            }
        });
    }

    /* ============================================================
       Mobile accordion helpers
       ============================================================ */
    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(currentName) {
        var idx = FIELDS.indexOf(currentName);
        if (idx >= 0 && idx < FIELDS.length - 1) {
            openPanel(FIELDS[idx + 1]);
        }
    }

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

    /* Header toggle */
    for (var fi = 0; fi < FIELDS.length; fi++) {
        (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);
                }
            });
        })(FIELDS[fi]);
    }

    /* Mobile option click */
    var optionLabels = document.querySelectorAll('.mob-option-label');
    for (var oi = 0; oi < optionLabels.length; oi++) {
        optionLabels[oi].addEventListener('click', function () {
            var fieldName   = this.getAttribute('data-field');
            var value       = this.getAttribute('data-value');
            var choiceLabel = this.getAttribute('data-label');

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

            /* Sync desktop */
            var desktopRadios = document.querySelectorAll(
                'input[name="' + fieldName + '"].dem-card-radio'
            );
            for (var j = 0; j < desktopRadios.length; j++) {
                var isMatch = (desktopRadios[j].value === value);
                desktopRadios[j].checked = isMatch;
                var opt = desktopRadios[j].closest('.dem-card-option');
                if (opt) {
                    if (isMatch) {
                        opt.classList.add('selected');
                    } else {
                        opt.classList.remove('selected');
                    }
                }
            }

            /* Highlight mobile option */
            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');

            /* Badge */
            var badge = document.getElementById('badge-' + fieldName);
            if (badge) badge.textContent = choiceLabel;

            closePanel(fieldName);
            openNext(fieldName);
        });
    }

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

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

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

})();
</script>

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

/* ============================================================
   Desktop: individual cards
   ============================================================ */
.desktop-cards {
    margin-bottom: 2rem;
}

.dem-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    transition: border-color 0.15s;
}

.dem-card.card-error {
    border-color: #dc3545;
    background: #fff3f3;
}

.dem-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.85rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

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

.dem-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-left: 2.1rem;
}

.dem-card-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
    user-select: none;
}

.dem-card-option:hover {
    background: #f0f7ff;
    border-color: #cfe2ff;
}

.dem-card-option.selected {
    background: #e8f4ff;
    border-color: #93c5fd;
}

/* Hidden actual radio — selection driven by JS */
.dem-card-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.dem-card-circle {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

.dem-card-option.selected .dem-card-circle {
    border-color: #0d6efd;
    background: #0d6efd;
    box-shadow: inset 0 0 0 3px #fff;
}

.dem-card-text {
    font-size: 0.9rem;
    color: #343a40;
    line-height: 1.4;
}

/* ============================================================
   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: 45%;
    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-pip {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #ced4da;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

.mob-option-label.selected .mob-option-pip {
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: inset 0 0 0 3px #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;
}

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

{{ next_button }}

{{ endblock }}