{% 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: 34px;
        margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        border-left: 4px solid var(--primary-light);
    }
    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 14px; font-size: 17px;
    }
    .question-text {
        font-size: 17px; font-weight: 600; color: var(--primary-dark); margin: 0 0 10px 0;
    }
    .question-instruction {
        font-size: 14px; color: #666; font-style: italic; margin-bottom: 24px;
    }

    /* Option cards */
    .option-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
    .option-card {
        display: flex; align-items: flex-start; gap: 14px;
        border: 2px solid #dee2e6; border-radius: 8px; padding: 16px 20px;
        cursor: pointer; transition: all 0.2s ease; background: white;
    }
    .option-card:hover { border-color: var(--primary-lighter); background: #eaf4fb; }
    .option-card.selected { border-color: var(--primary-medium); background: #eaf4fb; }
    .option-card input[type="radio"] {
        -webkit-appearance: none; appearance: none;
        width: 22px; height: 22px; min-width: 22px;
        border: 2px solid #dee2e6; border-radius: 50%;
        cursor: pointer; transition: all 0.2s ease; position: relative;
        margin-top: 2px;
    }
    .option-card input[type="radio"]:checked {
        background-color: var(--primary-medium); border-color: var(--primary-medium);
    }
    .option-card input[type="radio"]:checked::after {
        content: ''; width: 8px; height: 8px; border-radius: 50%;
        background-color: white; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    .option-text { font-size: 15px; font-weight: 500; color: var(--neutral-dark); line-height: 1.5; }

    .button-section { text-align: center; margin-top: 40px; }
    .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;
    }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Trust Question{% else %}Vertrauensfrage{% endif %}</h2>
    <p class="question-text">
        {% if participant.language == 'en' %}
            Which of the following statements best describes your view of other people?
        {% else %}
            Welche der folgenden Aussagen beschreibt Ihre Sichtweise auf andere Menschen am besten?
        {% endif %}
    </p>
    <p class="question-instruction">
        {% if participant.language == 'en' %}
            Please select one of the two options below.
        {% else %}
            Bitte wählen Sie eine der beiden Optionen aus.
        {% endif %}
    </p>

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

    <div class="option-list">
        <label class="option-card" id="card-trust" onclick="selectOption('trust')">
            <input type="radio" name="trust-visual" id="radio-trust">
            <span class="option-text">
                {% if participant.language == 'en' %}
                    Most people can be trusted.
                {% else %}
                    Man kann den meisten Menschen vertrauen.
                {% endif %}
            </span>
        </label>
        <label class="option-card" id="card-caution" onclick="selectOption('caution')">
            <input type="radio" name="trust-visual" id="radio-caution">
            <span class="option-text">
                {% if participant.language == 'en' %}
                    One can never be too careful when dealing with other people.
                {% else %}
                    Man kann im Umgang mit anderen Menschen nicht vorsichtig genug sein.
                {% endif %}
            </span>
        </label>
    </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>
    function selectOption(value) {
        // Sync to hidden oTree field
        const hiddenRadios = document.querySelectorAll('input[name="trust"]');
        hiddenRadios.forEach(function(r) {
            r.checked = (r.value === value);
        });

        // Update visual cards
        document.getElementById('card-trust').className   = 'option-card' + (value === 'trust'   ? ' selected' : '');
        document.getElementById('card-caution').className = 'option-card' + (value === 'caution' ? ' selected' : '');
        document.getElementById('radio-trust').checked    = (value === 'trust');
        document.getElementById('radio-caution').checked  = (value === 'caution');
    }

    // Restore selection on page load if already answered
    document.addEventListener('DOMContentLoaded', function() {
        const checked = document.querySelector('input[name="trust"]:checked');
        if (checked) selectOption(checked.value);
    });
</script>

{% endblock %}