{% 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: 30px;
    }

    .scale-container {
        position: relative;
        padding: 20px 0;
    }

    .scale-labels {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
    }

    .scale-label {
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        color: var(--primary-dark);
        padding: 0 10px;
    }

    .radio-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }

    .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid #dee2e6;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    input[type="radio"]:hover {
        border-color: var(--primary-medium);
        transform: scale(1.1);
    }

    input[type="radio"]:checked {
        background-color: var(--primary-medium);
        border-color: var(--primary-medium);
    }

    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%);
    }

    .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' %}Task 2{% else %}Aufgabe 2{% endif %}
    </h1>
</div>

<div class="card">
    <h2>{% if participant.language == 'en' %}General Risk Question{% else %}Allgemeine Risikofrage{% endif %}</h2>
    <p class="question-text">
        {% if participant.language == 'en' %}
            Generally speaking, how willing are you to take risks?
        {% else %}
            Sind Sie im Allgemeinen ein risikobereiter Mensch oder versuchen Sie, Risiken zu vermeiden?
        {% endif %}
    </p>
    <p class="question-instruction">
        {% if participant.language == 'en' %}
            Please answer using the scale below: 1 means "not at all willing to take risks",
            10 means "very willing to take risks". Use the values in between to indicate your position.
        {% else %}
            Antworten Sie bitte anhand der folgenden Skala: Der Wert 1 bedeutet: gar nicht risikobereit.
            Der Wert 10 bedeutet: sehr risikobereit. Mit den Werten dazwischen können Sie Ihre Einschätzung abstufen.
        {% endif %}
    </p>

    <div class="scale-container">
        <div class="scale-labels">
            <span class="scale-label">
                {% if participant.language == 'en' %}Not at all willing<br>to take risks{% else %}Gar nicht<br>risikobereit{% endif %}
            </span>
            <span class="scale-label">
                {% if participant.language == 'en' %}Very willing<br>to take risks{% else %}Sehr<br>risikobereit{% endif %}
            </span>
        </div>
        <div class="radio-buttons">
            {% for choice in form.risk_aversion %}
                <div class="radio-wrapper">
                    {{ choice }}
                </div>
            {% endfor %}
        </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 %}