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

{% block title %}
    {% if participant.language == 'en' %}FUNI - Part 2{% else %}FUNI - 2. Teil{% 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; 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: 16px; font-size: 17px;
    }
    .intro-text {
        font-size: 14px; color: #555; margin-bottom: 24px;
    }
    /* Scale item */
    .scale-item {
        margin-bottom: 32px; padding-bottom: 28px;
        border-bottom: 1px solid var(--neutral-lightest);
    }
    .scale-item:last-child { border-bottom: none; margin-bottom: 0; }

    .scale-question {
        font-size: 15px; font-weight: 600;
        color: var(--primary-dark); margin-bottom: 14px;
    }

    .scale-wrapper {
        max-width: 560px; margin: 0 auto;
    }
    .scale-labels {
        display: flex; justify-content: space-between;
        margin-bottom: 8px;
    }
    .scale-label {
        font-size: 12px; font-weight: 600;
        color: var(--primary-dark); text-align: center;
        max-width: 120px; line-height: 1.3;
    }
    .scale-numbers {
        display: flex; justify-content: space-between;
        padding: 0 4px; margin-bottom: 6px;
    }
    .scale-numbers span {
        flex: 1; text-align: center;
        font-size: 12px; color: #888; font-weight: 500;
    }
    .radio-buttons {
        display: flex; justify-content: space-between;
        align-items: center; padding: 0 4px;
    }
    .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.2s 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: 28px; }
    .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>Phase 1</h1>
</div>

<div class="card">
    <h2>{% if participant.language == 'en' %}Questions about Your Current Mood{% else %}Fragen zur gegenwärtigen Stimmungslage{% endif %}</h2>

    <p class="intro-text">
        {% if participant.language == 'en' %}
            Please indicate how you feel right now on a scale from 0 (not at all) to 6 (very strongly):
        {% else %}
            Bitte geben Sie an, wie Sie sich jetzt gerade fühlen, auf einer Skala von 0 (überhaupt nicht) bis 6 (sehr stark):
        {% endif %}
    </p>

    {% for feeling in feeling_order %}

        {% if feeling == 'happy' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Happy{% else %}Glücklich{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_happy %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'friendly' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Affectionate / Friendly{% else %}Zuneigungsvoll / Freundlich{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_friendly %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'relaxed' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Calm / Relaxed{% else %}Ruhig / Entspannt{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_relaxed %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'stressed' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Tense / Stressed{% else %}Angespannt / Gestresst{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_stressed %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'sad' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Depressed / Blue{% else %}Deprimiert / Traurig{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_sad %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'angry' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Angry / Hostile{% else %}Wütend / Feindselig{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_angry %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>

        {% elif feeling == 'frustrated' %}
        <div class="scale-item">
            <p class="scale-question">{% if participant.language == 'en' %}Frustrated{% else %}Frustriert{% endif %}</p>
            <div class="scale-wrapper">
                <div class="scale-labels">
                    <span class="scale-label">{% if participant.language == 'en' %}Not at all{% else %}Überhaupt nicht{% endif %}</span>
                    <span class="scale-label">{% if participant.language == 'en' %}Very strongly{% else %}Sehr stark{% endif %}</span>
                </div>
                <div class="scale-numbers"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
                <div class="radio-buttons">{% for choice in form.swb_bf_frustrated %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        </div>
        {% endif %}

    {% endfor %}
</div>

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

{% endblock %}