{% 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; }
    .header-subtitle { margin: 0; font-size: 13px; opacity: 0.80; }
    .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);
    }
    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 18px; font-size: 17px;
    }
    .question-block { margin-bottom: 28px; }
    .question-block:last-child { margin-bottom: 0; }
    .question-label {
        font-weight: 600; color: var(--primary-dark);
        font-size: 15px; margin-bottom: 12px; display: block;
    }
    /* Number input */
    .age-input input[type="number"] {
        width: 120px; padding: 10px 14px;
        border: 2px solid #dee2e6; border-radius: 6px;
        font-size: 16px; color: var(--primary-dark);
        transition: border-color 0.2s;
    }
    .age-input input[type="number"]:focus {
        outline: none; border-color: var(--primary-medium);
    }
    /* Radio options */
    .radio-list { display: flex; flex-direction: column; gap: 8px; }
    .radio-item {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 14px; background: var(--neutral-lightest);
        border: 2px solid transparent; border-radius: 6px;
        cursor: pointer; transition: all 0.2s ease;
    }
    .radio-item:hover {
        border-color: var(--primary-lighter);
        background: #eaf4fb;
    }
    .radio-item input[type="radio"] {
        width: 18px; height: 18px; cursor: pointer;
        accent-color: var(--primary-medium); flex-shrink: 0;
    }
    .radio-item:has(input[type="radio"]:checked) {
        border-color: var(--primary-medium);
        background: #eaf4fb;
    }
    .radio-item:has(input[type="radio"]:checked) span {
        font-weight: 600; color: var(--primary-dark);
    }
    .divider { border: none; border-top: 1px solid var(--neutral-lightest); margin: 24px 0; }
    .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;
    }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}General Questions{% else %}Allgemeine Fragen{% endif %}</h2>

    <!-- Age -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}How old are you?{% else %}Wie alt sind Sie?{% endif %}</span>
        <div class="age-input">{% formfield player.age %}</div>
    </div>

    <div class="divider"></div>

    <!-- Gender -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}What gender do you identify with?{% else %}Welchem Geschlecht fühlen Sie sich zugehörig?{% endif %}</span>
        <div class="radio-list">
            <label class="radio-item"><input type="radio" name="gender" value="Male" required><span>{% if participant.language == 'en' %}Male{% else %}Männlich{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="gender" value="Female" required><span>{% if participant.language == 'en' %}Female{% else %}Weiblich{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="gender" value="Diverse" required><span>{% if participant.language == 'en' %}Non-binary{% else %}Divers{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="gender" value="NA" required><span>{% if participant.language == 'en' %}Prefer not to say{% else %}Keine Angabe{% endif %}</span></label>
        </div>
    </div>

    <div class="divider"></div>

    <!-- Education -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}What is your highest level of education?{% else %}Was ist Ihr höchster Bildungsabschluss?{% endif %}</span>
        <div class="radio-list">
            <label class="radio-item"><input type="radio" name="education" value="Hauptschulabschluss" required><span>{% if participant.language == 'en' %}Lower Secondary School Certificate{% else %}Hauptschulabschluss{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Mittlere Reife" required><span>{% if participant.language == 'en' %}Intermediate School Certificate{% else %}Mittlere Reife{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Fachhochschulreife" required><span>{% if participant.language == 'en' %}Technical College Entrance Qualification{% else %}Fachhochschulreife{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="IB" required><span>{% if participant.language == 'en' %}General University Entrance Qualification (Abitur){% else %}Allgemeine Hochschulreife (Abitur){% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Ausbildung" required><span>{% if participant.language == 'en' %}Vocational Training{% else %}Ausbildung{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Meister" required><span>{% if participant.language == 'en' %}Master Craftsman{% else %}Meister{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Bachelor" required><span>{% if participant.language == 'en' %}Bachelor's Degree{% else %}Bachelor{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="Master" required><span>{% if participant.language == 'en' %}Master's Degree{% else %}Master{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="education" value="PhD" required><span>{% if participant.language == 'en' %}Doctorate / PhD{% else %}Doktor{% endif %}</span></label>
        </div>
    </div>

    <div class="divider"></div>

    <!-- Student -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}Are you currently a student?{% else %}Sind Sie derzeit Student*in?{% endif %}</span>
        <div class="radio-list">
            <label class="radio-item"><input type="radio" name="student" value="True" required><span>{% if participant.language == 'en' %}Yes{% else %}Ja{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="student" value="False" required><span>{% if participant.language == 'en' %}No{% else %}Nein{% endif %}</span></label>
        </div>
    </div>

</div>

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

{% endblock %}