{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268;
        --primary-medium: #005f9b;
        --primary-light: #0091c8;
        --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a;
        --neutral-lightest: #ececed;
    }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--neutral-lightest);
        color: var(--neutral-dark); line-height: 1.6;
    }
    .header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white; padding: 20px 25px; border-radius: 8px;
        margin-bottom: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .header h1 { margin: 0 0 4px 0; font-size: 22px; font-weight: 600; }

    .card {
        background: white; border-radius: 8px; padding: 30px;
        margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        border-left: 4px solid var(--primary-light);
    }
    .info-box {
        background-color: #eaf4fb; border-left: 4px solid var(--primary-medium);
        padding: 13px 16px; border-radius: 4px;
        margin-bottom: 24px; font-size: 14px;
    }
    .duration-note {
        background-color: #e8f4eb; border-left: 4px solid #2e7d40;
        padding: 10px 16px; border-radius: 4px;
        margin-bottom: 24px; font-size: 13px;
    }
    .duration-note strong { color: #2e7d40; }
    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 16px; font-size: 17px;
    }
    .week-label {
        font-size: 13px; font-weight: 700; color: var(--primary-medium);
        text-transform: uppercase; letter-spacing: 0.5px;
        margin: 24px 0 12px 0;
    }
    .week-label:first-of-type { margin-top: 0; }
    .day-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        align-items: start;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--neutral-lightest);
    }
    .day-row:last-child { border-bottom: none; }
    .day-name {
        font-weight: 600; font-size: 14px;
        color: var(--primary-dark); padding-top: 4px;
    }
    .day-date {
        font-size: 12px; font-weight: 400; color: #888;
        display: block; margin-top: 2px;
    }
    .slots-row {
        display: flex; flex-wrap: wrap; gap: 8px;
    }
    .slot-label {
        display: flex; align-items: center; gap: 7px;
        padding: 7px 12px;
        background: var(--neutral-lightest);
        border: 2px solid transparent;
        border-radius: 6px; cursor: pointer;
        font-size: 13px; font-weight: 500;
        color: var(--neutral-dark);
        transition: all 0.15s ease;
        user-select: none;
    }
    .slot-label:hover {
        border-color: var(--primary-lighter);
        background: #eaf4fb;
    }
    .slot-label input[type="checkbox"] {
        width: 16px; height: 16px;
        accent-color: var(--primary-medium);
        cursor: pointer; flex-shrink: 0;
    }
    .slot-label:has(input:checked) {
        border-color: var(--primary-medium);
        background: #eaf4fb;
        color: var(--primary-dark);
        font-weight: 600;
    }
    .select-all-row {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 16px;
    }
    .select-all-btn {
        font-size: 12px; color: var(--primary-medium);
        cursor: pointer; text-decoration: underline;
        border: none; background: none; padding: 0;
    }
    .select-all-btn:hover { color: var(--primary-dark); }
    .counter-box {
        background: var(--neutral-lightest); border-radius: 6px;
        padding: 10px 16px; font-size: 13px; color: #555;
        margin-top: 20px; text-align: center;
    }
    .counter-box strong { color: var(--primary-dark); }
    .hidden-field { display: none; }
    .button-section { text-align: center; margin-top: 32px; }
    .otree-btn-next {
        background-color: var(--primary-medium) !important; border: none !important;
        color: white !important; padding: 12px 30px !important; border-radius: 6px !important;
        font-size: 16px !important; font-weight: 500 !important; cursor: pointer !important;
        transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    .otree-btn-next:hover {
        background-color: var(--primary-dark) !important; transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }
    @media (max-width: 600px) {
        .day-row { grid-template-columns: 1fr; gap: 6px; }
    }
</style>

<div class="header">
    <h1>
        {% if participant.language == 'en' %}Background Questions{% else %}Hintergrundfragen{% endif %}
    </h1>
</div>


<div class="card">
    <h2>{% if participant.language == 'en' %}Availability{% else %}Verfügbarkeit{% endif %}</h2>
    <div class="info-box">
        {% if participant.language == 'en' %}
            📅 Please tick <strong>all time slots</strong> at which you would be available
            to attend the laboratory session. Select as many as possible — this helps us
            find a date that works for everyone. We will confirm your assigned session
            date by e-mail.
        {% else %}
            📅 Bitte markieren Sie <strong>alle Zeitfenster</strong>, zu denen Sie für die
            Laborsitzung verfügbar wären. Wählen Sie so viele wie möglich — das hilft uns,
            einen passenden Termin für alle zu finden. Bitte bedenken Sie, dass wir die <b>Vergütung
            für die Vorbefragung nur vollständig ausbezahlen können, wenn Sie an der Laborsitzung
            teilnehmen</b>. Wir bestätigen Ihren Termin per E-Mail.
        {% endif %}
    </div>

    <div class="duration-note">
        {% if participant.language == 'en' %}
            <strong>⏱ Duration:</strong> The laboratory experiment will take
            <strong>no more than 60 minutes</strong>.
        {% else %}
            <strong>⏱ Dauer:</strong> Das Laborexperiment dauert
            <strong>nicht länger als 60 Minuten</strong>.
        {% endif %}
    </div>

    <!-- Hidden oTree field -->
    <div class="hidden-field">{% formfields %}</div>

    <div class="select-all-row">
        <button type="button" class="select-all-btn" onclick="selectAll()">
            {% if participant.language == 'en' %}Select all{% else %}Alle auswählen{% endif %}
        </button>
        &nbsp;·&nbsp;
        <button type="button" class="select-all-btn" onclick="deselectAll()">
            {% if participant.language == 'en' %}Deselect all{% else %}Alle abwählen{% endif %}
        </button>
    </div>

    {% comment %}Slots: 08:00, 09:30, 11:00, 12:30, 14:00, 15:30, 17:00, 18:30, 20:00{% endcomment %}

    <!-- Week 1 -->
    <div class="week-label">
        {% if participant.language == 'en' %}Week 1: 11–17 May 2025{% else %}Woche 1: 11.–17. Mai 2025{% endif %}
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Monday{% else %}Montag{% endif %}<span class="day-date">11.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Mon11-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon11-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Tuesday{% else %}Dienstag{% endif %}<span class="day-date">12.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Tue12-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue12-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Wednesday{% else %}Mittwoch{% endif %}<span class="day-date">13.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Wed13-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed13-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Thursday{% else %}Donnerstag{% endif %}<span class="day-date">14.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Thu14-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu14-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Friday{% else %}Freitag{% endif %}<span class="day-date">15.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Fri15-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Fri15-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Fri15-1100" onchange="updateField()"> 11:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Saturday{% else %}Samstag{% endif %}<span class="day-date">16.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Sat16-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat16-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Sunday{% else %}Sonntag{% endif %}<span class="day-date">17.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Sun17-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun17-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <!-- Week 2 -->
    <div class="week-label" style="margin-top: 28px;">
        {% if participant.language == 'en' %}Week 2: 18–24 May 2025{% else %}Woche 2: 18.–24. Mai 2025{% endif %}
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Monday{% else %}Montag{% endif %}<span class="day-date">18.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Mon18-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Mon18-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Tuesday{% else %}Dienstag{% endif %}<span class="day-date">19.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Tue19-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Tue19-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Wednesday{% else %}Mittwoch{% endif %}<span class="day-date">20.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Wed20-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Wed20-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Thursday{% else %}Donnerstag{% endif %}<span class="day-date">21.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Thu21-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Thu21-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Friday{% else %}Freitag{% endif %}<span class="day-date">22.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Fri22-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Fri22-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Fri22-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Fri22-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Fri22-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Fri22-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Saturday{% else %}Samstag{% endif %}<span class="day-date">23.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Sat23-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Sat23-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <div class="day-row">
        <div class="day-name">{% if participant.language == 'en' %}Sunday{% else %}Sonntag{% endif %}<span class="day-date">24.05.</span></div>
        <div class="slots-row">
            <label class="slot-label"><input type="checkbox" value="Sun24-0800" onchange="updateField()"> 08:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-0930" onchange="updateField()"> 09:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1100" onchange="updateField()"> 11:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1230" onchange="updateField()"> 12:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1400" onchange="updateField()"> 14:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1530" onchange="updateField()"> 15:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1700" onchange="updateField()"> 17:00</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-1830" onchange="updateField()"> 18:30</label>
            <label class="slot-label"><input type="checkbox" value="Sun24-2000" onchange="updateField()"> 20:00</label>
        </div>
    </div>

    <!-- Language preference -->
    <div style="margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--neutral-lightest);">
        <h2>{% if participant.language == 'en' %}Session Language Preference{% else %}Sprachpräferenz für die Sitzung{% endif %}</h2>
        <p style="font-size: 14px; color: #555; margin-bottom: 16px;">
            {% if participant.language == 'en' %}
                Our laboratory sessions are conducted in either German or English.
                Please indicate your preference so we can assign you to a suitable session.
            {% else %}
                Unsere Laborsitzungen werden entweder auf Deutsch oder auf Englisch durchgeführt.
                Bitte geben Sie Ihre Präferenz an, damit wir Sie einer passenden Sitzung zuweisen können.
            {% endif %}
        </p>

        <!-- Hide default oTree rendering -->
        <div style="position: absolute; opacity: 0; pointer-events: none; height: 0; overflow: hidden;">
            {% formfield player.language_preference %}
        </div>

        <div class="option-list" style="display: flex; flex-direction: column; gap: 10px;">

            <label class="slot-label" id="lang-card-both_ok" style="border-radius: 8px; padding: 14px 16px; border: 2px solid #dee2e6; cursor: pointer;" onclick="selectLang('both_ok')">
                <input type="radio" name="lang-visual" id="lang-radio-both_ok" style="width:18px;height:18px;accent-color:var(--primary-medium);">
                <span style="font-size:14px; font-weight:500;">
                    {% if participant.language == 'en' %}
                        🌍 Both languages are equally fine for me.
                    {% else %}
                        🌍 Beide Sprachen sind mir gleich recht.
                    {% endif %}
                </span>
            </label>

            <label class="slot-label" id="lang-card-prefer_en" style="border-radius: 8px; padding: 14px 16px; border: 2px solid #dee2e6; cursor: pointer;" onclick="selectLang('prefer_en')">
                <input type="radio" name="lang-visual" id="lang-radio-prefer_en" style="width:18px;height:18px;accent-color:var(--primary-medium);">
                <span style="font-size:14px; font-weight:500;">
                    {% if participant.language == 'en' %}
                        🇬🇧 I prefer English, but German is also fine.
                    {% else %}
                        🇬🇧 Ich bevorzuge Englisch, Deutsch ist aber auch in Ordnung.
                    {% endif %}
                </span>
            </label>

            <label class="slot-label" id="lang-card-prefer_de" style="border-radius: 8px; padding: 14px 16px; border: 2px solid #dee2e6; cursor: pointer;" onclick="selectLang('prefer_de')">
                <input type="radio" name="lang-visual" id="lang-radio-prefer_de" style="width:18px;height:18px;accent-color:var(--primary-medium);">
                <span style="font-size:14px; font-weight:500;">
                    {% if participant.language == 'en' %}
                        🇩🇪 I prefer German, but English is also fine.
                    {% else %}
                        🇩🇪 Ich bevorzuge Deutsch, Englisch ist aber auch in Ordnung.
                    {% endif %}
                </span>
            </label>

            <label class="slot-label" id="lang-card-only_en" style="border-radius: 8px; padding: 14px 16px; border: 2px solid #dee2e6; cursor: pointer;" onclick="selectLang('only_en')">
                <input type="radio" name="lang-visual" id="lang-radio-only_en" style="width:18px;height:18px;accent-color:var(--primary-medium);">
                <span style="font-size:14px; font-weight:500;">
                    {% if participant.language == 'en' %}
                        🇬🇧 I would like to participate in an English-only session.
                    {% else %}
                        🇬🇧 Ich möchte ausschließlich an einer englischsprachigen Sitzung teilnehmen.
                    {% endif %}
                </span>
            </label>

            <label class="slot-label" id="lang-card-only_de" style="border-radius: 8px; padding: 14px 16px; border: 2px solid #dee2e6; cursor: pointer;" onclick="selectLang('only_de')">
                <input type="radio" name="lang-visual" id="lang-radio-only_de" style="width:18px;height:18px;accent-color:var(--primary-medium);">
                <span style="font-size:14px; font-weight:500;">
                    {% if participant.language == 'en' %}
                        🇩🇪 I would like to participate in a German-only session.
                    {% else %}
                        🇩🇪 Ich möchte ausschließlich an einer deutschsprachigen Sitzung teilnehmen.
                    {% endif %}
                </span>
            </label>

        </div>
    </div>

    <div class="counter-box" id="counter">
        {% if participant.language == 'en' %}No time slots selected yet.{% else %}Noch keine Zeitfenster ausgewählt.{% endif %}
    </div>

</div>

<div class="button-section">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>

<script>
    const lang = "{{ participant.language }}";
    const langValues = ['both_ok', 'prefer_en', 'prefer_de', 'only_en', 'only_de'];

    function getChecked() {
        return Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
                    .map(cb => cb.value);
    }

    function updateField() {
        const selected = getChecked();
        const field = document.querySelector('input[name="availability"], textarea[name="availability"]');
        if (field) field.value = selected.join(',');
        const counter = document.getElementById('counter');
        if (selected.length === 0) {
            counter.innerHTML = lang === 'en'
                ? 'No time slots selected yet.'
                : 'Noch keine Zeitfenster ausgewählt.';
        } else {
            counter.innerHTML = lang === 'en'
                ? `<strong>${selected.length}</strong> time slot${selected.length > 1 ? 's' : ''} selected.`
                : `<strong>${selected.length}</strong> Zeitfenster ausgewählt.`;
        }
    }

    function selectAll() {
        document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
        updateField();
    }

    function deselectAll() {
        document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
        updateField();
    }

    document.addEventListener('DOMContentLoaded', function() {
        const field = document.querySelector('input[name="availability"], textarea[name="availability"]');
        if (field && field.value) {
            const saved = field.value.split(',');
            document.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
                if (saved.includes(cb.value)) cb.checked = true;
            });
        }
        updateField();
    });

    function selectLang(value) {
        // Sync to hidden oTree field
        document.querySelectorAll('input[name="language_preference"]').forEach(function(r) {
            r.checked = (r.value === value);
        });
        // Update visual cards
        langValues.forEach(function(v) {
            const card  = document.getElementById('lang-card-' + v);
            const radio = document.getElementById('lang-radio-' + v);
            if (card) card.style.borderColor  = (v === value) ? 'var(--primary-medium)' : '#dee2e6';
            if (card) card.style.background   = (v === value) ? '#eaf4fb' : '';
            if (radio) radio.checked = (v === value);
        });
    }

    // Restore on reload
    document.addEventListener('DOMContentLoaded', function() {
        // ... existing DOMContentLoaded code ...
        const checkedLang = document.querySelector('input[name="language_preference"]:checked');
        if (checkedLang) selectLang(checkedLang.value);
    });


</script>

{% endblock %}