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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Part 2
    {% elif participant.language == 'de' %}
        FUNI - 2. Teil
    {% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268; --primary-medium: #005f9b;
        --primary-light: #0091c8; --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; }
    textarea { width: 100%; border: 2px solid #dde; border-radius: 6px; padding: 12px;
               font-size: 14px; font-family: inherit; resize: vertical; min-height: 120px;
               color: var(--neutral-dark); transition: border-color 0.2s ease; }
    textarea:focus { outline: none; border-color: var(--primary-medium); }
    .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; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Your Impression{% else %}Ihr Eindruck{% endif %}</h2>
    <p style="font-size: 15px; font-weight: 600; color: var(--primary-dark); margin-bottom: 20px;">
        {% if participant.language == 'en' %}
            What do you think this study was about? Please describe in a few sentences what you believe
            the researchers were trying to investigate.
        {% else %}
            Was glauben Sie, worum es in dieser Studie ging? Bitte beschreiben Sie in wenigen Sätzen,
            was die Forscher*innen Ihrer Meinung nach untersuchen wollten.
        {% endif %}
    </p>
    {% formfield player.study_guess %}
</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 %}