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

<div class="header">
    <h1>{% if participant.language == 'en' %}Phase 3{% else %}Phase 3{% endif %}</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 %}
    <div class="scale-item">
        {% if feeling == 'happy' %}
            <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_md_happy %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'friendly' %}
            <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_md_friendly %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'relaxed' %}
            <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_md_relaxed %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'stressed' %}
            <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_md_stressed %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'sad' %}
            <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_md_sad %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'angry' %}
            <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_md_angry %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% elif feeling == 'frustrated' %}
            <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_md_frustrated %}<div class="radio-wrapper">{{ choice }}</div>{% endfor %}</div>
            </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

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