{% 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);
    }
    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;
    }
    .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);
    }
    .number-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;
    }
    .number-input input[type="number"]:focus {
        outline: none; border-color: var(--primary-medium);
    }
    .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' %}Study Information{% else %}Angaben zum Studium{% endif %}</h2>

    <!-- Field of study -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}Which field of study would you most likely assign yourself to?{% else %}Welcher Studienrichtung würden Sie sich am ehesten zuordnen?{% endif %}</span>
        <div class="radio-list">
            <label class="radio-item"><input type="radio" name="course_of_study" value="1" required><span>{% if participant.language == 'en' %}Business Administration and Economics{% else %}Wirtschaftswissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="2" required><span>{% if participant.language == 'en' %}Social Sciences{% else %}Sozialwissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="3" required><span>{% if participant.language == 'en' %}Law{% else %}Rechtswissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="4" required><span>{% if participant.language == 'en' %}Humanities{% else %}Geisteswissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="5" required><span>{% if participant.language == 'en' %}Cultural Studies{% else %}Kulturwissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="6" required><span>{% if participant.language == 'en' %}Languages{% else %}Sprachen{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="7" required><span>{% if participant.language == 'en' %}Teacher Education{% else %}Lehramt{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="8" required><span>{% if participant.language == 'en' %}Agricultural Sciences{% else %}Agrarwissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="9" required><span>{% if participant.language == 'en' %}Forestry{% else %}Forstwissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="10" required><span>{% if participant.language == 'en' %}Earth Sciences{% else %}Geowissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="11" required><span>{% if participant.language == 'en' %}Medicine{% else %}Medizin{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="12" required><span>{% if participant.language == 'en' %}Natural Sciences{% else %}Naturwissenschaften{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="13" required><span>{% if participant.language == 'en' %}Mathematics{% else %}Mathematik{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="14" required><span>{% if participant.language == 'en' %}Computer Science{% else %}Informatik{% endif %}</span></label>
            <label class="radio-item"><input type="radio" name="course_of_study" value="15" required><span>{% if participant.language == 'en' %}Theology{% else %}Theologie{% endif %}</span></label>
        </div>
    </div>

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

    <!-- Semester -->
    <div class="question-block">
        <span class="question-label">{% if participant.language == 'en' %}What semester are you in?{% else %}In welchem Semester sind Sie?{% endif %}</span>
        <div class="number-input">{% formfield player.semester %}</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 %}